.modal-backdrop {
  --modal-padding: 24px;
	position: fixed;
	top: 1px;
	bottom: 1px;
	left: 1px;
	right: 1px;
	display: flex;
	background: var(--background-color-transparent06);
	z-index: 10000;
	justify-content: center;
	align-items: center;

	.modal-container {
		height: auto;
		background: var(--background-color);
		border: 1px solid var(--accent-color);
		position: relative;

		&:before, &:after {
			position: absolute;
			display: block;
			content: "";
			border: 1px solid var(--accent-color);
			pointer-events: none;
		}

		&:before {
			top: -5px;
			width: calc(100% - 8px);
			height: calc(100% + 8px);
			left: 3px;
		}

		&:after {
			left: -5px;
			width: calc(100% + 8px);
			height: calc(100% - 8px);
			top: 3px;
		}

		.modal-close {
			width: 36px;
			height: 36px;
			display: block;
			position: absolute;
			border-radius: 50%;
			background: var(--background-color);
			border: 1px solid var(--accent-color);
			right: -21px;
			top: -21px;
			z-index: 1100;

			&::before, &::after {
				display: block;
				position: absolute;
				content: "";
				border: 1px solid var(--accent-color);
				z-index: 1099;
			}

			&::before {
				height: 11px;
				width: 22px;
				top: 11px;
				right: 16px;
			}

			&::after {
				height: 22px;
				width: 11px;
				top: 16px;
				right: 11px;
			}

			> div {
				border: 2px solid var(--accent-color);
				border-radius: 50%;
				color: var(--accent-color);
				margin: 2px;
				font: 18px/26px Material;
				text-align: center;
				background: var(--background-color);
				position: absolute;
				z-index: 1100;
				width: 30px;
			}

			&:hover {
				cursor: pointer;

				> div {
					border-color: var(--headings-color);
					color: var(--headings-color);
				}
			}
		}

		.modal-header {
			padding: var(--modal-padding) var(--modal-padding) calc(var(--modal-padding) * 5 / 8);

			.modal-header-inner {
				font: bold 20px/24px Alegreya SC;
				color: var(--headings-color);
				letter-spacing: 0.1em;
				text-transform: uppercase;
			}
		}

		.modal-close + .modal-content, .modal-content:nth-child(1) {
			width: 298px;

			.modal-content-inner {
				padding: 16px 0 47px;
				font: bold 16px/24px Alegreya SC;
				color: var(--headings-color);
				letter-spacing: 0.1em;
				text-transform: uppercase;
				text-align: center;
			}
		}

		.modal-content {
			position: relative;
			height: calc(100% - 77px);
			width: 378px;

			.modal-content-inner {
				color: var(--text-color);
				font: 500 11px/16px Alegreya Sans;
				letter-spacing: 0.05em;
				padding: 0 var(--modal-padding) 55px;

				p {
					margin-top: 14px;

					span.link {
						color: #015175;
						display: block;
						letter-spacing: 0.03em;
						line-height: 22px;

						&:hover {
							color: #3685a7;
							cursor: pointer;
						}
					}
				}

				> div {
					margin-top: 14px;
				}

				> div:first-child, > .checkbox + .checkbox {
					margin-top: 0;
				}
			}
		}

		.dialog-buttons {
			display: flex;
			justify-content: center;
			position: absolute;
			width: 100%;
			height: 32px;
			left: 0;
			bottom: -1px;

			> .dialog-buttons-inner {
				background: var(--background-color);
				position: relative;
				padding: 0 2px;
				margin: 0 24px;
				border-width: 0 1px;
				border-style: solid;
				border-color: var(--accent-color);
				z-index: 10001;

				> div {
					box-shadow: 0 none;
					margin: 0 1px;

					&:first-child:before {
						left: -1px;
					}

					&:last-child:after {
						right: -1px;
					}
				}
			}
		}

		&.more-buttons .dialog-buttons {
			height: auto;

			> .dialog-buttons-inner {
				display: flex;
				flex-direction: column;

				> div:not(:first-child) {
					margin-top: 1px;
				}

				> div:not(:last-child) {
					margin-bottom: 1px;
				}
			}
		}
	}
}
