// For Center dashboard table only

.dashboard-table-area-set{
	margin: 12px 12px 0;
	font-size: 12px;
		table{
			thead{
				tr{
					th{
						&:nth-of-type(4){
							&.headerSortDown{
								cursor: pointer;
								padding-left: 14px;
								background-repeat: no-repeat;
								background-image: url(../img/icon-sort-asc-b.png);
								background-position: left 20px;
							}
							&.headerSortUp{
								cursor: pointer;
								padding-left: 14px;
								background-repeat: no-repeat;
								background-image: url(../img/icon-sort-desc-b.png);
								background-position: left 20px;
							}
						}						
						&.headerSortDown{
							cursor: pointer;
							padding-right: 14px;
							background-repeat: no-repeat;
							background-image: url(../img/icon-sort-asc-b.png);
							background-position: right 20px;
								@media only screen and (max-width: 1366px){
									background-position: right 20px;
								}
						}
						&.headerSortUp{
							cursor: pointer;
							padding-right: 14px;
							background-repeat: no-repeat;
							background-image: url(../img/icon-sort-desc-b.png);
							background-position: right 20px;
								@media only screen and (max-width: 1366px){
									background-position: right 20px;
								}
						}
					}
				}
			}
			tbody{
				tr{
					&:nth-of-type(even){
					  background-color: #e0e0e0;
					}
					&:hover{
						background: #B2E0FF;
						cursor: pointer;
					}
					&.active{
						background: #f3cf00;
					}
					&:focus{
						background: #f3cf00;
					}
					&.red{
						background-color: #f7b8b8;
							&:hover{
								background: #B2E0FF;
								cursor: pointer;
							}
					}
					&.yellow{
						background-color:  #f1e5a8;
							&:hover{
								background: #B2E0FF;
								cursor: pointer;
							}
					}
					td{
						height: 25px;
						vertical-align: middle;
						padding: 0 3px;
							&.colspan-msg{
								background-color: #d53f00 !important;
								color: #FFFFFF;
								text-align: center !important;
								font-size: 12px;
								text-transform: uppercase;
							}
							&.no-record{
								background-color: #d53f00 !important;
								color: #FFFFFF;
								text-align: center;
								font-size: 13px;
								text-transform: uppercase;
								padding: 12px 0 !important;
							}
							&:nth-of-type(1){
								padding: 0 0;
								background-color: #62a4d0;
								width: 18px;
									&.edit-icon {
										width: 18px;
									}
							}
							&:nth-of-type(2){
								padding: 0;
								width: 24px;
								position: relative;
							}
							&:nth-of-type(3){
								background-color: rgba(229, 229, 229, 0.6);
							}
							&:nth-of-type(4), &:nth-of-type(5), &:nth-of-type(6){
								position: relative;
									p{
										text-align: left;
										text-overflow: ellipsis;
										overflow: hidden;
										white-space: nowrap;
										position: relative;
										top: 0;
										line-height: 25px;
										width: 100%;
											@media screen and (max-width:1700px){
												position: absolute;
											}
										&.pa{
											position: absolute;
											top: 1px;
										}
									}
							}
							&:nth-of-type(4){
								p {
									text-align: left;
										@media screen and (max-width:1700px){
											position: relative;
										}
										@media only screen and (max-width: 1400px){
											position: relative;
										}									
								}
							}
							&:nth-of-type(5){
								p {
									text-align: right;
										@media only screen and (max-width: 1700px){
											position: relative;
										}
								}
							}
							&.text-center {
								text-align:center !important;
							}
							&:nth-of-type(6){
								p {
									text-align: right;
										@media screen and (max-width:1700px){
											position: relative;
										}
										@media only screen and (max-width: 1400px){
											position: relative;
										}
								}
							}
							&:nth-of-type(n+5) {
								text-align: right;			
							}
							&:nth-of-type(12), &:nth-of-type(18){
								width: 100px;
									i{
										font-size: 15px;
										position: relative;
										right: 36px;
										top: 1px;
									}
							}
							&.new-entry{
								font-weight: bold;
							}
							> span {
								background-color: rgba(216, 216, 216, 0.8);
								background-image: url("../img/sprite.svg");
								background-repeat: no-repeat;
								text-align: center;
								width: 24px;
								height: 25px;
								display: block;
								margin: 0;
									&.indi-icon-default{
										background-position: -135px 2px;
										position: relative;
										cursor: pointer;			
									}
									&.indi-icon-yoy-per{
										background-position: -163px 2px;
									}
									&.indi-icon-yoy{
										background-position: -190px 2px;
									}
									&.indi-icon-mom-per{
										background-position: -218px 2px;
									}
									&.indi-icon-mom{
										background-position: -245px 2px;
									}
									@-moz-document url-prefix() {
										&.indi-icon-default{
											background-position: -135px 4px;
										}
										&.indi-icon-yoy-per{
											background-position: -163px 4px;
										}
										&.indi-icon-yoy{
											background-position: -190px 4px;
										}
										&.indi-icon-mom-per{
											background-position: -218px 4px;
										}
										&.indi-icon-mom{
											background-position: -245px 4px;
										}
									}
							}
							@-moz-document url-prefix() {
								> span{
									height: 26px;
								}
							}
							.arrow-block{
								background-color: #62a4d0;
								color: $white;
								text-align: center;
								position: relative;
								width: 18px;
								border-bottom: 1px solid #5194c0;
								padding: 5px;
									&:hover{
										background: #328dcc;
									}
									&.active{
										background: #328dcc;
									}          
								a{
									color: $white;
									border-bottom: 1px solid #5194c0;
									display: block;
									height: 25px;
									line-height: 25px;
										.fa-angle-right{                

										}
								}
							}
							.check-block{
								color: $white;
								text-align: center;
								position: relative;
								width: 18px;
								height: 25px;
									input[type="checkbox"]{
										margin: 6px 0 0 4px;
									}
							}
							.edit-dash {
								width: 100%;
								height: 100%;
									span{
										background: #aaa;
										font-size: 7px;
										vertical-align: middle;
										color: #fff;
										font-weight: normal;
										width: 9px;
										float: left;
										height: 100%;
										padding: 9px 0;
										text-align: center;
											&:hover{
											background: #949393;
											}
											&.closer{
											border-left: 1px solid #ccc;
											}
									}
							}
							&.icon-seasonal{
								width: 17px;
								text-align: center;
									img{
										width: 11px;
										display: block;
									}
							}
							.fa-caret-up{
								font-size: 16px;
								margin-left: 5px;
									&.green{
										color: #8ebf49;
									}
									&.red{
										color: #d34000;
									}
							}
							.fa-caret-down{
								font-size: 16px;
								margin-left: 5px;
									&.green{
										color: #8ebf49;
									}
									&.red{
										color: #d34000;
									}
							}
							.fa-circle{
								font-size: 10px;
								margin-left: 5px;
									&.yellow{
										color: #f2cf00;
									}
							}
							@media screen and (max-width:1279px){
								&.td-hide{
									display: none;
								}
							}
							@media screen and (max-width:$standard-target-width){
								&.td-hide-990{
									display: none;
								}
							}
							@media screen and (max-width:860px){
								&.td-hide-860{
									display: none;
								}
							}
							@media screen and (max-width:720px){
								&.td-hide-720{
									display: none;
								}
							}
							@media screen and (max-width:595px){
								&.td-hide-595{
									display: none;
								}
							}			
					}
				}
			}
			tr{
				th{
					font-weight:normal;
						&.blue-bg-light{
							background-color: #60a7d8;
							font-size: 12px;
							text-transform: uppercase;
							font-weight: normal;
							color: $white;
							padding: 5px 0;
						}
						&.blue-bg-dark{
							background-color: #328dcc;
							font-size: 12px;
							text-transform: uppercase;
							color: $white;
							padding: 2px 3px;
							vertical-align: bottom;
							cursor: pointer;
						}
						&.orange-bg-light{
							background-color: #dc6633;
							font-size: 12px;
							text-transform: uppercase;
							font-weight: normal;
							color: $white;
							padding: 5px 0;
						}
						&.orange-bg-dark{
							background-color: #b34f29;
							font-size: 12px;
							text-transform: uppercase;
							color: $white;
							padding: 5px 3px 2px 3px;
							vertical-align: bottom;
							cursor: pointer;
						}
						&:nth-of-type(4){
							text-align: left;
						}
						&:nth-of-type(n+5) {
							text-align: right;
						}		
						@media screen and (max-width:1279px){
							&.td-hide{
								display: none;
							}
						}
						@media screen and (max-width:$standard-target-width){
							&.td-hide-990{
								display: none;
							}
						}
						@media screen and (max-width:860px){
							&.td-hide-860{
								display: none;
							}
						}
						@media screen and (max-width:720px){
							&.td-hide-720{
								display: none;
							}
						}
						@media screen and (max-width:595px){
							&.td-hide-595{
								display: none;
							}
						}		
				}
			}
			@media only screen and (max-width: 1279px){
				width: 1920px;
			}
		}
		.btn-set{
			margin:10px 0;
				.btn{
					font-size: 14px;
					color: #FFFFFF;
					border: none;
					width: 215px;
					text-transform: uppercase;
					height: 42px;
					cursor: pointer;
					position:relative;	 
						&.blue-btn{
						background: $main-blue;
						transition:0.3s ease 0s;
						-moz-transition:0.3s ease 0s;
						-webkit-transition:0.3s ease 0s;
							&:hover{
								background: #1b78b9;
							}
						}
						&.gray-btn{
							background: #aaaaaa;
							transition:0.3s ease 0s;
							-moz-transition:0.3s ease 0s;
							-webkit-transition:0.3s ease 0s;
								&:hover{
								background: #949393;
								}
						}
						&.red-btn{
							background: #dc6633;
							width:267px;
							transition:0.3s ease 0s;
							-moz-transition:0.3s ease 0s;
							-webkit-transition:0.3s ease 0s;
								&:hover{
									background: #d35017;
								}
						}
						&.btn-margin{
							margin: 0 15px;
						}
						.btn-loader{
							position:absolute;
							right:11px;
							top:11px;
							z-index:20;
						}
				}
		}
		@media only screen and (max-width: 1280px){
			overflow-x: scroll;
			width: calc(100% - 25px);
		}
}


