.page-checkout-success {
	.coupon-info-text {
		margin-bottom: 30px;
	}

	.coupon-wall-container {
		position: relative;

		.sunnycash-coupon-wall-navigation-container {
			&.back {
				padding: 0 15px 0 0;
			}

			&.forward {
				padding: 0 0 0 15px;
			}

			.sunnycash-coupon-wall-navigation {
				font-size: 18px;
				text-align: center;
				position: relative;
				border: 1px solid #CCCCCC;
				height: 40px;
				padding: 5px;
				display: block;
				margin-bottom: 30px;
				color: #666666;
				text-decoration: none;
				visibility: hidden;

				&:hover {
					border-color: #66AFE9;
					box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 8px rgba(102, 175, 233, 0.6);
					text-decoration: none;
					color: #2196F3;
				}
			}
		}

		.coupons-container {
			.coupon {
				margin-bottom: 30px;

				.coupon-container {
					height: 235px;
					display: block;
					border: 1px solid #CCCCCC;
					padding: 10px 15px;
					text-align: center;

					&:hover {
						text-decoration: none;
						border-color: #66AFE9;
						box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 8px rgba(102, 175, 233, 0.6);
					}

					.coupon-image-container {
						display: table;
						width: 100%;
						font-size: 18px;
						font-weight: bold;
						text-align: center;
						height: calc(40% - 10px);

						.coupon-image {
							display: table-cell;
							vertical-align: middle;

							img {
								max-width: 100%;
								width: auto;
								max-height: 100px;
								height: auto;
								margin: 0 auto;
								background-color: #FFFFFF;
							}
						}
					}

					.coupon-title-container {
						display: table;
						text-align: center;
						width: 100%;
						font-size: 16px;
						height: calc(40% - 10px);

						.coupon-title {
							font-size: 0.8em;
							display: table-cell;
							text-align: center;
							vertical-align: middle;

							@media (min-width: 768px) {
								font-size: 14px;
							}

							@media (min-width: 992px) {
								font-size: 16px;
							}
						}
					}

					.coupon-action-button-container {
						height: 20%;
						width: 90%;
						display: inline-block;

						a {
							@media (max-width: 767px) {
								font-size: 10px;
								white-space: inherit;
							}
						}
					}
				}
			}

			.coupon-redeem-modal {
				.coupon-info-container {
					margin-bottom: 15px;

					.coupon-logo {
						text-align: center;

						img {
							display: inline-block;
						}
					}
				}

				.coupon-code-intro {
					display: inline-block;
					padding-right: 15px;
					text-transform: uppercase;
				}

				.coupon-code-container {
					text-align: center;

					.coupon-code-box {
						background-color: #F3F3F3;
						border: 1px solid #CCCCCC;
						color: #666666;
						display: inline-block;
						margin: 0 auto;
						min-width: 50%;
						padding: 15px;
						text-align: center;
					}

					.copy-coupon-icon {
						display: inline-block;
						font-size: 20px;
						padding-left: 15px;
					}

					div:hover.copy-coupon-icon {
						cursor: pointer;
						color: #2196F3;
					}
				}
			}
		}
	}
}

.sunnycash-scroller {
	position: fixed;
	bottom: 0;
	right: 25px;
	z-index: $gx-pageup-z-index + 1;

	background-color: $brand-primary;
	color: $btn-primary-color;
	font-size: 12px;
	width: 180px;
	padding: 5px 10px;

	@include opacity(0);

	i.fa {
		font-size: 30px;
		line-height: 34px;
		margin-right: 12px;
	}

	&:active, &:focus {
		background-color: $brand-primary;
		color: $btn-primary-color;
		text-decoration: none;
	}

	&:hover {
		background-color: darken($brand-primary, 10%);
		color: $btn-primary-color;
		text-decoration: none;
	}

	&,
	&:before {
		@include transition(300ms ease all);
	}

	&.visible {
		@include opacity(1);
	}
}