@charset "utf-8";

/* CSS Document */
.cp_fr {
	margin-right: 15px;
	float: right;
}

#coupon_table,
#cart #coupon_table {
	width: 350px;
	margin: 15px auto;
}

#coupon_table td,
#cart #coupon_table td {
	height: 49px;
}

#coupon-dialog {
	width: 90% !important;
	border: 1px solid #ccc;
	border-radius: 8px;
}

#coupon-dialog .ui-dialog-titlebar {
	height: 48px;
	border-bottom-color: #ccc;
	color: #222;
	line-height: 48px;
}

#coupon-dialog .ui-button.ui-dialog-titlebar-close {
	top: -1px;
	right: .5rem;
}

#coupon-dialog .ui-dialog-titlebar-close::before {
	-webkit-transition: .3s ease all;
	-moz-transition: .3s ease all;
	-o-transition: .3s ease all;
	transition: .3s ease all;
	color: #aaa;
	font-size: 28px;
}

#coupon-dialog .ui-dialog-titlebar-close:hover::before {
	color: #262626;
}

#coupon-dialog .ui-dialog-buttonpane {
	border-top-color: #ccc;
}

#coupon-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	float: none;
	text-align: center;
}

#coupon-dialog .ui-dialog-buttonpane .ui-button {
	height: auto;
	margin: 0;
	padding: 10px 60px;
	-webkit-transition: .3s ease all;
	-moz-transition: .3s ease all;
	-o-transition: .3s ease all;
	transition: .3s ease all;
	border: none;
	border-radius: 3px;
	background-color: #efefef;
	box-shadow: none;
	color: #262626;
	font-size: 15px;
}

#coupon-dialog .ui-dialog-buttonpane .ui-button:hover {
	background-color: #ddd;
}

#coupon-dialog .ui-dialog-buttonpane .ui-button:focus {
	box-shadow: none;
}

#show_coupon_dialog.ui-dialog-content {
	max-height: 350px !important;
	margin-bottom: 1rem;
	padding: 30px 16px 20px;
}

#coupon-dialog .coupon-list,
#memberinfo .coupon-list {
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	list-style: none;
}

#coupon-dialog .coupon-list {
	gap: 1rem;
}

#memberinfo .coupon-list {
	max-height: 350px;
	margin-bottom: 30px;
	padding: 0 20px 0 0;
	overflow-y: auto;
	gap: .5rem;
}

#coupon-dialog .coupon-list .coupon-item {
	width: 100%;
	-webkit-transition: .3s ease all;
	-moz-transition: .3s ease all;
	-o-transition: .3s ease all;
	transition: .3s ease all;
	border: 1px solid #eee;
	border-radius: 5px;
	box-shadow: 0 0 5px rgba(205, 205, 205, .8);
	cursor: pointer;

}

#memberinfo .coupon-list .coupon-item {
	width: 100%;
	border: 1px solid #ccc;
	background-color: #fff;
}

#coupon-dialog .coupon-list .coupon-item .coupon-info,
#memberinfo .coupon-list .coupon-item .coupon-info {
	padding: 1rem 1rem .75rem;
}

#coupon-dialog .coupon-list .coupon-item .coupon-name,
#coupon-dialog .coupon-list .coupon-item .coupon-code,
#memberinfo .coupon-list .coupon-item .coupon-name,
#memberinfo .coupon-list .coupon-item .coupon-code {
	font-weight: bold;
}

#coupon-dialog .coupon-list .coupon-item .coupon-name,
#coupon-dialog .coupon-list .coupon-item .coupon-code {
	color: #4f94d4;
	font-size: 15px;
}

#memberinfo .coupon-list .coupon-item .coupon-name,
#memberinfo .coupon-list .coupon-item .coupon-code {
	color: #222;
	font-size: 13px;
}

#coupon-dialog .coupon-list .coupon-item .coupon-name + .coupon-code,
#memberinfo .coupon-list .coupon-item .coupon-name + .coupon-code {
	margin-top: .2rem;
	color: #777;
	font-size: 13px;
	font-weight: normal;
	letter-spacing: 1px;
}

#memberinfo .coupon-list .coupon-item .expiration-date {
	margin-right: 1rem;
}

#coupon-dialog .coupon-list .coupon-item .expiration-date,
#memberinfo .coupon-list .coupon-item .expiration-date,
#memberinfo .coupon-list .coupon-item .minimum-amount {
	display: inline-block;
	margin-top: .2rem;
	font-size: 13px;
}

#coupon-dialog .coupon-list .coupon-item .expiration-date,
#coupon-dialog .coupon-list .coupon-item .minimum-amount,
#memberinfo .coupon-list .coupon-item .expiration-date,
#memberinfo .coupon-list .coupon-item .minimum-amount {
	color: #262626;
}

#coupon-dialog .coupon-list .coupon-item .coupon-discount,
#memberinfo .coupon-list .coupon-item .coupon-discount {
	color: #262626;
	font-weight: bold;
	text-align: center;
}

#coupon-dialog .coupon-list .coupon-item .coupon-discount {
	padding: .5rem;
	font-size: 16px;
}

#memberinfo .coupon-list .coupon-item .coupon-discount {
	padding: .5rem;
	font-size: 14px;
}

#coupon-dialog .coupon-list .coupon-item .coupon-discount {
	border-top: 1px solid #eee;
}

#memberinfo .coupon-list .coupon-item .coupon-discount {
	border-top: 1px solid #ccc;
}

@media screen and (min-width: 38.75em) {

	#coupon-dialog {
		width: clamp(25rem, -39.583rem + 166.67vw, 37.5rem) !important;
	}
}

@media screen and (min-width: 46.25em) {

	#memberinfo .coupon-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		max-height: none;
		padding: 0;
		gap: 1rem;
	}

	#memberinfo .coupon-list .coupon-item {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 0;
	}

	#coupon-dialog .coupon-list .coupon-item .coupon-name {
		font-size: 16px;
	}

	#coupon-dialog .coupon-list .coupon-item .coupon-code {
		font-size: 17px;
	}

	#memberinfo .coupon-list .coupon-item .coupon-name {
		font-size: 14px;
	}

	#memberinfo .coupon-list .coupon-item .coupon-code {
		font-size: 15px;
	}

	#memberinfo .coupon-list .coupon-item .coupon-info {
		width: 100%;
	}

	#memberinfo .coupon-list .coupon-item .coupon-discount {
		align-self: end;
		width: 100%;
	}
}

@media screen and (min-width: 62.5em) {

	#coupon-dialog .coupon-list .coupon-item:hover {
		box-shadow: 0 0 5px rgba(34, 113, 177, .8);
	}

	#coupon-dialog .coupon-list .coupon-item .coupon-name,
	#coupon-dialog .coupon-list .coupon-item .coupon-code,
	#coupon-dialog .coupon-list .coupon-item .expiration-date,
	#coupon-dialog .coupon-list .coupon-item .coupon-discount {
		-webkit-transition: .3s ease all;
		-moz-transition: .3s ease all;
		-o-transition: .3s ease all;
		transition: .3s ease all;
		color: #262626;
	}

	#coupon-dialog .coupon-list .coupon-item:hover .coupon-name,
	#coupon-dialog .coupon-list .coupon-item:hover .coupon-code,
	#coupon-dialog .coupon-list .coupon-item:hover .expiration-date,
	#coupon-dialog .coupon-list .coupon-item:hover .coupon-discount {
		color: #4f94d4;
	}

	#coupon-dialog .coupon-list .coupon-item .coupon-discount {
		font-size: 18px;
	}

}