// popup look for all popup
.popup-area{
  .blue-bar{
    background-color: $main-blue;
    padding: 5px 10px;
    font-size: 12px;
    color: $black;
    height: 50px;
    .pop-title{
      color: $white;
      font-size: 16px;
      text-transform: uppercase;
	  line-height:40px;
	  .info-icon{
		background-image: url("../img/sprite.svg");
		width:40px;
		height:40px;
		background-position: -185px -64px;
		float:left;
		margin-right:7px;
	  }
	  .quick-icon{
		background-image: url("../img/sprite.svg");
		width:40px;
		height:40px;
		background-position: -227px -66px;
		float:left;
		margin-right:7px;
		transition: 0.3s ease 0s;
		-moz-transition: 0.3s ease 0s;
		-webkit-transition: 0.3s ease 0s;
	  }
	  .tips-icon{
		background-image: url("../img/sprite.svg");
		width:25px;
		height:40px;
		background-position: -216px -195px;
		float:left;
		margin-right:7px;
	  }
      img{
        width: 40px;
      }
    }
	.go-back{
		float: left;
		background-image: url("../img/sprite.svg");
		width: 35px;
		height: 50px;
		background-position: -41px -1px;
		cursor: pointer;
		margin-top: -5px;
		padding: 0px;
		margin-left: -10px;
		border-right: 1px solid #FFF;
		margin-right: 10px;
		&:hover{
			background-position: -41px -52px;
		}
	}
  }	
  .white-bar{
    background-color: $white;
    padding: 10px;
    color: $black;
    font-size: 12px;
	position:relative;
		&.pre-edit{
			.btn{
				&.gray-btn{
					width: 112px;
				}
			}
			#generate_presentation{
				margin: 0 15px;
			}
			.btn-margin{
				margin: 0;
			}
		}
		&.cre-edit{
			.btn{
				&.gray-btn{
					width: 112px;
				}
			}
			.btn-margin{
				margin: 0;
			}
		}
		.do-not{
			input[type="checkbox"]{
				float: left;
				margin: 0 5px 0 0;
			}
		}
		.body-title{
			font-size: 16px;
			color: $black;
			text-transform: uppercase;
			padding: 20px;
				&.p-set{
					padding: 10px 0 20px;
				}
				&.p-set15{
					padding: 10px 0 15px;
				}
				a{
					color: #aaaaaa;
					font-size: 18px;
				}
		}
		.mb30{
			margin-bottom:30px;
		}
		.mb15{
			margin-bottom:15px;
		}
    .btn{
      font-size: 14px;
      color: #FFFFFF;
      border: none;
      width: 215px;
      text-transform: uppercase;
      height: 42px;
      cursor: pointer;
	  position:relative;
	  font-family: Arial,Helvetica,sans-serif;
		&.fr{
			float: right;
		}
		&.fl{
			float: left;
		}
		&.btn-right-margin{
			margin-right: 15px;
		}
      &.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;
        }
		&.wizard-btn{
			width:140px;
			transition:0.3s ease 0s;
			-moz-transition:0.3s ease 0s;
			-webkit-transition:0.3s ease 0s;
				&:hover{
					background: #1b78b9;
				}
		}
		&.popular-import-btn{
			width:270px;
			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;
        }
		 &.wizard-btn{
			width:430px;
			transition:0.3s ease 0s;
			-moz-transition:0.3s ease 0s;
			-webkit-transition:0.3s ease 0s;
				&:hover{
					background: #949393;
				}
		  }
      }
	  .btn-loader{
		position:absolute;
		right:11px;
		top:11px;
		z-index:20;
	  }
    }
    .btn-margin{
      margin: 0 15px;
    }
	.ml10-fl{
		margin-left: 10px;
		float: left;
	}
	.btn-margin-left{
		margin: 0 0 0 15px;
	}
	p{
		line-height:20px;
		a {
			color:#1c81c7;
		}
		&.warning-text{
			background: #f7dfde;
			padding: 10px;
			font-style: italic;
			color: #ad4542;
			border: 1px solid #efcfd6;
			margin: 15px 0;
		}
	}
	&.twitter-set{
		min-height:410px;
	}
	
  }
}
@media screen and (max-width:$mobile-landscape){
	.popup-area{
		.white-bar{
			.btn{
				 font-size: 12px;
				 width: auto;
				 padding: 0 10px;
			}
		}
	}
}