.popup{

	position: absolute;

	height: 100%;

	width: 100%;

	overflow: auto;

}



/*panel*/

.popup .desple{

    background: white;

    z-index:1005;

    position: fixed;

    transform: translate(-50%,-50%);

    left: 50%;

    top: 50%;

    padding: 1% 2%;

    box-sizing: border-box;   

    font-size: 1.4rem;

    opacity: 0;

    width: 81%;

	height: 86%;

    transition: opacity 0.5s;

}

    .popup .desple.active {

      opacity: 1;

      transition: opacity 0.8s;

      color: #6a6a6a;

      text-align: center;

    }

    .popup .desple.active.scrollable{

    	opacity: 1;

		color: #6a6a6a;

		text-align: center;

		position: relative;

		transform: none;

		margin: 61px auto;

		height: auto;

		top: 0;

		left: 0;

		border-radius: 4px;

    }

    	.popup .desple.active.scrollable header{

			height: 67px;

		}

    .popup .desple h3 {

        text-align: center;

        margin-bottom: 20px;

    }

    .popup .desple p {

        margin: 0 0 25px;

        text-align: left;

    }



/*Business*/

.popup .business.hidding{

    transform: none;

    -webkit-transform: none;

}

/*header*/

.popup .desple header{

	text-align: left;

	margin-bottom: 0;

	border-bottom: 1px solid #e8e8e8;

	position: relative;

	height: 9%;

	padding-bottom: 7px;

	padding-left: 10px;

	display: flex;

	flex-direction: column;

	justify-content: center;

}

	.popup .desple header h3{

		text-align: left;

	    margin: 0;

	    font-size: 2.2rem;

	    color: #6a6a6a;

	}

	.popup .desple header .extraHead{

		display: flex;

		flex-direction: row;

		justify-content: flex-start;

		height: auto;

	}



	.popup .desple header .ico{

		float: left;

		width: 31px;

		height: 17px;

		margin-right: 9px;

		background-size: auto 24px;

	}

	.popup .desple header label{

		height: auto;

		text-align: left;

		font-size: 1.2rem !important;

		display: inline;

		padding-right: 20px;

		border-right: 1px solid #e8e8e8;

		margin: 0;

		margin-right: 25px;

	}

		.popup .desple header label span{

			font-weight: normal;

		}





/*content*/

.popup .desple > .content{

	height: 92%;

	width: 100%;

	display: flex;

	flex-direction: column;

	justify-content: center;

	text-align: center;

}

	.popup .desple > .content .contWrap{

		width: 100%;

	}





/*cancel*/

.popup .desple > .content + .cancelPop {

	position: absolute;

	top: -9px;

	right: -11px;

	height: 40px;

	width: 40px;

	background: #2a2a28;

	border-radius: 100px;

	cursor: pointer;

	z-index: 1008;

}

	.popup .desple > .content + .cancelPop .ico{

		background-size: auto 25px;

	}







/*RESPONSIVE*/



@media screen and (min-width: 769px) and (max-width: 1200px){

	.popup .desple.active.scrollable header{

		height: auto;

	}

	.popup .desple header h3{

		height: auto;

	}

	.popup .desple.active.scrollable header label{

		height: 34px;

		display: flex;

		flex-direction: column;

		justify-content: center;

		margin-top: 8px;

	}

}

@media screen and (max-width: 768px){



	.popup .desple header h3{

		height: 40px;

	}

	.popup .desple.active.scrollable{

		width: 93%;

		max-height: unset;

	}



	.popup .desple.active.scrollable header{

		padding-top: 7px;

	}

		.popup .desple.active.scrollable .extraHead{

			text-align: left;

		}



	.popup .desple > .content + .cancelPop{

		right: -5px;

	}

}