// SUMMARY PAGE USE ONLY

.summary-page-area{
	width: 1000px;
    margin: 0 auto 40px;
	font-family: Arial, Helvetica, sans-serif;
		h4{			
			&.ui-state-default{
				background-color: $main-blue;
				font-size: 16px;
			}
			&.ui-accordion-header{
				margin-bottom: 0;
				padding: 3px;
				font-size: 16px;
				margin-top: 20px;
			}
			span{
				&.accordian-arrow{
					border-right: 1px solid $white;
					padding: 4px 8px 4px;
					margin-right: 10px;					
				}
				.fa-angle-right{
					padding: 0 2.5px;
				}
			}
		}
		.ui-widget-content{
			background-color: $white;			
			box-shadow: 0px 6px 10px #292929;
			padding: 15px;
			font-size: 14px;
		}
		.ui-widget{
			font-family: Arial, Helvetica, sans-serif;
		}
		.admin-summary{
			.grey-heading{
				font-size: 30px;
				color: #666666;
				display: inline-block;
				text-transform: uppercase;
					&.mb10{
						margin-bottom: 10px;
					}
					.over-icon{
						background-image: url("../img/summary-sprite.svg");
						background-position: 0px 0px;
						width: 22px;
						height: 23px;
						display: inline-block;
							@media only screen and (max-width: 410px){
								position: relative;
								top: 2px;
							}
					}
					.schedule-icon{
						background-image: url("../img/summary-sprite.svg");
						background-position: -37px 0px;
						width: 26px;
						height: 29px;
						display: inline-block;
							@media only screen and (max-width: 410px){
								position: relative;
								top: 3px;
							}
					}
					.user-icon{
						background-image: url("../img/summary-sprite.svg");
						background-position: -80px 0px;
						width: 25px;
						height: 25px;
						display: inline-block;
							@media only screen and (max-width: 410px){
								position: relative;
								top: 1px;
							}
					}
					@media only screen and (max-width: 410px){
						font-size: 23px;
						letter-spacing: -1px;
					}
			}
			.overview-area{
				width: 255px;
				float: left;
				margin-right: 25px;
					.over-top{
						background-color: $main-blue;
						color: #fff;
						padding: 33px 13px 13px;
						font-size: 14px;
						text-transform: uppercase;
						line-height: 22px;
							span{
								font-size:43px;
								letter-spacing: -2px;
							}
							@media only screen and (max-width: 1023px){
								text-align: center;
							}
					}
					.over-bottom{
						background-color: #afd3eb;
						color: #666666;
						padding: 34px 13px 13px;
						font-size: 14px;
						text-transform: uppercase;
							span{
								font-size: 38px;
								letter-spacing: -2px;
							}
							.source{
								float: left;
								line-height: 20px;
							}
							.portal{
								float: right;
								line-height: 20px;
							}
					}
					@media only screen and (max-width: 1023px){
						float: none;
						margin-right: 0;
						width: 100%;
						margin-bottom: 20px;
					}
			}
			.schedule-area{
				width: 410px;
				float: left;
				margin-right: 25px;
					.heads{
						font-size: 14px;
						color: #000;
						text-transform: uppercase;
						padding: 0 5px;
							&.blue{
								background-color: $main-blue;
								color: $white;
							}
							&.orange{
								background-color: #d34000;
								color: $white;
							}
							&.yellow{
								background-color: #f2cd13;
							}
							&.green{
								background-color: #8ebf49;
							}
					}
					.bodies{
						font-size: 26px;
						padding: 7px 5px;
						color: #000;
						font-weight: bold;
						letter-spacing: -2px;
						cursor: pointer;
							&.orange{
								background-color: #e07a4d;
								color: #fff;
							}
							&.yellow{
								background-color: #f6dc5a;
								padding-bottom: 3px;
							}
							&.green{
								background-color: #b0d280;
								padding-bottom: 3px;
							}
					}
					.updates-area{
						width: 265px;
						float: left;
						font-size: 14px;
						text-transform: uppercase;
						color: #666666;
							span{
								font-size: 36px;
								color: #000;
								font-weight: bold;
								letter-spacing: -2px;
							}
							.updates{
								padding: 22px 13px 13px;
								line-height: 20px;
								cursor: pointer;
									&.top{
										background-color: #efefef;
									}
									&.bottom{
										background-color: #f7f7f7;
										padding: 33px 13px 13px;
									}
							}
							@media only screen and (max-width: 767px){
								width: 235px;
								margin-bottom: 20px;
							}
							@media only screen and (max-width: 410px){
								width: 178px;
								margin-bottom: 20px;
							}
					}
					.overdue-area{
						width: 143px;
						float: right;
							.space-set{
								height: 2px;
								background-color : $white;
							}
							@media only screen and (max-width: 767px){
								width: 133px;
							}
							@media only screen and (max-width: 410px){
								width: 100px;
							}
					}
					@media only screen and (max-width: 1023px){
						margin-right: 0px;
					}
					@media only screen and (max-width: 767px){
						width: 100%;
						float: none;
					}
			}
			.users-area{
				width: 255px;
				float: left;
				font-size: 14px;
					.user-bg{
						background-color: #efefef;
						padding: 12px 10px;
						color: #fff;
						text-transform: uppercase;
							.regular-user{
								float: left;
								background-color: #02bbcd;
								padding: 15px 10px;
								width: 125px;
								cursor: pointer;
									span{
										font-size: 40px;
										letter-spacing: -3px;
									}
							}
							.other-users{
								float: right;
								width: 102px;
								cursor: pointer;
									span{
										font-size: 31px;
										font-weight: bold;
										color: #000;
										letter-spacing: -2px;
									}
								.heads{
									font-size: 14px;
									color: $white;
									text-transform: uppercase;
									padding: 0 5px;
										&.orange{
											background-color: #f47935;
										}
										&.green{
											background-color: #00a885;
										}
								}
								@media only screen and (max-width: 767px){
									width: 222px;
								}
								@media only screen and (max-width: 767px){
									width: 130px;
								}
							}
						.btn {
							font-size: 14px;
							color: #FFFFFF;
							border: none;
							width: 100%;
							text-transform: uppercase;
							height: 42px;
							cursor: pointer;
							position: relative;
							margin-top: 10px;
								&.blue{
									background: $main-blue;
										&:hover{
											background-color: #1b78b9;
										}
								}
						}
					}
					@media only screen and (max-width: 1023px){
						float: right;
					}
					@media only screen and (max-width: 767px){
						float: none;
						width: 100%;
					}
			}
		}
		.indicator-summary{
			.grey-heading{				
				font-size: 30px;
				color: #666666;
				display: inline-block;
				text-transform: uppercase;
					&.mb10{
						margin-bottom: 10px;
					}
					.us-icon{
						background-image: url("../img/summary-sprite.svg");
						background-position: -124px 0px;
						width: 41px;
						height: 28px;
						display: inline-block;
							@media only screen and (max-width: 410px){
								position: relative;
								top: 3px;
							}
					}
					.updated-icon{
						background-image: url("../img/summary-sprite.svg");
						background-position: -181px 0px;
						width: 27px;
						height: 30px;
						display: inline-block;
							@media only screen and (max-width: 410px){
								position: relative;
								top: 3px;
							}
					}
					@media only screen and (max-width: 410px){
						font-size: 23px;
						letter-spacing: -1px;
					}
			}
			.bars-area-outer{
				.title-bar-area{
					margin-bottom: 1px;
					.top{
						.bar{
							font-size: 14px;
							text-transform: uppercase;
							color: #000;
							padding: 0 7px;
							width: 363px;
							float: left;
							height: 32px;
							overflow: hidden;
								.name{
									float: left;
									width: 290px;
									padding: 0;
										table{
											width: 100%;
												tr{
													td{
														vertical-align: middle;
														line-height: 14px;
														height: 28px;
													}
												}
										}
										@media only screen and (max-width: 1023px){
											width: 500px;
										}
										@media only screen and (max-width: 767px){
											width: 200px;
										}
										@media only screen and (max-width: 410px){
											width: 115px;
											font-size: 12px;
										}
								}
								.counter{
									float: right;
									padding: 7px 0;
								}
								&.positive{
									background-color : #8ebf49;								
								}
								&.negative{
									background-color : #d34000;
									color: #fff;
								}
								&.flat{
									background-color : #f2cd13;								
								}
								@media only screen and (max-width: 1023px){
									width: 585px;
								}
								@media only screen and (max-width: 767px){
									width: 265px;
								}
								@media only screen and (max-width: 410px){
									width: 185px;
								}
						}
						.m-y{
							float: right;
							font-size: 12px;
							color: #000;
							font-weight: bold;
							text-transform: uppercase;
								a{
									color: #000;
									float: left;
									background-color: #f4f4f4;
									padding: 9px 0 8px;
									width: 52px;
									text-align: center;
										&.active{
											background-color: #e5e5e5;
										}
										@media only screen and (max-width: 410px){
											width: 46px;
										}
								}
								@media only screen and (max-width: 1023px){
									float: right;
								}
						}
					}
					.middle{
						background-color: #d8d8d8;
						padding: 0 7px;
						font-size: 12px;
						line-height: 20px;
						height: 20px;
						color: #000;
							.fa-map-marker{
								font-size: 13px;
								margin-right: 5px;
								color: #d44000;
									&.green{
										color: #8ebf49;
									}
									&.orange{
										color: #d34000;
									}
									&.yellow{
										color: #ffea00;
									}
							}
							span{
								font-weight: 600;
							}
					}
					.bottom{
						padding: 2px 7px 5px;
						width: 100%;
						position: relative;
							&.mom{
								background-color: #f4f4f4;
							}
							&.yoy{
								background-color: #e5e5e5;
							}
						.detail-left{
							float: left;
							font-size: 12px;
							width: 160px;
								span{
									font-size: 29px;
									font-weight: bold;
									letter-spacing: -2px;
										@media only screen and (max-width: 410px){
											font-size: 24px;
										}
								}
								@media only screen and (max-width: 1023px){
									width: 365px;
								}
								@media only screen and (max-width: 767px){
									width: 125px;
								}
								@media only screen and (max-width: 410px){
									width: 80px;
								}
						}
						.sparkline{
							float: left;
							cursor: pointer;
							height: 53px;
							width: 150px;
								@media only screen and (max-width: 767px){
									width: 100px;
								}
								@media only screen and (max-width: 410px){
									width: 70px;
								}
						}
						.low-high{
							float: right;
							margin: 13px 0 0 0;
								.sides{
									display: inline-block;
									width: 60px;
									font-size: 15px;
									color: #000;
									font-weight: bold;
									letter-spacing: -0.7px;
										.heading{
											background-color: #aaaaaa;
											color: #fff;
											font-size: 10px;
											text-transform: uppercase;
											padding: 0 3px;
											letter-spacing: 0px;
										}
										@media only screen and (max-width: 410px){
											font-size: 13px;
											width: 50px;
										}
								}
						}
						@media only screen and (max-width: 1023px){
							width: 100%;
						}
					}
				}
			}
			.us-eco{
				float: left;
				width: 470px;
					@media only screen and (max-width: 1023px){
						float: none;
						width: 100%;
						margin-bottom: 20px;
					}
			}
			.recent-updated{	
				float: right;
				width: 470px;
					@media only screen and (max-width: 1023px){
						float: none;
						width: 100%;
					}
			}
		}
		.dash-summary{
			position: relative;
			.grey-heading{				
				font-size: 30px;
				color: #666666;
				display: inline-block;
				text-transform: uppercase;
					&.mb10{
						margin-bottom: 10px;
					}
					.dash-icon{
						background-image: url("../img/summary-sprite.svg");
						background-position: -222px 0px;
						width: 41px;
						height: 33px;
						float: left;
					}
					.info-icon{
						background-image: url("../img/sprite.svg");
						background-position: right -203px;
						display: inline-block;
						width: 22px;
						height: 22px;
						cursor: pointer;
							@media only screen and (max-width: 410px){
								position: relative;
								top: 2px;
							}
					}
					@media only screen and (max-width: 410px){
						font-size: 23px;
						letter-spacing: -1px;
						line-height: 38px;
					}
			}
			.list-grid{
				float: right;
				margin: 4px 0;
					.fa{
						background: #666666;
						color: #fff;
						padding: 8px 0;
						height: 30px;
						width: 21px;
						font-size: 14px;
						text-align: center;
							&:hover{
								background-color: $main-blue;
							}
							&.active{
								background-color: $main-blue;
							}
					}
			}
			.list{
				margin: 0 -15px 15px 0;
				.report-list-head{
					background-color : $main-blue;
					padding: 4px 0px;
					width: 970px;
					font-size: 12px;
					color: #fff;
					text-transform: uppercase;
						.title-head{
							float: left;
							width: 540px;
							padding-left: 7px;
							cursor: pointer;							
								@media only screen and (max-width: 1023px){
									width: 204px;
								}
								&.down{
									padding-right: 14px;
									background-repeat: no-repeat;
									background-image: url(../img/icon-sort-desc-b.png);
									background-position: 45px 0;
										@-moz-document url-prefix() {
											background-position: 45px center;
										}
								}
								&.up{
									padding-right: 14px;
									background-repeat: no-repeat;
									background-image: url(../img/icon-sort-asc-b.png);
									background-position: 45px 0px;
										@-moz-document url-prefix() {
											background-position: 45px center;
										}
								}
						}
						.down{
							cursor: pointer;
							background-repeat: no-repeat;
							background-image: url(../img/icon-sort-desc-b.png);
							background-position: right 0;
								@-moz-document url-prefix() {
									background-position: right center;
								}
						}
						.up{
							cursor: pointer;
							background-repeat: no-repeat;
							background-image: url(../img/icon-sort-asc-b.png);
							background-position: right 0px;
								@-moz-document url-prefix() {
									background-position: right center;
								}
						}
						.fta-head{
							float: left;
							width: 80px;
							text-align: center;
							cursor: pointer;
						}
						.summ-head{
							float: left;
							width: 210px;
							text-align: center;
						}
						.action-head{
							float: right;
							width: 60px;
							text-align: center;
						}
						@media only screen and (max-width: 1023px){
							width: 690px;
						}
				}
				.report-list-body{
					background-color: #f4f4f4;
					margin-bottom: 1px;
					padding: 7px;
					width: 970px;
					position: relative;
					cursor: pointer;
						&:nth-child(2n) {
							background-color: #ddd;
						}
						&:hover{
							background-color: #b2e0ff;
						}
						.title-body{
							float: left;
							width: 540px;
							max-width: 540px;
							font-size: 20px;
							color: #000;
							text-transform: uppercase;
							line-height: 49px;
							text-transform: uppercase;
							position: relative;
							margin: -7px;
								@media only screen and (max-width: 1023px){
									width: 195px;
									max-width: 195px;
									font-size: 14px;
									text-transform: uppercase;
								}
								&.char72{
									font-size: 18px;
									line-height: 17.5px
								}
								&.after72{
									line-height: 17.5px;
									font-size: 18px;
								}
								span{
									&.color{
										width: 7px;
										height: 49px;
										float: left;
											&.positive{
												background-color: #8ebf49;
											}
											&.negative{
												background-color: #d34000;
											}
											&.flat{
												background-color: #f2cd13;
											}
									}
									&.dragging{
										line-height: 49px;
										background-color: #aaa;
										color: #fff;
										font-size: 11px;
										width: 15px;
										text-align: center;
										transition: 0.3s ease 0s;
										float: left;
											&:hover{
												background-color: #949393;
											}
									}
									&.title{
										float: left;
										width: 505px;
										max-width: 505px;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
										line-height: 49px;
										margin-left: 10px;
											@media only screen and (max-width: 1023px){
												max-width: 160px;
												width: 160px;
											}
									}
								}
						}
						.fta-body{
							float: left;
							width: 83px;
							text-align: center;
							margin: 2px 0 0 0;
							font-size: 18px;
							color: #000;
							font-weight: bold;
							line-height: 33px;
						}
						.summ-body{
							float: left;
							width: 210px;
							text-align: center;
								.three-sec{
									width: 70px;
									float: left;
									font-size: 11px;
									font-weight: bold;
									color: $black;
										&.neg{
											width: 85px;
										}
										&.flat{
											width: 50px;
										}
										span{
											font-size: 15px;
											color: #000;
												.fa{
													font-size: 15px;
													margin: 0 2px;
														&.fa-circle{
															font-size: 8px;
															position: relative;
															top: -2px;
														}
												}
										}
								}
						}
						.action-body{
							float: right;
							width: 60px;
							margin: -7px -7px;
								.icon-action {
									float: right;
									background: #666666;
									color: #fff;
									padding: 12px 0;
									height: 49px;
									width: 29px;
									font-size: 21px;
									text-align: center;
										&.margin {
											margin-right: 1px;
											font-size: 20px;
										}
										&:hover{
											background-color: $main-blue;
										}
								}
						}
					.no-report-saved{
						background-color: #d53f00 !important;
						color: #FFFFFF;
						text-align: center;
						font-size: 13px;
						text-transform: uppercase;
						padding: 12px;
						margin: -7px;
					}
					@media only screen and (max-width: 1023px){
						width: 690px;
					}
				}
				@media only screen and (max-width: 767px){
					overflow: scroll;
					width: 100%;
				}
			}
			.dash-indi-area-outer{
				margin: 0 -15px 0 0;
				.dash-indi-area{
					width: 237px;
					float: left;
					margin: 0 7px 8px 0;
					cursor: pointer;
						&.positive{
							background-color : #8ebf49;
							border-top: 1px solid #8ebf49;
							border-left: 1px solid #8ebf49;
							border-right: 1px solid #8ebf49;
							border-bottom: 3px solid #8ebf49;
						}
						&.negative{
							background-color : #d34000;
							color: #fff;
							border-top: 1px solid #d34000;
							border-right: 1px solid #d34000;
							border-left: 1px solid #d34000;
							border-bottom: 3px solid #d34000;
						}
						&.flat{
							background-color : #f2cd13;
							border-top: 1px solid #f2cd13;
							border-right: 1px solid #f2cd13;
							border-left: 1px solid #f2cd13;
							border-bottom: 3px solid #f2cd13;
						}
					.head-top{
						font-size: 14px;
						text-transform: uppercase;
						height: 45px;
							.name-left{
								width: 175px;
								line-height: 12px;
								float: left;
								padding: 15px 7px;
								height: 45px;
										&.double-line-set{
											line-height: 13px;
											padding: 9px 7px;
										}
										&.triple-line-set{
											line-height: 13px;
											padding: 3px 7px;
											font-size: 12px;
										}
										@media only screen and (max-width: 1023px){
											width: 270px;
										}
										@media only screen and (max-width: 767px){
											width: 300px;
										}
										@media only screen and (max-width: 410px){
											width: 200px;
										}
							}
							.fa-dashboard{
								&.icon-click{
									font-size: 20px;
								}
							}
							.icon-click{
								float: right;
								background: #666666;
								color: #fff;
								padding: 11px 0;
								height: 45px;
								width: 29px;
								font-size: 21px;
								text-align: center;
								cursor: pointer;
									&.margin{
										margin-right: 1px;
									}
									&:hover{
										background: $main-blue;
									}
							}
					}
					.body-area{
						.indi-recent-trend{
							background-color: #f4f4f4;
							padding: 0px 7px;
							font-size: 12px;
							font-weight: bold;
							color: #666;
							text-transform: uppercase;
								&.mb-1{
									margin-bottom: 1px;
								}
								.naming{
									float: left;
									line-height: 39px;
									font-weight: bold;
								}
								.digits{
									float: right;
									font-size: 30px;
									color: #000;
									font-weight: bold;
									letter-spacing: -2px;
								}
								.pnf{
									float: right;
									color: #000;
									font-weight: normal;
									font-size: 11px;
									font-weight: bold;
									text-align: center;
									margin: 3px 0;
									text-transform: capitalize;
										&.margin-set{
											margin: 3px 7px;
										}
										span{
											font-size:15px;
											color: #000;											
										}
										.fa{
											color: #666666;
											font-size: 15px;
												&.fa-circle{
													font-size: 10px;
												}
										}
								}
						}
					}
					@media only screen and (max-width: 1023px){
						margin: 0 15px 18px 0;
						width: 337px;
					}
					@media only screen and (max-width: 767px){
						margin: 0 15px 18px 0;
						width: 97.5%;
					}
				}
			}
			.panel-expand{
				margin: 0;
					a{
						font-size: 11px;
						text-decoration: underline;
						text-transform: uppercase;
						color: #666;
							&:hover{
								color: $main-blue;
							}
					}
			}
		}
		.report-summary{
			margin: 0px;
			position: relative;
				.grey-heading{				
					font-size: 30px;
					color: #666666;
					display: inline-block;
					text-transform: uppercase;
					float: left;
						&.mb10{
							margin-bottom: 10px;
						}
						.report-icon{
							background-image: url("../img/summary-sprite.svg");
							background-position: -269px 0px;
							width: 33px;
							height: 33px;
							float: left;
						}
						@media only screen and (max-width: 410px){
							font-size: 23px;
							letter-spacing: -1px;
							line-height: 38px;
						}
				}
				.no-report{
					background-color: #d53f00;
					color: #FFFFFF;
					text-align: center;
					font-size: 13px;
					text-transform: uppercase;
					padding: 12px;
					margin: -7px;
				}
				.list-grid{
					float: right;
					margin: 4px 0;
						.fa{
							background: #666666;
							color: #fff;
							padding: 8px 0;
							height: 30px;
							width: 21px;
							font-size: 14px;
							text-align: center;
								&:hover{
									background-color: $main-blue;
								}
								&.active{
									background-color: $main-blue;
								}
						}
				}
				.grid{
					margin: 0 -15px 0 0;
					height: 172px;
					.report-area{
						float: left;
						width: 313px;
						margin: 0 15px 8px 0;
						background-color: $main-blue;
						border-bottom: 3px solid $main-blue;
						border-top: 1px solid $main-blue;
						border-left: 1px solid $main-blue;
						border-right: 1px solid $main-blue;
						position: relative;
						cursor: pointer;
							.top-head{
								height: 45px;
									.icon-left{
										width: 43px;
										height: 43px;
										float: left;
										background-image: url("../img/summary-sprite.svg");
											&.doc{
												background-position: -3px -42px;
											}
											&.ppt{
												background-position: -52px -42px;
											}
											&.xls{
												background-position: -106px -42px;
											}
									}
									.icon-click {
										float: right;
										background: #666666;
										color: #fff;
										padding: 11px 0;
										height: 45px;
										width: 29px;
										font-size: 21px;
										text-align: center;
											&.margin {
												margin-right: 1px;
											}
											&:hover{
												background-color: $main-blue;
											}
									}
							}
							.body-bottom{
								cursor: pointer;
								.body-section{
									background-color: #f4f4f4;
									padding: 7px;
										&.pn{
											padding: 0px 7px;
										}
										.file-names{
											color: #000;
											font-size: 20px;
											text-transform: uppercase;
											line-height: 20px;
											min-height: 61px;
												a{
													color: #000;
												}
										}
										&.mb-1{
											margin-bottom: 1px;
										}
										.user-email{
											float: left;
											margin: 5px 0 0;
												span{
													width: 29px;
													height: 29px;
													background-image: url("../img/summary-sprite.svg");
													display: inline-block;
													cursor: pointer;
														&.user{
															background-position: -1px -100px;
														}
														&.system{
															background-position: -39px -100px;
														}
														&.email{
															background-position: -76px -100px;
																&.active{
																	background-position: -115px -100px;
																}
														}
												}
										}
										.ilu {
											float: right;
											color: #000;
											font-weight: normal;
											font-size: 11px;
											font-weight: bold;
											text-align: center;
											margin: 3px 0;
											text-transform: capitalize;
												&.margin-set{
													margin: 3px 10px;
												}
												span{
													font-size:15px;
													color: #000;
												}
										}
								}
							}
							@media only screen and (max-width: 1023px){
								margin: 0 15px 18px 0;
								width: 337px;
							}
							@media only screen and (max-width: 767px){
								margin: 0 15px 18px 0;
								width: 96%;
							}
					}
				}
				.war-succ-area{
					position: absolute;
					width: 313px;					
					padding: 10px;
					font-size: 16px;
					height: 165px;
					color: #000;
					top: -1px;
					left: -1px;
						&.warning{
							background-color: #f2cd13;
							z-index: 1;
						}
						&.success{
							background-color: #8ebf49;
							color: #fff;
							z-index: 2;
						}
						.cross{
							float: right;
							i{
								background: #fff;
								border-radius: 50%;
								color: #000;
								padding: 4px 6px;
								height: 24px;
								width: 24px;
								color: #ababab;
								font-size: 15px;
									&:hover{
										color: #000;
									}
							}
						}
						p{
							line-height: 22px;
								span{
									font-weight: bold;
									text-transform: uppercase;
								}
						}
						.btn{
							font-size: 14px;
							color: #FFFFFF;
							border: none;
							width: 100%;
							text-transform: uppercase;
							height: 42px;
							cursor: pointer;
							position: relative;
							margin-top: 10px;
								&.delete-btn{
									background: #d34000;
									transition: 0.3s ease 0s;
									-moz-transition: 0.3s ease 0s;
									-webkit-transition: 0.3s ease 0s;
									&:hover{
									  background: #bb3a02;
									}
								}
							}
						@media only screen and (max-width: 1023px){
							width: 337px;
						}
				}
				.panel-expand{
					margin: 0px 5px 0 5px;
					float: left;
						a{
							font-size: 11px;
							text-decoration: underline;
							text-transform: uppercase;
							color: #666;
								&:hover{
									color: $main-blue;
								}
						}
				}
				.hints-area{
					float: right;
					margin: 0px 0px 0 5px;
					font-size: 11px;
					font-style: italic;
						span{
							float: left;
								&.margin{
									margin: 2px 15px 0 2px;
										@media only screen and (max-width: 767px){
											margin: 2px 4px 0 2px;
										}
								}
								&.m-zero{
									margin: 2px 0 0 2px;
								}
								&:nth-of-type(4){
									@media only screen and (max-width: 410px){
										width: 130px;
										height: 25px;
									}									
								}
						}
						.icons{
							background-image: url("../img/summary-sprite.svg");
							height: 20px;
							width: 20px;
								&.xls{
									background-position: -112px -140px;
								}
								&.ppt{
									background-position: -86px -140px;
								}
								&.doc{
									background-position: -58px -140px;
								}
								&.user{
									background-position: -1px -140px;
								}
								&.system{
									background-position: -29px -140px;
								}
						}
				}
				.list{
					margin: 0 -15px 15px 0;
					.report-list-head{
						background-color : $main-blue;
						padding: 4px 0px;
						width: 970px;
						font-size: 12px;
						color: #fff;
						text-transform: uppercase;
							.title-head{
								float: left;
								width: 476px;
								padding-left: 7px;
								cursor: pointer;
									@media only screen and (max-width: 1023px){
										width: 204px;
									}
									&.down{										
										padding-right: 14px;
										background-repeat: no-repeat;
										background-image: url(../img/icon-sort-desc-b.png);
										background-position: 45px 0;
											@-moz-document url-prefix() {
												background-position: 45px center;
											}
									}
									&.up{
										padding-right: 14px;
										background-repeat: no-repeat;
										background-image: url(../img/icon-sort-asc-b.png);
										background-position: 45px 0px;
											@-moz-document url-prefix() {
												background-position: 45px center;
											}
									}
							}
							.down{
								cursor: pointer;
								padding-right: 14px;
								background-repeat: no-repeat;
								background-image: url(../img/icon-sort-desc-b.png);
								background-position: right 0;
									@-moz-document url-prefix() {
										background-position: right center;
									}
							}
							.up{
								cursor: pointer;
								padding-right: 14px;
								background-repeat: no-repeat;
								background-image: url(../img/icon-sort-asc-b.png);
								background-position: right 0px;
									@-moz-document url-prefix() {
										background-position: right center;
									}
							}
							.fta-head{
								float: left;
								width: 60px;
								text-align: center;
							}
							.summ-head{
								float: left;
								width: 240px;
								text-align: center;
							}
							.action-head{
								float: right;
								width: 60px;
								text-align: center;
							}
							@media only screen and (max-width: 1023px){
								width: 690px;
							}
					}
					.report-list-body{
						background-color: #f4f4f4;
						margin-bottom: 1px;
						padding: 7px;
						width: 970px;
						position: relative;
						cursor: pointer;
							&:nth-child(2n) {
								background-color: #ddd;
							}
							&:hover{
								background-color: #b2e0ff;
							}
							.title-body{
								float: left;
								width: 470px;
								max-width: 470px;
								font-size: 20px;
								color: #000;
								text-transform: uppercase;
								line-height: 33px;
								text-transform: uppercase;
								text-overflow: ellipsis;
								white-space: nowrap;
								overflow: hidden;
									@media only screen and (max-width: 1023px){
										width: 195px;
										max-width: 195px;
										font-size: 14px;
										text-transform: uppercase;
									}
									&.char72{
										font-size: 18px;
										line-height: 17.5px
									}
									&.after72{
										line-height: 17.5px;
										font-size: 18px;
									}
							}
							.fta-body{
								float: left;
								width: 60px;
								text-align: center;
								margin: 2px 0 0 0;
									span{
										width: 29px;
										height: 29px;
										background-image: url("../img/summary-sprite.svg");
										display: block;
										margin: 0 auto;
											&.doc{
												background-position: -152px -100px;
											}
											&.ppt{
												background-position: -192px -100px;
											}
											&.xls{
												background-position: -227px -100px;
											}
											&.user{
												background-position: -1px -100px;
											}
											&.system{
												background-position: -39px -100px;
											}
											&.alert{
												background-position: -76px -100px;
													&.active{
														background-position: -115px -100px;
													}
											}
									}
							}
							.summ-body{
								float: left;
								width: 240px;
								text-align: center;
									.three-sec{
										width: 80px;
										float: left;
										font-size: 11px;
										font-weight: bold;
											span{
												font-size: 15px;
												color: #000;											
											}
									}
							}
							.action-body{
								float: right;
								width: 60px;
								margin: -7px -7px;
									.icon-action {
										float: right;
										background: #666666;
										color: #fff;
										padding: 12px 0;
										height: 48px;
										width: 29px;
										font-size: 21px;
										text-align: center;
											&.margin {
												margin-right: 1px;
											}
											&:hover{
												background-color: $main-blue;
											}
									}
							}
						.list-war-succ{
							width: 970px;
							font-size: 16px;
							color: #000;
							bottom: 0px;
							padding: 7px;
							position: absolute;
							top: 0px;
							left: 0px;
								span{
									font-weight: bold;
									text-transform: uppercase;
								}
								.warning-text{
									float: left;
									line-height: 35px;
									margin-right: 40px;
										@media only screen and (max-width: 1023px){
											font-size: 11px;
										}
								}
								.btn{
									font-size: 14px;
									color: #FFFFFF;
									border: none;
									width: 200px;
									text-transform: uppercase;
									height: 33px;
									cursor: pointer;
									float: left;
									position: relative;
										&.delete-btn{
											background: #d34000;
											transition:0.3s ease 0s;
											-moz-transition: 0.3s ease 0s;
											-webkit-transition: 0.3s ease 0s;
											&:hover{
											  background: #bb3a02;
											}
										}
										@media only screen and (max-width: 1023px){
											font-size: 12px;
											width: 120px;
										}
								}
								.cross{
									position: absolute;
									top: 12px;
									right:10px;
									z-index: 20;
										i {
											background: #fff;
											border-radius: 50%;
											color: #000;
											padding: 4px 6px;
											height: 24px;
											width: 24px;
											color: #ababab;
											font-size: 15px;
												&:hover{
													color: #000;
												}
										}
								}
								&.warning{
									background-color: #f2cd13;
									z-index: 1;
								}
								&.success{
									background-color: #8ebf49;
									color: #fff;
									z-index: 2;
								}
								@media only screen and (max-width: 1023px){
									width: 690px;
								}
						}
						.no-report-saved{
							background-color: #d53f00 !important;
							color: #FFFFFF;
							text-align: center;
							font-size: 13px;
							text-transform: uppercase;
							padding: 12px;
							margin: -7px;
						}
						@media only screen and (max-width: 1023px){
							width: 690px;
						}
					}
					@media only screen and (max-width: 767px){
						overflow: scroll;
						width: 100%;
					}
				}
		}
		@media only screen and (max-width: 1023px){
			width: 720px;
		}
		@media only screen and (max-width: 767px){
			width: 400px;
		}
		@media only screen and (max-width: 410px){
			width: 310px;
		}
}