.popup{

	background-color: var(--popup-bg-color);

	hr{
		background-color: var(--popup-hr-bg-color);
	}
}

.popup-top{

	color: var( --popup-top-text-color );
	background-color: var( --popup-top-bg-color );

	.circle-icon-button.menu-item-icon{
		color: inherit;
		background:none;
	}
}

.popup-message-title{
	color: var(--popup-msg-title-text-color);
}

.popup-message-main{
	color: var(--popup-msg-main-text-color);
}


.popup{

	z-index:+4;
	display:block;
	width:300px;
	text-align:initial;
	cursor:default;
	box-shadow: 0 16px 24px 2px rgba(#000, 0.14), 0 6px 30px 5px rgba(#000, 0.12), 0 8px 10px -5px rgba(#000, 0.4);

	hr{
		display:block;
		width:100%;
		height:1px;
		border:0;
		margin:0;
	}
}

.popup-top{

	padding:16px * 0.25 8px * 0.5;

	> * {

		position:relative;
		display:table;

		> * {
			display:table-cell;
			vertical-align:middle;
			min-width:44px;
		}
	}

	.circle-icon-button.menu-item-icon{
		background:none;
	}
}

.popup-main{
	overflow:hidden;
}
.popup-message{
	display:inline-block;
	width:100%;
}

.popup-message-title{
	display:block;
	font-size:16px;
	margin-bottom:16px;
	margin-top:24px;
	padding:0 24px;
	line-height:20px;
}

.popup-message-main{
	display:block;
	font-size:14px;
	margin-bottom:32px;
	margin-top:4px;
	padding:0 24px;
	line-height:21px;
}

.popup-message-bottom{
	display:inline-block;
	width:100%;
	float:left;
	margin-bottom:16px;
	margin-top:16px;
	padding:0 24px;
}

.popup-fullscreen{
	z-index:+4;
	position:fixed;
	display:table;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
	padding:24px 40px;

	// padding-top: calc( var(--header-height) + 12px );
	padding-top: calc( var(--header-height) + 24px );

	background:none;
	box-shadow: none;

	.popup-main{
		width:100%;
		height:100%;
		max-width:1840px;
		max-height:940px;
		margin:0 auto;
		display:table-cell;
		vertical-align: middle;

		text-align:center;

		.popup-fullscreen-overlay {
			position:absolute;
			top:0;
			left:0;
			right:0;
			bottom:0;
			background-color:#000;
			opacity: 0.6;
		}
	}
}