// For Center area tab only

.dashboard-area{
  margin: 0 40px 40px;
  background-color: $white;
  box-shadow: 0 0 10px #292929;
  .dashboard-tabs{
	margin: 0;
    border-bottom: 1px solid #999999;
	height:50px;
		#main-tabs {
			position: relative;
			width: calc(100% - 35px);
			 overflow:hidden;
			 height:50px;
			.ui-slider-tabs-list-wrapper{ 
				position: relative;
				font-family:Arial,sans-serif;
				margin:0 0 0px 0;
				z-index:2; 
				height:49px; 
				overflow:hidden;
				
				.ui-slider-tabs-list-container{
					overflow: hidden; height:50px; position: relative; margin:0px 0px !important;
					.ui-slider-tabs-list{
						margin:0 0 0 0;list-style: none;
					}
					.ui-slider-left-arrow{
						left:0;top:0; position: absolute;
						div{ background-image: url("../img/sprite.svg");
							background-position: -41px -1px;
							cursor: pointer;
							float: left;
							height: 50px;
							width: 35px;
							&:hover{
								background-position: -41px -52px;
							}
						}
					}
					.ui-slider-right-arrow{
						top:0;right:0px; position: absolute;
						div{ background-image: url("../img/sprite.svg");
							background-position: -82px -1px;
							cursor: pointer;
							float: right;
							height: 50px;
							width: 35px;
							&:hover{
								background-position: -82px -52px;
							}
						}											
					}
				}
			}
			.tab-buttons{
				font-size: 20px;
				background-color: #2080c3;
				color: #fff;
				line-height: 50px;
				text-align: center;
				padding: 0px 7px;
				width: 35px;
				margin-left:1px;
				float:right;
					&:hover{
						background-color:#1a79b8;
						cursor:pointer;
					}
			}
		}		
    .tab-menu-icon{
      float: left;
      position: relative;
      background-image: url("../img/sprite.svg");
      width: 35px;
      height: 50px;
      background-position: 0 -1px;
      cursor: pointer;
      &:hover{
        background-position: 0 -52px;
      }
      .tab-dashboard-menu{
        display: none;
        position: absolute;
        top:49px;
        left: 0;
        z-index: 3;
        width: 290px;
        padding: 0 0 10px;
        font-size: 12px;
        font-weight: normal;
        color: $white;
        background-color: rgba(102, 102, 102, 0.95);
        ul{
          margin: 5px 0 0 0;
          padding: 0;
          line-height: 20px;
          li{
            list-style: none;
            text-transform: capitalize;
            a{
              color: $white;
              display: block;
              padding-left: 14px;
			  padding-right: 14px;
              &:hover{
                background-color: rgb(31, 128, 195);
              }
            }
			&.active{
				border-bottom: 4px solid #8ebf49;
				color: #1c81c7;
				text-transform: uppercase;
			}
          }
        }
        .tab-menu-heading{
          font-size: 12px;
          font-weight: bold;
          text-transform: uppercase;
          padding: 10px 0 0 10px;
        }
      }      
    }
	.tab-sort-icon{
		float: left;
		background-color: $main-blue;
		color: #fff;
		padding: 12px 0;
		font-size: 21px;
		width: 35px;
		text-align: center;
		height: 50px;
		margin-right: 1px;
			&:hover{
				background-color: #1b78b9;
				cursor: pointer;
			}
	}
    .tab-arrow-back{
      float: left;
      background-image: url("../img/sprite.svg");
      width: 35px;
      height: 50px;
      background-position: -41px -1px;
      cursor: pointer;
      &:hover{
        background-position: -41px -52px;
      }
    }
    .tab-menu{
      margin: 0;
      padding:0;
      float: left;
      ul{
        margin: 0;
        padding:0 0 0 0px;
        li{
          margin: 0;
          padding:0;
          list-style: none;
          float: left;
		  width:174px;
          text-align: center;
          line-height: 12px;
		  color: #aaaaaa;
		  height:50px !important;		  
		  text-transform: capitalize;
		  position:relative;
			&:nth-child(1){
				margin-left:34px;
			}
			.tab-remove{
				position: absolute;
				right: 0px;
				font-size: 17px;
				top: 3px;
				color: red;
				cursor:pointer;
				background:none;
				border:0;
					i{
						display:block;
					}
					input[type="checkbox"]{
						float:right;
					}
			}			
		  &.active{
				border-bottom: 4px solid #8ebf49;
                color: $main-blue;
                text-transform: uppercase;				
				a{
					color: $main-blue;
					width:165px;
				}
			}
          a{          
			display: block;
			font-size: 12px;
			font-weight: bold;
			margin: 12px auto 0;
			padding: 0;
			width: 145px;
			color: #aaaaaa;
			&:hover{
				color: $main-blue;
			}            
          }
		  input[type="text"]{
			margin-top: 12px;
			padding: 2px;
			font-size: 11px;
			text-transform: uppercase;
			text-align: center;
			border:1px solid #ff0000;
		  }
		  button {
			width:25px;
			height:46px;
			background-size:100% 100%;
			position: absolute;
			right: 0;
			top: 0;
			background:#aaaaaa;
			color:#fff;
			right:26px;			
			transition: 0.3s ease 0s;
			-moz-transition: 0.3s ease 0s;
			-webkit-transition: 0.3s ease 0s;
				&:hover{
					background:#949393;
				}
				&.dragger {			
					right: 26px;
				}
				&.remove {
					right: 0;
				}
		  }
        }
		&.ui-sortable {
			li {
				width: 236px;
				padding-right:52px;
			}
		}
      }
    }
	.tab-menu-scroll{
      margin: 0;
      padding:0;
      float: left;
		&.width-set{
			width: calc(100% - 71px) !important;
		}
      ul{
        margin: 0;
        padding:0 0 0 0px;
			&.tab-edit-mode{
				li{
					&:first-child{
						&.active{
							left: 2px important;
						}
					}
					&.active{
						-webkit-box-shadow: inset 0px 0px 0px 0px #ff0000;
						-moz-box-shadow: inset 0px 0px 0px 0px #ff0000;
						box-shadow: inset 0px 0 0px 0px #ff0000;
						border-bottom: 2px solid #ff0000;
						top: 0px !important;
							button{
								-webkit-box-shadow: inset 0px -4px 0px 0px #ff0000;
								-moz-box-shadow: inset 0px -4px 0px 0px #ff0000;
								box-shadow: inset 0px -4px 0px 0px #ff0000;
								background: #ff0000;
									&:hover{
										background: #1c81c7;
									}
									.fa-times{
										position: relative;
										top: -2px;
									}
							}
							&.scroll_tab_first{
								left:2px !important;
							}
					}
				}
			}
			.scroll_tab_left_button{
				display:block !important;
			}
			.scroll_tab_right_button{
				display:block !important; 
			}
			.scroll_tab_left_button{
				background-image: url("../img/sprite.svg");
				background-position: -41px -1px;
				cursor: pointer;
				height: 50px;
				width: 35px !important;
				z-index:2;
				border-radius: 0;
				background-color: #fff;
				border: 0;
					&::before{
						content: no-close-quote;
					}
			}
			.scroll_tab_left_button_disabled{
				background-image: url("../img/sprite.svg");
				background-position: -41px -1px;
				cursor: pointer;
				height: 50px;
				width: 35px !important;
				z-index:2;
				border-radius: 0;
				background-color: #fff;
				border: 0;
				display: block !important;
				cursor: not-allowed !important;
					&::before{
						content: no-close-quote;
					}
			}
			.scroll_tab_right_button{
				background-image: url("../img/sprite.svg");
				background-position: -82px -1px;
				cursor: pointer;
				height: 50px;
				width: 35px !important;;
				z-index:2;
				border-radius: 0;
				background-color: #fff;
				border: 0;
					&::before{
						content: no-close-quote;
					}
			}
			.scroll_tab_right_button_disabled{
				background-image: url("../img/sprite.svg");
				background-position: -82px -1px;
				cursor: pointer;
				height: 50px;
				width: 35px !important;;
				z-index:2;
				border-radius: 0;
				background-color: #fff;
				border: 0;
				display: block !important;
				cursor: not-allowed !important;
					&::before{
						content: no-close-quote;
					}
			}
			.scroll_tab_inner{
				height:auto !important;
				left:33px !important;
					span{
						&.scroll_tab_left_finisher{
							display:none !important;
						}
						&.scroll_tab_right_finisher{
							display:none !important;
						}
					}
			}
			&.tab-edit-mode{
				.scroll_tab_left_button{
					display:block !important;
				}
				.scroll_tab_inner{
					li{
						padding-right: 25px;
							a{
								
							}
							&.ui-sortable-placeholder {
								width: 160px;
								display: inline-block;
								position: relative;
								margin-top: -21px;
								top: 21px;
							}
					}
				}
				.scroll_tab_right_button{
					display:block !important; 
				}
			}
        li{
         margin: 0;
		padding: 0;
		list-style: none;
		/*width: 174px;*/
		width:auto;
		text-align: center;		
		color: #aaaaaa;
		height: 49px !important;
		text-transform: capitalize;
		position: relative;
		background: #fff;
		border-left: 0;
		border-top: 0;
			&:nth-child(1){
				margin-left:34px;
			}
			.tab-remove{
				position: absolute;
				right: 0px;
				font-size: 17px;
				top: 3px;
				color: red;
				cursor:pointer;
				background:none;
				border:0;
					i{
						display:block;
					}
					input[type="checkbox"]{
						float:right;
					}
			}			
		  &.active{
				-webkit-box-shadow: inset 0px -4px 0px 0px rgba(142,191,73,1);
				-moz-box-shadow: inset 0px -4px 0px 0px rgba(142,191,73,1);
				box-shadow: inset 0px -4px 0px 0px rgba(142,191,73,1);
                color: $main-blue;
                text-transform: uppercase;
				margin: -2px 0 0 0;
				a{
					color: $main-blue;
					width:auto;
				}
				button {
					-webkit-box-shadow: inset 0px -4px 0px 0px rgba(142,191,73,1);
					-moz-box-shadow: inset 0px -4px 0px 0px rgba(142,191,73,1);
					box-shadow: inset 0px -4px 0px 0px rgba(142,191,73,1);
				}
			}
          a{          
			display: block;
			font-size: 12px;
			font-weight: bold;
			margin: 0 auto;
			padding: 0 20px;
			width: auto;
			color: #aaaaaa;
			line-height: 49px;
			cursor: pointer;
			&:hover{
				color: $main-blue;
			}            
          }
		  input[type="text"]{
			margin-top: 12px;
			padding: 2px;
			font-size: 11px;
			text-transform: uppercase;
			text-align: center;
			border:1px solid #ff0000;
		  }
		  button {
			width:25px;
			height:49px;
			background-size:100% 100%;
			position: absolute;
			right: 0;
			top: 0;
			background:#aaaaaa;
			color:#fff;
			right:26px;
			border: 0;
			cursor: pointer;
			transition: 0.3s ease 0s;
			-moz-transition: 0.3s ease 0s;
			-webkit-transition: 0.3s ease 0s;
				&:hover{
					background:#949393;
				}
				&.dragger {			
					right: 26px;
				}
				&.remove {
					right: 0;
				}
		  }
        }		
      }
    }
    .tab-arrow-fwd{
      float: right;
      background-image: url("../img/sprite.svg");
      width: 35px;
      height: 50px;
      background-position: -82px -1px;
      cursor: pointer;
      &:hover{
        background-position: -82px -52px;
      }
    }
  }
  @media only screen and (max-width: $standard-target-width){
	margin:0 10px 40px;
  }
}

