/* for the "progress to next drop" info displayed on the cart page.  Copied from badges.css, but has many tweaks */

.card_drop_info_dialog {
	font-size: 13px;
}

.newmodal .card_drop_info_dialog {
	max-width: 500px;
}

.card_drop_info_header {
	font-size: 17px;
	color: #5491cf;
}

.card_drop_info_header.disabled {
	color: #5c5c5c;
}

.card_drop_info_header_secondary {
	color: #5c5c5c;
}

.card_drop_info_prepurchase_warning {
	color: #c23d3c;
}

.card_drop_info_prepurchase_warning ul {
	padding-left: 40px;
	padding-top: 4px;
}

.card_drop_info_body {
	margin-left: 18px;
	margin-top: 8px;
	margin-bottom: 16px;
}

.card_drop_info_subarea {
	background-color: #262627;
	border: 1px solid #67c1f5;
	padding: 19px 17px;

	margin-top: 24px;
	margin-bottom: 32px;
}

.card_drop_info_breakafter {
	margin-bottom: 18px;
}

.card_drop_info_progress {
	color: #5c5c5c;
}

.card_drop_info_progress_bar_ctn {
	background-color: #57595f;
	height: 10px;
	border-radius: 5px;
	margin: 7px 0;

	position: relative;

	box-shadow: inset 1px 1px 3px #353535;
	-webkit-box-shadow: inset 1px 1px 3px #353535;
}

.card_drop_info_progress_bar {
	position: absolute;
	top: 0;
	border: 1px solid #000000;
	border-radius: 4px;
	height: 8px;
background: -webkit-linear-gradient( top, #848080 5%, #5c5c5c 95%);
	background: linear-gradient( to bottom, #848080 5%, #5c5c5c 95%);
}

.salespend_card_drop_info.summersale_vote_info {
	max-width: 548px;
	font-size: 16px;
}

.salespend_card_drop_info, .salespend_card_drop_info .card_drop_info_progress {
	color: #b6b2a3;
}

.salespend_card_drop_info .card_drop_info_subarea {
	border-color: #67c1f5 ;
}

.salespend_card_drop_info .card_drop_info_progress_bar {
	border-color: #27282b;
background: -webkit-linear-gradient( top, #539bc5 5%, #1e3948 95%);
	background: linear-gradient( to bottom, #539bc5 5%, #1e3948 95%);
}

.salespend_card_drop_info .card_drop_info_totalspending {
	color: #67c1f5;
	font-size: 15px;
}

.salespend_card_drop_info_moreinfo {
	font-size: 13px;
}

.salespend_card_drop_info_moreinfo a {
	text-decoration: underline;
	color: #b6b2a3;
}

.salespend_card_drop_info_moreinfo a:hover {
	color: #e9e4d1;
}

.card_drop_info_progress_bar.previous_progress {
	position: relative;
	/*top: -10px;   is this necessary? was causing stacked double progress bar*/
}

.card_drop_info_progress_bar.new_progress {
background: -webkit-linear-gradient( top, #67c1f5 5%, #4581a4 95%);
	background: linear-gradient( to bottom, #67c1f5 5%, #4581a4 95%);
}

.cart_promo_discount_progress
{
	margin-top: 24px;
}

.cart_promo_discount_progress_total
{
	float: right;
}

.cart_promo_discount_progress_title > span
{
	font-weight: bold;
}

.cart_promo_discount_progress .card_drop_info_progress_bar.new_progress
{
	background: -webkit-linear-gradient(top, #FDE08D, #DF9F28, #8f6B29);
	background: linear-gradient(top, #FDE08D, #DF9F28, #8f6B29);
}

.cart_promo_discount_used {
	flex: 1;
	text-align: center;
	padding: 12px 60px;
	position: relative;
}

.cart_promo_discount_used_label {
	color: #f8bc5e;
	font-size: 16px;
	line-height: 20px;
	margin-bottom: 12px;
}

.cart_promo_discount_used_label,
.cart_promo_discount_used_link
{
	margin-bottom: 12px;
}

.cart_promo_discount_used_link > a {
	color: #c7c4bd;
	text-decoration: underline;
}

.cart_promo_discount_used_link > a:hover {
	color: #ffffff;
}

.cart_coin_sparkle {
	width: 133px;
	height: 125px;
	background: url( 'https://cdn.akamai.steamstatic.com/store/promo/lunar2019/cart_coin_sparkle.png' ) no-repeat center center;
}

.cart_promo_discount_used .cart_coin_sparkle
{
	position: absolute;
	right: -8px;
	top: -35px;
}