.modal-notice {

	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999999;
	background: rgba(0,0,0,0.8);

	.modal-notice--container {

		background: #fff;
		width: 100%;
		max-width: 1000px;
		padding: 25px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;

		&::after {
			content: '';
			position: absolute;
			top:5px;
			left: 5px;
			width: calc(100% - 10px);
			height: calc(100% - 10px);
			border: 2px solid var(--color-primary);
			pointer-events: none;
		}

		.modal--logo {
			margin: 0 0 25px 0;
			svg {
				width: 44px;
				height: unset;
			}
		}

		.modal--title {
			font-size: 42px;
			margin: 0 0 10px 0;
			@media screen and (max-width: 768px) {
				font-size: 36px;
			}
		}

		.modal--subtitle {
			font-size: 32px;
			color: var(--color-primary);
			margin: 0 0 20px 0;
			@media screen and (max-width: 768px) {
				font-size: 28px;
			}
		}

		.modal--content {
			margin: 14px auto;
			font-size: 20px;
			max-width: 600px;
			@media screen and (max-width: 768px) {
				font-size: 16px;
			}
		}

		.modal--button-container {

			display: flex;
			justify-content: center;
			gap: 10px;
			margin: 24px 0 0 0;

			.button {

				background: rgb(var(--color-foreground));
				box-shadow: none;
				display: flex;
				align-items: center;
				gap: 10px;
				white-space: nowrap;

				@media screen and (max-width: 768px) {
					padding-left: 0;
					padding-right: 0;
					flex: 1;
					font-size: 12px;
				}

				&.outline {

					color: rgb(var(--color-foreground));
					border-color: rgb(var(--color-foreground));
					background: transparent;

				}

				svg {
					width: 20px;
					height: unset;
					@media screen and (max-width: 768px) {
						display: none;
					}
				}

			}

		}

		.modal--footer {

			margin: 20px 0 0 0;
			font-size: 13px;

		}

	}


}