// Indicator information popup
#custom-report{}
	.custom-report{
		width: 1170px;
			.white-bar{
				position: relative;
			}
			.note{
				margin: 5px 0 10px;
			}
			.trail-month{
				margin: 0 0 10px;
					input[type="checkbox"]{
						position: relative;
						top: 2px;
					}
			}
			.temp-sec-main {
				.template-selection{
					margin: 20px 0 10px;
						ul{
							li{
								float: left;
								width: 23%;
								list-style: none;
								margin-right: 1%;
								padding: 1%;
								position: relative;
									.selected{
										position: absolute;
										font-size: 38px;
										color: #1cb91c;
										left: 20px;
										top: 17px;
										display: none;
									}
									.view-purpose{
										position: absolute;
										font-size: 18px;
										right: 20px;
										top: 21px;
										background: #1c81c7;
										border-radius: 50px;
										text-align: center;
										width: 34px;
										height: 34px;
										color: #fff;
											&:hover{
												background-color: #2080c3;
											}
											.fa-eye{
												margin: 7px 8px;
											}
									}
									&:hover{
										background-color: #d4ead4;
										cursor: pointer;
									}
									&.active{
										background-color: #d4ead4;
										cursor: pointer;
											.selected{
												display: block;
											}
									}
									img{
										max-width: 100%;
									}
									h2{
										text-transform: uppercase;
										color: #acacac;
										font-size: 16px;
										font-weight: normal;
										margin: 15px 0 0;
									}
							}						
						}
				}
				.note{
					margin-bottom: 10px;
				}
			}
			.err-message-show{
				margin-bottom: 10px;
			}
			.template-title{
				&.custom{
					padding: 15px 0 0;
					text-transform: none;
					color: #acacac;
					font-size: 18px;
						span{
							font-weight: bold;
						}
				}
			}
			.body-title{
				&.custom{
					padding: 15px 0 10px;
					text-transform: none;
					color: #acacac;
					font-size: 24px;
				}
			}
		  .input-line{
			input[type="checkbox"]{
			  float: left;
			}
			.input-text{
			  float: left;
			  margin-left: 10px;
			}
		  }
		  .save-as{
			font-size: 11px;
			padding: 15px 22px;
			.save-as-text{
			  float: left;
			  margin-top: 8px;
			}
			input[type="text"]{
			  float: left;
			  margin-left: 15px;
			  font-size: 11px;
			  color: #666666;
			  padding: 6px 9px;
			  width: 215px;
			  font-style: italic;
			}
		  }
		  .spacer35{
			height: 35px;
		  }
		  .ce-left{
			width: 779px;
			float: left;
				&.full-width{
					width: 100%;
						.include-option{
							.filter-area{
								.filter-elements{
									width: 271px;
								}
							}
						}						
				}
				.data-cust{
					margin-bottom: 15px;
					.data-cust-table{
						thead{
							width:100%;
							float:left;
								tr{
									width:100%;
								}
								tr:nth-of-type(1){
									background:$main-blue;
									color:#FFF;
									text-transform: uppercase;
								}
								th{
									padding:3px;
									font-weight: normal;
										i{
											cursor: pointer;
											position: relative;
											top: -1px;
										}
									.info-white{
										background-image: url("../img/sprite.svg");
										background-repeat: no-repeat;
										background-position: -139px -22px;
										height: 16px;
										width: 17px;
										display: inline-block;
										top: 2px;
										position: relative;
									}
									&:nth-of-type(1){
										width:315px;
										text-align: left;
									}
									&:nth-of-type(2){
										text-align:left;
										width:96px;
									}
									&:nth-of-type(3){
										width:114px;
										text-align:right;
									}
									&:nth-of-type(4){
										width:110px;
										text-align:right;
											input[type="checkbox"]{
												position: relative;
												top: 2px;
											}
									}
									&:last-child{
										padding-right:20px;
										width:144px;
										text-align:right;
									}
								}
						}
						tbody{
							max-height: 200px;
							overflow-y: scroll;
							float: left;
							width: 100%;
								tr{
									width: 100%;
								}
							td{
								height: 25px;
								vertical-align: middle;
								padding: 0 3px;
								font-size:12px;
								color:#000;
								&:nth-of-type(1){
									background-color: rgba(216, 216, 216, 0.8);
								}
								&:nth-of-type(2){
									background-color: rgba(229, 229, 229, 0.6);
									  max-width: 145px;								
								}
								&:nth-of-type(3){
									overflow: hidden;
									text-align: left;
									text-overflow: ellipsis;
									white-space: nowrap;
									max-width:265px;
									width: 265px;
										@media only screen and (max-width:$standard-target-width){
											max-width:45px;
										}
								}
								&:nth-of-type(5), &:nth-of-type(7){
									text-align:right;
									width:125px;
								}
								&:nth-of-type(4){
									input[type="text"]{
										float:left;
									}
								}
								&:nth-of-type(6){
									text-align: right;
									width:74px;
									padding-right: 22px;
								}
								&.indi-icon-default{
									background-color: rgba(216, 216, 216, 0.8);
									background-image: url("../img/sprite.svg");
									background-repeat: no-repeat;
									text-align: center;
									width: 28px;
									background-position: -136px 2px;
								}
								&.indi-icon-yoy-per{
									background-color: rgba(216, 216, 216, 0.8);
									background-image: url("../img/sprite.svg");
									background-repeat: no-repeat;
									text-align: center;
									background-position: -164px 2px;
									width:28px;
								}
								&.indi-icon-yoy{
									background-color: rgba(216, 216, 216, 0.8);
									background-image: url("../img/sprite.svg");
									background-repeat: no-repeat;
									text-align: center;
									background-position: -191px 2px;
									width:28px;
								}
								&.indi-icon-mom-per{
									background-color: rgba(216, 216, 216, 0.8);
									background-image: url("../img/sprite.svg");
									background-repeat: no-repeat;
									text-align: center;
									background-position: -219px 2px;
									width:28px;
								}
								&.indi-icon-mom{
									background-color: rgba(216, 216, 216, 0.8);
									background-image: url("../img/sprite.svg");
									background-repeat: no-repeat;
									text-align: center;
									background-position: -246px 2px;
									width:28px;
								}
								&.icon-seasonal {
									width: 21px;
									text-align: center;
									img{
										width: 11px;
									}
								}
								select{
									width:85%;
									float:right;
									height:17px;
									font-size:11px;
										option{
											font-size: 12px;
											&:nth-of-type(even){
												background-color: #ddd;
											}
										}
								}
								input[type="text"]{
									width:85%;
									float:right;
									height:17px;
									font-size:11px;
									padding:0 3px;
								}
							}
							tr{
								&:hover{
									background-color: #B2E0FF;
								}
								&:nth-of-type(odd) {
									background-color: rgba(237, 237, 237, 0.6);
								}
								&:nth-of-type(even) {
									background-color: rgba(221, 221, 221, 0.6);
								}
							}
						}				
					}
				}
			  .include-option{
				margin: 0px 0 25px;
				.report-text{
				  margin: 8px 0;
				  font-size: 11px;
				}
				select{
					float: left;
					margin-left: 15px;
					font-size: 11px;
					color: #000;
					padding: 6px 9px;
					width: 175px;
					height:27px;
					line-height:27px;
						option{
							font-size: 12px;
							&:nth-of-type(even){
								background-color: #ddd;
							}
						}
				}
				.available-section{
					float: left;
					width: 43%;				
				}
				.center-arrows{
					float: left;
					width: 7%;
					margin-top: 75px;
					.right-side-arrow{
						background-image: url("../img/sprite.svg");
						width: 35px;
						height: 50px;
						background-position: -84px -1px;
						cursor: pointer;
						margin: 1px auto;
						&:hover{
							background-position: -84px -52px;
						}
					}
					.left-side-arrow{
						background-image: url("../img/sprite.svg");
						width: 35px;
						height: 50px;
						background-position: -41px -1px;
						cursor: pointer;
						margin: 1px auto;
						&:hover{
							background-position: -41px -52px;
						}
					}		
				}
				.include-section{
					float: left;
					width: 44%;
				}
				.right-arrows{
					width:5%;
					float:right;
					margin-top: 16px;
					.top-double-arrow{
						background-image: url("../img/sprite.svg");
						width: 35px;
						height: 50px;
						background-position:-81px -105px;
						cursor: pointer;
						margin: 1px auto;
						&:hover{
							background-position: -81px -156px;
						}
					}
					.top-single-arrow{
						background-image: url("../img/sprite.svg");
						width: 35px;
						height: 50px;
						background-position:0px -105px;
						cursor: pointer;
						margin: 1px auto;
						&:hover{
							background-position: 0px -156px;
						}
					}
					.bottom-single-arrow{
						background-image: url("../img/sprite.svg");
						width: 35px;
						height: 50px;
						background-position:-41px -105px;
						cursor: pointer;
						margin: 1px auto;
						&:hover{
							background-position: -41px -156px;
						}
					}
					.bottom-double-arrow{
						background-image: url("../img/sprite.svg");
						width: 35px;
						height: 50px;
						background-position:-122px -105px;
						cursor: pointer;
						margin: 1px auto;
						&:hover{
							background-position: -122px -156px;
						}
					}
				}			
				.filter-area{
					background: #efefef;
					padding:10px;
					margin-bottom:15px;
						.filter-heading{
							color: #000;
							font-size:13px;
							text-transform: uppercase;
							margin-bottom:15px;
						}
						.fa-filter{
							font-size:14px;
						}
						.filter-elements{
							float:left;
							width:194px;
							margin-right:15px;
							.for-search{
								position: relative;
								.search-icon{
									background-color: #2881c1;
									background-image: url("../img/sprite.svg");
									background-position: -137px -63px;
									cursor:pointer;
									height: 27px;
									position: absolute;
									right: 0;
									top: 6px;
									width: 20px;
								}
								@-moz-document url-prefix() {
										.search-icon{
											height: 26px;
										}
									}
									@media screen and (-webkit-min-device-pixel-ratio:0) {
									 .search-icon{
											height: 25px;
										}
								}

							}
							input[type="text"]{
								font-size: 11px;
								color: #000;
								padding: 6px 9px;
								width:100%;
								font-size:11px;
								color:#666666;
								font-style: italic;
								margin:5px 0;
							}
							select{
								font-size: 11px;
								color: #000;
								padding: 6px 9px;
								width:100%;
								float:none;
								margin:5px 0;
								height:27px;
								line-height:27px;
									option{
										font-size: 12px;
										&:nth-of-type(even){
											background-color: #ddd;
										}
									}
							}
							.btn{
								width: 100%;
								margin: 18px 0 0;
								height: 28px;
							}
							@media only screen and (max-width:$standard-target-width){
								width:150px;
							}
							&:nth-of-type(5){
								margin-right: 0px;
								width: 130px;
								float: right;
							}
						}
						
				}
				.select-all-set{
					margin: 10px 0;
					input[type="checkbox"]{
						float: left;
					}
					.select-all-text{
						float: left;
						font-size: 11px;
						color: #000;
						margin: 0 5px;							
					}
				}
				.select-all-set-feature{
					margin: 10px 0;
					input[type="checkbox"]{
						float: left;
					}
					.select-all-text{
						float: left;
						font-size: 11px;
						color: #000;
						margin: 0 5px;
							&:nth-of-type(1){
								margin-right: 95px;
							}
					}
				}
			  }
		  }
		  
		  .ce-right{
			width: 350px;
			float: right;
				.info-pop{
					background-color: #888888;
					padding: 10px;
					font-size: 12px;
					color: $white;
					position: relative;
					.icon-size{
						font-size: 20px;
					}
					.info-pop-cross{
						position: absolute;
						right: 6px;
						top: 1px;
						color: #fff;
						font-size: 25px;
						&:hover{
							color: #ccc;
						}
					}
					h5{
						font-size: 13px;
						text-transform: uppercase;
						margin: 10px 0 3px;
					}
					p{
						font-size: 12px;
						line-height: 15px;
						margin-bottom: 20px;
					}
					ul {
						padding-left: 22px;
						li {
							margin-bottom:5px;
							list-style:disc;
							line-height: 16px;
						}
					}
				}
		  }
		  
		  .file-format{
			&.second{
				.ce-left{
					min-height: 119px;
				}
			}
			&.third{
				.ce-left{
					min-height: 119px;
				}
			}
			.ce-left{
				width: 50%;
				float: left;
					.report-option{
						margin: 0px 0 5px;
							.report-text{
							  margin: 5px 0;
							  font-size: 11px;
							}
							input[type="text"]{
								font-size: 11px;
								color: #000;
								padding: 6px 9px;
								width:96%;
								font-size:11px;
								color:#666666;
								font-style: italic;
								margin:5px 0;
							}
							select{
							  font-size: 11px;
							  color: #000;
							  padding: 6px 9px;
							  width: 90%;
							  height:29px;
							  line-height:27px;
								option{
									font-size: 12px;
									&:nth-of-type(even){
										background-color: #ddd;
									}
								}
							}
					} 
			}
			.ce-right{
				width: 50%;
				float: left;
			}
		  }
		  
		   
	}
