//Indicator List Drag Use Only

.pop-tabs-list{
	width: 100%;
		.head{
			background-color:#1c81c7;
			color: #FFF;
			text-transform: uppercase;
			padding:5px;
		}
		.tabs-body{			
			border:1px solid #ddd;			
				ul{
					height:230px;
					overflow-y:auto;
						li{
							background-color:#f1f1f1;
							list-style:none;
							overflow: hidden;
							text-align: left;
							text-overflow: ellipsis;
							white-space: nowrap;
							padding:6px 5px 5px;
								&.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;
								}
						}
				}
		}
}

.pop-tabs-list-present{
	width: 100%;
		.head{
			background-color:#1c81c7;
			color: #FFF;
			text-transform: uppercase;
			padding:5px;
		}
		.tabs-body-present{			
			border:1px solid #d3d3d3;
			border-top:none;			
				ul{
					height:230px;
					overflow-y:scroll;
						li{
							list-style:none;
							overflow: hidden;
							text-align: left;
							text-overflow: ellipsis;
							white-space: nowrap;
							padding:6px 5px 5px;
								&.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:#ededed;
								}
								&:hover{
									background-color:#b2e0ff;
								}
								&.selected{
									background-color:#48adf1;
									color:#fff;
								}
						}
				}
		}
}


.indicator-list-drag{
	width: 100%;
		.head{
			background-color:#1c81c7;
			color: #FFF;
			text-transform: uppercase;
			padding:5px;
		}
		.indis-body{			
			border:1px solid #ddd;			
				ul{
					height:230px;
					overflow-y:auto;
						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{
									max-width: 80%;
									overflow: hidden;
									text-align: left;
									float:left;
									text-overflow: ellipsis;
									white-space: nowrap;
									padding:6px 5px 5px;
								}
								&.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;
												.indis-name{
													max-width: 100%;
												}
										}
										.indis-name{
											max-width: 100%;
										}
								}
						}
				}
		}
}



.indicator-list-drag-present{
	width: 100%;
		.head{
			background-color:#1c81c7;
			color: #FFF;
			text-transform: uppercase;
			padding:5px;
				span{
					&.info-label-cnt{
						float: right;
						font-style: italic;
					}
					&.info-count{
						float: right;
						margin-left: 5px;
						text-align: right;
						
					}
				}
		}
		.indis-body{			
			border:1px solid #d3d3d3;
			border-top:none;			
				ul{
					height:230px;
					overflow-y:auto;
						li{
							list-style:none;
								&.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:#ededed;
								}
								&: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;
										&.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;
										}
								}								
								.icon-seasonal{
									width: 20px;
									text-align: center;
									background-color: rgba(229, 229, 229, 0.6);
									float:left;
									height:25px;
										img{
											width:50%;
											margin-top:7px;
										}
								}
								.indis-name{
									max-width: 80%;
									overflow: hidden;
									text-align: left;
									float:left;
									text-overflow: ellipsis;
									white-space: nowrap;
									padding:5px 5px 5px;
								}
								&.indis-name-single{
									max-width: 100%;
									overflow: hidden;
									text-align: left;
									text-overflow: ellipsis;
									white-space: nowrap;
									/*padding:6px 5px 5px;*/
								}
						}
				}
		}
		.indis-body-with-drag{			
			border:1px solid #d3d3d3;
			border-top:none;			
				ul{
					height:230px;
					overflow-y:auto;
						li{
							list-style:none;
								&.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:#ededed;
								}
								&:hover{
									background-color:#b2e0ff;
								}
								&.selected{
									background-color:#48adf1;
									color:#fff;
								}
								.icon-dragging{
									width: 15px;
									background-color: #aaaaaa;
									color: #fff;
									padding: 7px 3px 8px;
									font-size: 8px;
									float: left;
									border-right: 1px solid #ccc;
									display: inline-block;
									cursor: pointer;
									border-bottom: 1px solid #ccc;
								}
								.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;
										&.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;
										}
								}								
								.icon-seasonal{
									width: 20px;
									text-align: center;
									background-color: rgba(229, 229, 229, 0.6);
									float:left;
									height:25px;
										img{
											width:50%;
											margin-top:7px;
										}
								}
								.indis-name{
									max-width: 80%;
									overflow: hidden;
									text-align: left;
									float:left;
									text-overflow: ellipsis;
									white-space: nowrap;
									padding:5px 5px 5px;
								}
								&.indis-name-single{
									max-width: 100%;
									overflow: hidden;
									text-align: left;
									text-overflow: ellipsis;
									white-space: nowrap;
									padding:6px 5px 5px;
								}
						}
				}
		}
}