.ppcp-r-navigation-container {
	padding: 24px 48px;
	margin: 0 -20px 48px -20px;
	border-bottom: 1px solid $color-gray-300;
	position: relative;

	.ppcp-r-navigation {
		display: flex;
		justify-content: space-between;
		align-items: center;

		button.is-primary {
			padding: 10px 18px;
			justify-content: center;
			margin: 0 0 0 12px;
			&:not(:disabled) {
				background-color: $color-blueberry;
			}
		}

		button.is-tertiary {
			@include font(16, 24, 600);
			color: $color-gray-900;
			&:hover{
				background-color:none;
				background:none;
			}
		}

		&--left {
			&__link {
				@include font(20, 28, 400);
				color: $color-gray-900;
				text-decoration: none;
				padding: 0 0 0 18px;
			}
		}

		&--right a{
			@include font(13, 20, 400);
			color: $color-blueberry;
			text-decoration: none;
		}

		&--progress-bar {
			position: absolute;
			bottom: 0px;
			left: 0;
			background-color: $color-blueberry;
			height: 4px;
		}
	}

	@media screen and (max-width: 480px) {
		padding: 24px 35px;
		.ppcp-r-navigation {
			flex-wrap: wrap;
			row-gap: 8px;

			&--progress-bar {
				display: none;
			}
		}
	}
}