.settings-popup{
	width:600px;
		.top-content_dash{
			width:100%;
				.create-dash{
					display: block;
					float: left;
					margin: 22px 15px 0;
					width: 160px;
						.create-tab {
							background: rgba(0, 0, 0, 0) url("../img/add-new-tab-sprite.png") no-repeat scroll left top;
							cursor: pointer;
							height: 98px;
							margin: 0 auto;
							width: 120px;
								&:hover{
									background: rgba(0, 0, 0, 0) url("../img/add-new-tab-sprite.png") no-repeat scroll left bottom;
								}
						}
						.manage-dash-text {
							cursor: pointer;
							line-height: 17px;
							margin-top: 10px;
							width: 100%;
							text-align:center;
						}
						.export-dta-icn {
							background: url("../img/report-export-icons.png") 0 -425px;
							width: 113px;
							height:98px;
							cursor: pointer;
							margin: 0 auto;
								&:hover{
									background: url("../img/report-export-icons.png") 0 -528px;
								}
						}
						.generate-presntation-icn {
							background: rgba(0, 0, 0, 0) url("../img/report-export-icons.png") repeat scroll 0 -208px;
							width: 96px;
							height:101px;
							margin: 0 auto;
							cursor: pointer;
								&:hover{
									background: rgba(0, 0, 0, 0) url("../img/report-export-icons.png") repeat scroll 0 -311px;
								}
						}
				}
		}
}