.qcc-page-grid.qcc-rates {
	display: grid;
	grid-column-gap: var(--base-margin);
	grid-row-gap: var(--base-margin);
	grid-template-areas:
		"ptop ptop"
		"rates left";
	grid-template-columns: auto 30%;
	margin:auto auto calc(var(--base-margin) * 2);
	padding:0;
	position:relative;
	width:100%;
}
#pageTop {
	grid-area:ptop;
}
#pageRates {
	display:flex;
	flex-wrap:wrap;
	grid-area:rates;
	padding:0 var(--base-rem);
}
#pageLeft {
	grid-area:left;
	padding-left:var(--base-rem);
}
.qcc-rates {
	align-items: stretch;
	display: flex;
	justify-content: start;
}
.card.rate-card {
	box-shadow: var(--ds-halo-sm);
	float:right;
	margin:0 calc(.5 * var(--base-rem)) calc(.75 * var(--base-rem));
	max-width:calc(50% - var(--base-rem));
	overflow:hidden;
	width:100%;
}
.rate-card .card-body {
	box-shadow:inset 2px 0 5px rgba(0,0,150,0.1), inset -2px 0 5px rgba(0,0,150,0.1);
	height: 100%;
	padding-bottom:0;
}
.rate-card .card-body .row
, .add-ons .row {
	border-bottom:1px solid var(--gray);
	margin-bottom:.375rem;
	padding-bottom:.375rem;
}
.rate-card .card-footer {
	height:auto;
	font-size:calc(.8 * var(--base-rem));
	max-height:60px;
}
.rate-card .card-title {
	align-items: center;
	background:var(--q-green-header);
	border-bottom:var(--brd-lt);
	border-radius:var(--radius) var(--radius) 0 0;
	display: flex;
	font-size:calc(var(--base-rem) * 1.25);
	font-weight: 400;
	margin-bottom:0;
	overflow:hidden;
}
.rate-card .card-title i {
	align-items: center;
	aspect-ratio: 1 / 1;
	background: linear-gradient(0deg, rgba(0,100,0,0.5), rgba(0,200,0,0.5));
	border-right: var(--brd);
	color: #fff;
	display: flex;
	font-size: calc(var(--base-rem) * 1.5);
	height: 100%;
	justify-content: center;
	margin: var(--base-margin);
	margin-left: 0;
	max-height: 70px;
	padding: calc(var(--base-rem) * .5);
	text-shadow: var(--ds-sm-dk);
	--fa-primary-color: #114e11;
	--fa-secondary-color: rgb(234 252 235);
	--fa-secondary-opacity: 1;
}
.rate-card .price-tier
 , .rate-card .price {
	font-size:calc(.9 * var(--base-rem));
}
.add-ons .price-tier {
	white-space:nowrap;
}
.add-ons .price-tier
 , .add-ons .price {
	font-size:calc(.8 * var(--base-rem));
}
.rate-card .price-tier {
	width:27%;
	text-align:end;
}
.rate-card .price {
	width:70%;
}
.rate-card .price-note {
	font-size:calc(.85 * var(--base-rem));
	font-style:italics;
}
.qcc-rates-notes {
	background:rgba(var(--bs-info-rgb),.1);
	border:var(--brd);
	box-shadow:var(--ds);
	border-radius:var(--radius);
	display:block;
	margin:var(--base-margin);
	padding:var(--base-padding);
}
.qcc-rates-notes ul {
	font-size: calc(.9 * var(--base-rem));
	margin: var(--base-margin);
	padding-left: var(--base-rem);
}
.qcc-rates-notes ul li {
	margin-bottom:calc(.5 * var(--base-rem));
}
.container.add-ons {
	font-size:calc(.85 * var(--base-rem));
	margin-bottom:var(--base-rem);
}
@media (max-width:990px) {
	.qcc-page-grid.qcc-rates {
		grid-template-areas:
			"ptop"
			"rates"
			"left";
		grid-template-columns:100%;
	}
	#pageRates {
		padding:0;
	}
	#pageLeft {
		padding-left:0;
	}

}
@media (max-width:768px) {
	.card.rate-card {
		max-width:100%;
	}
}

.btn-rate-link { 
	background-color: #F5DF26;
	border-color: #d1b310;
	border-radius: 0 0 .375rem .375rem;
	box-shadow:inset 0 -2px 4px rgba(0,0,150,0.15);
	color: #333;
	transition:all .25s ease;
}
 
.btn-rate-link:hover
, .btn-rate-link:focus
, .btn-rate-link:active
, .btn-rate-link.active
, .open .dropdown-toggle.btn-rate-link { 
	color: #fff; 
	background-color: #b39909; 
	border-color: #F5DF26; 
} 
 
.btn-rate-link:active
, .btn-rate-link.active
, .open .dropdown-toggle.btn-rate-link { 
	background-image: none; 
} 
 
.btn-rate-link.disabled
, .btn-rate-link[disabled]
, fieldset[disabled] .btn-rate-link
, .btn-rate-link.disabled:hover
, .btn-rate-link[disabled]:hover
, fieldset[disabled] .btn-rate-link:hover
, .btn-rate-link.disabled:focus
, .btn-rate-link[disabled]:focus
, fieldset[disabled] .btn-rate-link:focus
, .btn-rate-link.disabled:active
, .btn-rate-link[disabled]:active
, fieldset[disabled] .btn-rate-link:active
, .btn-rate-link.disabled.active
, .btn-rate-link[disabled].active
, fieldset[disabled] .btn-rate-link.active { 
	background-color: #BDBA1B; 
	border-color: #626902; 
} 
 
.btn-rate-link .badge { 
	color: #BDBA1B; 
	background-color: #fff; 
}