@use "../scss/functions/rem";

.brute-force__current-ip {
	margin-bottom: 16px;
}

.waf__header {
	align-items: center;
	display: flex;

	.waf__standalone__mode {
		margin-left: auto;
	}

}

.waf__settings {
	margin-top: 24px;
	margin-left: 64px;
	margin-bottom: 24px;

	&__toggle-setting {
		flex-wrap: wrap;
		display: flex;
		margin-bottom: 16px;

		&__label {
			display: flex;
			align-items: center;
		}

		&:last-child {
			margin-bottom: 0;
		}
	}

	.form-toggle__label {
		margin-top: 0;
		margin-bottom: 0;
	}

	&__ips {
		width: 100%;
		margin-left: 64px;

		&__button-container {
			margin-left: 64px;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
		}

		&__save-button {
			margin-top: 0.5rem;
			float: right;
		}
	}

	&__share-data-popover {
		display: flex;
		align-items: center;
		margin-left: 4px;
	}

	&__upgrade-popover {
		vertical-align: middle;
		margin-left: 8px;
	}

}

.waf__enhanced-protection {

	&,
	&.dops-card.is-expanded {
		margin-bottom: 0;
	}

	&.dops-foldable-card.is-expanded .dops-foldable-card__content {
		border-top: none;
		padding-top: 0;
	}

	ul {
		list-style: disc;
		margin-top: 0;
		margin-bottom: 0;
		padding-left: 32px;
	}

	code {
		white-space: nowrap;
	}
}


.modal-survey-notice {
	position: fixed;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	z-index: 1000;

	.modal-survey-notice__backdrop {
		background: #000;
		opacity: 0.2;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		cursor: default;
	}


	.modal-survey-notice__popup {
		position: absolute;
		right: 25px;
		bottom: 25px;
		width: 416px;
		max-width: calc(100% - 50px);
		z-index: 2;
		border-radius: 2px;
		box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.04), 0 3px 8px 0 rgba(0, 0, 0, 0.12);
		overflow: hidden;

		.modal-survey-notice__popup-head {
			background: #0675c4;
			border-bottom: 1px solid #f6f7f7;
			height: 56px;
			padding: 0 14px 0 16px;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.modal-survey-notice__popup-head-title {
				color: #fff;
				font-size: rem.convert(14px);
				font-weight: 500;
				line-height: 20px;
				letter-spacing: -0.15px;
			}

			.modal-survey-notice__popup-head-close svg {
				fill: #fff;
			}
		}

		.modal-survey-notice__popup-content {
			padding: 1rem;
			background: #fff;

			.modal-survey-notice__popup-content-title {
				font-size: rem.convert(16px);
				font-weight: 500;
				line-height: 24px;
				letter-spacing: -0.32px;
				padding-bottom: 8px;
			}

			.modal-survey-notice__popup-content-description {
				font-size: rem.convert(14px);
				line-height: 20px;
				letter-spacing: -0.15px;
				padding-bottom: 18px;
			}

			.modal-survey-notice__popup-content-buttons {
				display: flex;
				justify-content: flex-end;

				.modal-survey-notice__popup-content-buttons-ok {
					padding: 8px 14px;
					background: #0675c4;
					color: #fff;
					font-size: rem.convert(14px);
					line-height: 20px;
					letter-spacing: -0.15px;
				}

				.modal-survey-notice__popup-content-buttons-cancel {
					padding: 8px 14px;
					color: #0675c4;
					text-align: center;
					font-size: rem.convert(14px);
					line-height: 20px;
					letter-spacing: -0.15px;
				}
			}
		}
	}
}

.jp-form-settings-group p {
	margin-bottom: 0.5rem;
}
