.navigationBar
{
	background-color:#99CCFF;
}


label
button
{
	cursor:pointer;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.path
{
	margin-right:10px;
	font-size:12px;
}

.path img
{
	width:9;
	height:9;
	margin-right:5px;
}

.path b
{
	color:black;
}

.path a
{
	color:#0066cc;
	transition-property: color;
 	transition-duration:0.5s;
}

.path a:hover
{
	color:#3388FF;
}


/* btn, imgBtn, bigBtn, bigImgBtn  */
	.btn, .imgBtn, .bigBtn, .bigImgBtn, .smallBtn
	{
		margin:10px 5px 10px 5px;
		color:white;
		padding-right:10px;

		background: rgb(16,86,157);
		background: linear-gradient(166deg, rgb(155,186,218) 0%, rgb(93,159,227) 29%, rgb(128,174,221) 42%, rgb(16,86,157) 55%);
		cursor:pointer;
		border-radius:10px;
		filter:brightness(1);
		box-shadow:3px 3px 10px rgba(0,0,0,0.5);
		transition-property: filter;
	 	transition-duration:0.5s;
	 	white-space:nowrap;
	}

	.bigBtn, .bigImgBtn
	{
		height:70px;
		font-size:22px;
	}

	.smallBtn
	{
		height:32;
		font-size:16px;
	}

	.imgBtn, .btn
	{
		height:48px;
		font-size:16px;
	}

	.bigImgBtn
	{
		padding-left:16px;
		text-align:left;
		margin-top:7;
		margin-bottom:6;
	}

	.imgBtn
	{
		padding-left:8px;
		padding-right:16px;
		text-align:left;
	}

	
	.bigBtn:hover, .btn:hover, .imgBtn:hover, .bigImgBtn:hover, .smallBtn:hover
	{
		filter:brightness(1.2)
	}

	.bigBtn:active, .btn:active, .imgBtn:active, .bigImgBtn:active, .smallBtn:active
	{
		background: #e8b915;
		transform:translate(1px, 1px);
		box-shadow:0px 0px 2px rgba(0,0,0,0.5);
	}

	.bigBtn:disabled, .btn:disabled, .imgBtn:disabled, .bigImgBtn:disabled, .smallBtn:disabled
	{
		filter:brightness(1);
		border-color:#cccccc;
		background: rgb(86,86,86);
		background: linear-gradient(166deg, rgb(186,186,186) 0%, rgb(159,159,159) 29%, rgb(174,174,174) 42%, rgb(186,186,186) 55%);
		transform:translate(0px, 0px);
		box-shadow:3px 3px 10px rgba(0,0,0,0.5);
	}

	


	.bigImgBtn img
	{
		width:48px;
		height:48px;
		margin-right:8px;
		margin-top:4px;
	}

	.bigImgBtn span
	{
		position:relative;
		top:-15px;
	}

	.bigImgBtn:disabled img, .imgBtn:disabled img
	{
		opacity:0.5;
	}

	.bigImgBtn:disabled span, .imgBtn:disabled span
	{
		opacity:0.5;
	}

	.imgBtn img
	{
		width:32px;
		height:32px;
		margin-right:8px;
	}

	.imgBtn span
	{
		position:relative;
		top:-10px;
	}

/* btn, imgBtn, bigBtn, bigImgBtn */


.circleBtn
{
	margin:2px 2px 2px 2px;
	width:32px;
	height:32px;
	cursor:pointer;
	position:relative;
	transition-property: transform;
 	transition-duration:0.5s;
}

.circleBtn:hover
{
	transform:matrix(1.2,0, 0, 1.2, 0.0, 0.0);
}

.circleBtn:active
{
 	transition-duration:0s;
 	transform:matrix(0.8,0, 0, 0.8, 0.0, 0.0);
}



/************* toastr ****************/

@keyframes toastrAnim {
  from {
    transform:matrix(1,0, 0,1, 0,0);
    opacity:1;
  }

  to {
    transform:matrix(1,0, 0,1, 0,-150);
  	opacity:0;
  }

  
}


.toastr
{
	position:fixed;
	top:150px;
	background-color:#ffffcc;
	text-align:center;
	border-style:solid;
	border-width:1px;
	border-color:black;
	box-shadow: 0 0 12px rgba(0,0,0,0.3);
	width:200px;
	padding: 10 10 10 10;
	z-index:3000;
	animation-duration: 3000ms;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
  	animation-name: toastrAnim;
}


/*********** dialogBox *************/

/*çàòåíåíèå âñåãî ïîä ìîäàëüíûì îêíîì*/
@keyframes dialogShadowAnim {
  from {
    opacity:0;
  }

  to {
  	opacity:1;
  }
}


.dialogShadow
{
	position:fixed;
	background-color:rgba(0,0,0,0.3);
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:304;
	animation-duration: 400ms;
	animation-timing-function: linear;
  	animation-name: dialogShadowAnim;
}

@keyframes dialogBoxAnim {
  from {
    opacity:0;
    transform:translate(-50%,-50%) scale(0,0);
  }

  to {
  	opacity:1;
  	transform:translate(-50%,-50%) scale(1,1);
  }
}

.dialogBox, dialogBoxTo
{
	position:fixed;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	background-color:#f2f4fc;
	box-shadow:4px 4px 15px rgba(0,0,0,0.5);
	border:1px solid #e0e3e8;
	color:#6a798c;
	z-index:304;
	min-width:300px;
	max-width:95%;

	animation-duration: 400ms;
	animation-timing-function: linear;
  	animation-name: dialogBoxAnim;
}



.windowTitle
{
	color:#37587f;
	font-size:20px;
	font-weight:300;
	background-color:white;
	border-bottom:2px solid #e0e3e8;
	height:32px;
	text-align:center;

	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/************** êîíåö DialogBox **************/




/*********** tabControl *********************/
.tabControl-TabControl		/* òàáëèöà âñåãî tabControl */
{
	border-spacing: 0px;
}

.tabControl-TabLine   /* ñòðîêà ñ ÿðëûêàìè */
{
	height:1%;
	padding-left:16px;
	text-align:left;
	overflow:hidden;
	position:relative;
}

.tabControl-TabTable  /* òàáëèöà ñ ÿðëûêàìè  */
{
	border-spacing: 3px;
}

.tabControl-Tab    /* íåàêòèâíûé ÿðëû÷îê */
{
	box-shadow:3px 3px 10px rgba(0,0,0,0.3);
	position:relative;
	top:8px;
	background: linear-gradient(180deg, rgb(230,250,255) 50%, rgb(172,182,192) 100%);
	border:2px solid #6699cc;
	border-radius:10px 10px 0px 0px;

	height:40px;
	padding:8px 8px 8px 8px;


	color:black;
	font-size:16px;

	cursor:pointer;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
    filter: brightness(1.15);
    transition-property: filter;
 	transition-duration:0.5s;
}

.tabControl-Tab:hover
{
	filter: brightness(1);
}


.tabControl-ActiveTab    /* àêòèâíûé ÿðëû÷îê */
{
	box-shadow:3px 3px 10px rgba(0,0,0,0.3);
	position:relative;
	top:6px;
	background: linear-gradient(180deg, rgb(101,156,211) 0%, rgb(51,102,153) 60%, #6699CC 100%);
	border:2px solid #666699;
	border-radius:10px 10px 0px 0px;
	color:white;
	font-size:16px;

	height:40px;
	padding:8px 8px 8px 8px;

	cursor:pointer;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    filter: brightness(1);
    transition-property: filter;
 	transition-duration:0.5s;
}

.tabControl-ActiveTab:hover
{
	filter: brightness(1.2);
}


.tabControl-Page
{
	border:3px solid #6699CC;
	border-radius:10px;
	vertical-align:top;
	background-color:#f0f5ff;
	padding:16px 16px 16px 16px;
}


/************ êîíåö tabControl **************/



/************ toolBar ******************/
.toolBar
{
	width:100%;
	background: linear-gradient(180deg, #ddeeff 0%, #99ccff 100%);
	border:1px solid #99ccff;
	text-align:left;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	padding:4px 4px 4px 4px;
	border-radius:6px 6px 0px 0px;
}

.toolBtn, .disabledToolBtn, .checkedToolBtn
{
	padding:6px 6px 6px 6px;
	width:1%;
	min-width:28px;
	text-align:center;
	vertical-align:middle;
	white-space:noWrap;
	cursor:pointer;
	border:1px solid rgba(128,128,128,0);
}

.toolBtn img, .disabledToolBtn img, .checkedToolBtn img
{
	width:20px;
	height:20px;
}

.toolBtn span, .disabledToolBtn span, .checkedToolBtn span
{
	white-space:noWrap;
	color:black;
	font-size:14px;
	position:relative;
	top:-4px;
	margin-left:4px;
}

.disabledToolBtn img, .disabledToolBtn span
{
	opacity:0.3;
}

.toolBtn
{
	transition-property: border, background, transform;
 	transition-duration:0.5s;
}

.toolBtn:hover
{
	border-left-color:white;
	border-top-color:white;
	border-bottom-color:#99ccff;
	border-right-color:#99ccff;
	background-color:rgba(255,255,192,0.5);
}

.checkedToolBtn
{
	border-left-color:#99ccff;
	border-top-color:#99ccff;
	border-bottom-color:white;
	border-right-color:white;
	background-color:#ffff66;
	transform:matrix(1,0, 0,1, 1, 1);
}
	

.checkedToolBtn:hover
{
	background-color:#ffcc99;
}


.toolSeparator
{
	padding-left:3px;
	padding-right:6px;
	text-align:center;
}

.toolSeparator div
{
	width:1px;
	height:28px;
	background-color:#99ccff;
	border-right:1px solid white;
}
/****************** end toolBar ********************/




/****************** ListView ***********************/
.listView
{
	overflow-y:scroll;
	overflow-x:hidden;
	border:2px solid #99CCFF;
	background-color:white;
}

.listViewColumn, .clickableListViewColumn
{
	color:black;
	background: linear-gradient(180deg, #cceeff 0%, #99ccff 100%);
	border-left:1px solid #eef0ff;
	border-top:1px solid #eef0ff;
	border-right:1px solid #6699CC;
	border-bottom:1px solid #6699CC;
	position:sticky;

	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	top:0px;
}

.clickableListViewColumn
{
	transition-property: filter;
 	transition-duration:0.5s;
 	cursor:pointer;
}

.clickableListViewColumn:hover
{
	filter:brightness(1.1);
}

.clickableListViewColumn:active
{
	transform:matrix(1,0, 0,1, 1,1);
}



.listViewItem
{
	background-color:white;
	transition-property: background;
 	transition-duration:0.5s;
}

.listViewItem td, .selListViewItem td
{
	cursor:pointer;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

	padding:4px 4px 4px 4px;
	border-bottom:1px solid #cceeff;
}

.listViewItem td
{
	color:black;
}

.selListViewItem td
{
	color:black;
}	

.listViewItem:hover
{
	background-color:#cceeff;
}

.selListViewItem
{
	background-color:#AACCFF;
	transition-property: background;
 	transition-duration:0.5s;
}

.selListViewItem:hover
{
	background-color:#99BBEE;

}	
/****************** end listView ********************/


/****************** property grid *****************/
.propertyTitle
{
	text-align:right;
	color:black;
}


.propertyValue, .propertyValueLink
{
	font-weight:bold;
	color:black;
}

.propertyValueLink
{
	border:1px solid rgba(0,0,0,0.2);
}                  	

.propertyLink
{
	color:#336699;
	border-bottom:2px dotted #9900ff;
	cursor:pointer;
	transition-property: color;
 	transition-duration:0.5s;
}

.propertyLink:hover
{
	color:#66CCFF;
}

.propertyDel
{
	width:16px;
	height:16px;
	cursor:pointer;
	transition-property: filter;
 	transition-duration:0.5s;
}
.propertyDel:hover
{
	filter:brightness(1.5);
}
.propertyDel:active
{
	background-color:#FF6633;
}

/******************* invoice row anim **************/
@keyframes invoiceRowAnim {
  from {
    filter:hue-rotate(90deg);
  }

  to {
  	filter:hue-rotate(0deg);
  }
}




/****************** end property grid *****************/

.imgDelBtn
{
	cursor:pointer;
	position:absolute;
	left:0px;
	top:0px;
	background-color:white;
	border:1px solid black;
	box-shadow:3px 3px 10px rgba(0,0,0,0.3);
	transition-property: filter, transform;
 	transition-duration:0.5s;
}

.imgDelBtn:hover
{
	filter:brightness(1.5);
	transform:matrix(1.2,0,0,1.2,0,0);
}

.imgDelBtn:active
{
	transition-duration:0s;
	transform:matrix(1,0,0,1,0,0);
	background-color:#ff9933;
}	


.fastLink
{
	cursor:pointer;
	font-weight:bold;
	border-bottom:2px dotted #336699;
	color:#339999;
	transition-property: color;
 	transition-duration:0.5s;
}


.fastLink:hover
{
	color:#6699FF;
}
	


.lds-spinner {
  color: official;
  display: inline-block;
  position: fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:1000;
  width: 80px;
  height: 80px;

	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

}
.lds-spinner div {
  transform-origin: 40px 40px;
  animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 37px;
  width: 6px;
  height: 18px;
  border-radius: 20%;
  background: #336;
}
.lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}
.lds-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}
.lds-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}
@keyframes lds-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}