.popup {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 24;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--duration);
}

.popup.popup-active {
	visibility: visible;
	opacity: 1;
}

.popup:not(.popup-active) {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}

.popup .overlay-popup {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	background-color: rgba(30, 37, 43, .7);
}

.popup>*:not(.overlay-popup) {
	z-index: 2;
	max-width: calc(100% - 32px);
}

.popup .content-popup {
	width: calc(100% - 32px);
	max-width: 770px;
	padding: 45px 40px;
	background-color: var(--white);
	border-radius: 10px;
	box-shadow: var(--shadow);
	transform: scale(.98);
	will-change: transform;
	transition: transform var(--duration);
}

.popup.popup-active .content-popup {
	transform: scale(1) translate(0);
}

.popup .action {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	margin-top: 26px;
}

.popup .action .button {
	background-color: #ffad05;
	font-size: 14px;
	padding: 12px 20px 14px;
	border-radius: 60px;
	color: var(--white);
}

.popup .action .button.action-cancel {
	background-color: rgba(0, 0, 0, 0);
	color: var(--black);
	padding-right: 0;
}

.popup .action .button.action-cancel:hover {
	color: #ff3f04;
}

.popup .close-popup {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 25px;
	right: 25px;
	width: 15px;
	height: 15px;
	background: url(../images/icon-close-gray.svg) center/contain no-repeat;
	font-size: 0;
}

.popup .close-popup:hover {
	background: url(../images/icon-close-blue.svg) center/contain no-repeat;
}

.popup .checking:after {
	content: '';
	display: block;
	min-width: 60px;
	min-height: 60px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='267px' height='267px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'><circle cx='50' cy='50' r='32' stroke-width='8' stroke='%23ffad05' stroke-dasharray='50.26548245743669 50.26548245743669' fill='none' stroke-linecap='round'>  <animateTransform attributeName='transform' type='rotate' repeatCount='indefinite' dur='1s' keyTimes='0;1' values='0 50 50;360 50 50'></animateTransform></circle></svg>") center/contain no-repeat;
}


@media all and (max-width: 600px) {
	.popup .content-popup {
		max-height: calc(100vh - 90px);
		padding: 40px 20px 20px;
		transform: translateY(10%);
		overflow: hidden auto;
	}
}