@media screen and (max-width:$ipad){
	.custom-report{
		width:700px;
	}
}

.indicator-list-drag-feature{
	width: 100%;
		.head{
			background-color:#1c81c7;
			color: #FFF;
			text-transform: uppercase;
			padding:5px;
				.i-head{
					float: left;
					width: 195px;
				}
				.f-head{
					float: left;
					width: 45px;
				}
				.v-head{
					float: right;
					width: 65px;
				}
		}
		.indis-body{			
			border:1px solid #ddd;			
				ul{
					height: 230px;
					overflow-y: scroll;
						li{
							background-color:#f1f1f1;
							list-style:none;
								&.head{
									background-color:#A9AC55 !important;
									pointer-events:none;
										&:hover{
											background-color:#A9AC55;
										}
								}
								&.ui-selectee{
									cursor:pointer;																											
								}
								&.ui-selected{
									background-color:#2f96de !important;
									color:#fff;
								}
								&.ui-selecting{
									background-color:#2f96de !important;
									color:#fff;
								}
								&:nth-child(2n){
									background-color:#e0e0e0;
								}
								&:hover{
									background-color:#b2e0ff;
								}
								&.selected{
									background-color:#48adf1;
									color:#fff;
								}
								.icon-placeholder{
									background-image: url("../img/sprite.svg");
									background-repeat: no-repeat;
									background-color: rgba(216, 216, 216, 0.8);
									width: 24px;
									height:25px;
									float:left;
										@-moz-document url-prefix() {
											height:27px;
										}
										&.indi-icon-default{
											background-position: -135px 2px;
										}								
										&.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() {
									height:28px;
								}
								.icon-seasonal{
									width: 20px;
									text-align: center;
									background-color: rgba(229, 229, 229, 0.6);
									float:left;
									height:25px;
										@-moz-document url-prefix() {
											height:27px;
										}
										img{
											width:50%;
											margin-top:7px;
										}
								}
								.indis-name{
									width: 165px;
									max-width: 165px;
									overflow: hidden;
									text-align: left;
									float:left;
									text-overflow: ellipsis;
									white-space: nowrap;
									padding:6px 5px 5px;
										&.full-name{
											width: 275px;
											max-width: 275px;
										}
								}
								&.indis-name-single{
									max-width: 100%;
									overflow: hidden;
									text-align: left;
									text-overflow: ellipsis;
									white-space: nowrap;
									/*padding:6px 5px 5px;*/
										&.no-padding{
											padding: 0;
												.full-name{
													width: 100%;
													max-width: 100%;
												}
										}
										.indis-name{
											width: 208px;
											max-width: 208px;
										}
										.full-name{
											width: 100%;
											max-width: 100%;
										}
								}
								.feature-input{
									float: left;
									width: 45px;
									text-align: center;
										input[type="checkbox"]{
											margin-top: 7px;
										}
								}
								.value-select{
									float: right;
									width: 65px;
										select{
											float: none;
											margin: 0;
											width: 95%;
											height: 18px;
											line-height: 18px;
											font-size: 11px;
											padding: 0px 0;
											margin-top: 4px;
										}
								}
						}
				}
		}
}