// POP MENUS USE ONLY

.tools-menu{
	position: absolute;
	z-index: 2;
	top: 25px;
	left: 0;
	background-color: rgba(102, 102, 102, 0.95);
	width: auto;
	font-size: 12px;
	font-weight: normal;
	padding:0 0 10px;
	color:#fff;
		ul{
			margin: 5px 0 0 0;
			line-height: 20px;
				li{
					list-style: none;
					position: relative;
					white-space: nowrap;
						a{
							text-decoration: none;
							text-align: left;
							padding-left: 14px;
							padding-right: 14px;
							border-bottom: none;
							text-transform: capitalize;
							height: auto;
							line-height: inherit;
							color:#fff;
							display:block;
							border-bottom:none !important;
								&:hover{
									background-color: rgb(31, 128, 195);
								}
						}
						&:hover .tools-second-menu{
							display: block;
						}
						&:hover > a{
							background-color: #1f80c3;
						}
				}
		}
		.tools-menu-heading{
			font-size: 12px;
			font-weight: bold;
			text-transform: uppercase;
			padding: 10px 0 0 10px;
			text-align: left;
		}
		.tools-second-menu{
			margin: 0;
			background-color: rgba(102, 102, 102, 0.95);
			left: 100%;
			top: -35px;
			position: absolute;
			width: auto;
			padding:0 0 10px 0;
			display: none;
				li{
					list-style: none;
					text-align: left;
					white-space: nowrap;
						a{
							text-align: left;
							padding-left: 14px;
							padding-right: 14px;
								span{
									&.value{
										background-image: url("../img/sprite.svg");
										background-repeat: no-repeat;
										text-align: center;
										width: 17px;
										display: inline-block;
										height: 16px;
										background-position: -140px -45px;
										position:relative;
										top:3px;
									}
									&.mom{
										background-image: url("../img/sprite.svg");
										background-repeat: no-repeat;
										text-align: center;
										width: 17px;
										display: inline-block;
										height: 16px;
										background-position: -161px -45px;
										position:relative;
										top:3px;
									}
									&.mom-per{
										background-image: url("../img/sprite.svg");
										background-repeat: no-repeat;
										text-align: center;
										width: 17px;
										display: inline-block;
										height: 16px;
										background-position: -183px -45px;
										position:relative;
										top:3px;
									}
									&.yoy{
										background-image: url("../img/sprite.svg");
										background-repeat: no-repeat;
										text-align: center;
										width: 17px;
										display: inline-block;
										height: 16px;
										background-position: -205px -45px;
										position:relative;
										top:3px;
									}
									&.yoy-per{
										background-image: url("../img/sprite.svg");
										background-repeat: no-repeat;
										text-align: center;
										width: 17px;
										display: inline-block;
										height: 16px;
										background-position: -227px -45px;
										position:relative;
										top:3px;
									}
								}
						}
						&:hover .tools-third-menu{
							display: block;
						}
				}
				.tools-menu-heading{
					font-size: 12px;
					font-weight: bold;
					text-transform: uppercase;
					padding: 10px 0 5px 10px;
					text-align: left;
				}
		}
		.tools-third-menu{
			margin: 0;
			background-color: rgba(102, 102, 102, 0.95);
			left: 100%;
			top: -35px;
			position: absolute;
			width: auto;
			padding:0 0 10px 0;
			display: none;
		}
}
.transform-data-menu{
	position: absolute;
	z-index: 2;
	top: 0;
	left: 35px;
	background-color: rgba(102, 102, 102, 0.95);
	width: 290px;
	font-size: 12px;
	font-weight: normal;
	padding: 0 0 10px;
	color:#fff;
		span{
			border-top: 12px solid transparent;
			border-bottom: 12px solid transparent;	
			border-right: 10px solid #6b6b6b;
			top: 0;
			height: 0;
			left: -10px;
			margin-left: 0;
			position: absolute;
			width: 0;
			display: block;
		}
		.heading{
			font-size: 12px;
			font-weight: bold;
			text-transform: uppercase;
			padding: 10px 0 0 10px;
			text-align: left;
			color: #FFF;
		}
		ul{
			margin: 5px 0 0 0;
			line-height: 20px;
				li{
					list-style: none;
						a{
							text-align: left;
							padding-left: 14px;
							padding-right: 14px;
							display: block;
							color: #FFF;
								span{
									&.value{
										background-image: url("../img/sprite.svg");
										background-repeat: no-repeat;
										text-align: center;
										width: 17px;
										display: inline-block;
										height: 16px;
										background-position: -140px -45px;
										position:relative;
										top:3px !important;
										border:none;
										left:0px;
									}
									&.mom{
										background-image: url("../img/sprite.svg");
										background-repeat: no-repeat;
										text-align: center;
										width: 17px;
										display: inline-block;
										height: 16px;
										background-position: -161px -45px;
										position:relative;
										top:3px !important;
										border:none;
										left:0px;
									}
									&.mom-per{
										background-image: url("../img/sprite.svg");
										background-repeat: no-repeat;
										text-align: center;
										width: 17px;
										display: inline-block;
										height: 16px;
										background-position: -183px -45px;
										position:relative;
										top:3px !important;
										border:none;
										left:0px;
									}
									&.yoy{
										background-image: url("../img/sprite.svg");
										background-repeat: no-repeat;
										text-align: center;
										width: 17px;
										display: inline-block;
										height: 16px;
										background-position: -205px -45px;
										position:relative;
										top:3px !important;
										border:none;
										left:0px;
									}
									&.yoy-per{
										background-image: url("../img/sprite.svg");
										background-repeat: no-repeat;
										text-align: center;
										width: 17px;
										display: inline-block;
										height: 16px;
										background-position: -227px -45px;
										position:relative;
										top:3px !important;
										border:none;
										left:0px;
									}
								}
								&:hover{
									background-color: rgb(31, 128, 195);
								}
						}
				}
		}				
}
@media screen and (max-width: $mobile-standard-width){
	.dashboard-table-area-set{
		table{
			tbody{
				tr{
					td{
						&.arrow-block{
							.tools-menu{
								.tools-second-menu{
									position:relative;
									left:0px;
									top:0px;
								}
								.tools-third-menu{
									position:relative;
									left:0px;
									top:0px;
								}
							}
						}
					}
				}
			}
		}
	}	
}