.prizes .prizes-header {
	width: 100%;
	height: 6rem;
}
.prizes .prizes-header img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.prizes .prize-items {
	width: 100%;
	margin: 3rem 0;
}
.prizes .prize-items .header {
	text-align: center;
}
.prizes .prize-items .header h1 {
	font-family: var(--mt-font-default);
	font-size: 1.375rem;
	font-weight: 400;
	text-transform: uppercase;
	margin: 0;
	letter-spacing: 0.1875rem;
}
.prizes .prize-items .header h2,
.prizes .whats-popular h2 {
	font-family: var(--mt-font-hdg);
	font-size: 2.625rem;
	font-weight: 700;
	line-height: 1;
	text-transform: capitalize;
}

.prizes #points-available p {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	margin: 2rem 0 3rem;
	padding: 0.5rem 2rem;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.02794rem;
	background: var(--mt-color-white);
	border-radius: 2rem;
	box-shadow: var(--mt-box-shadow);
}
.prizes #points-available p .points {
	padding: 0.5rem 2rem;
	background: var(--mt-color-red);
	color: var(--mt-color-white);
	border-radius: 2rem;
}
.prizes #points-available p .points-amt {
	margin-right: 0.25rem;
}

.prizes .prize {
	border-radius: var(--mt-border-radius);
	box-shadow: var(--mt-box-shadow);
	overflow: hidden;
}

.prizes .prize .prize-image {
	background: var(--mt-color-light-grey);
}

/* Details */
.prizes .prize .prize-details {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 1.75rem;
}

.prizes .prize .entries p {
	display: flex;
	align-items: center;
	column-gap: 0.25rem;
	font-size: 1.125rem;
	background: var(--mt-color-grey);
	border-radius: 1.125rem;
	padding: 0.3rem 1.25rem;
}
.prizes .prize .entries .amt {
	font-weight: 800;
}

.prizes .prize .info h3 {
	font-family: var(--mt-font-hdg);
	font-size: 2.375rem;
	font-weight: 700;
	text-transform: uppercase;
}

.prizes .prize .closes {
	font-size: 0.75rem;
	font-style: italic;
}

/* interface */
.prizes .interface {
	position: relative;
	display: flex;
	justify-content: space-between;
	max-height: 7rem;
}

.prizes .interface-amount,
.prizes .interface-button-group {
	flex: 1 1 50%;
}

.prizes .interface-amount {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center;
	column-gap: 1rem;
	padding: 0.5rem;
	background: var(--mt-color-red);
}
.prizes .interface-amount .amt {
	min-width: 3rem;
}
.prizes .interface .inc,
.prizes .interface .dec {
	width: 2.8rem;
	height: 2.8rem;
	border: none;
}
.prizes .interface .inc {
	background: url('/media/mpclo/images/mpc/prizes/prize_control_plus.svg') no-repeat center/contain;
}
.prizes .interface .dec {
	background: url('/media/mpclo/images/mpc/prizes/prize_control_minus.svg') no-repeat center/contain;
}

.prizes .interface-button-group {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.prizes .interface-button-group .add,
.prizes .interface-button-group .remove {
	flex: 1;
	color: var(--mt-color-white);
	border: none;
	padding: 1rem;
	letter-spacing: 0.125rem;
	font-weight: bold;
	text-transform: uppercase;
}
.prizes .interface-button-group .add {
	background: var(--mt-color-dark-red);
}
.prizes .interface-button-group .remove {
	background: var(--mt-color-med-red);
}

.prizes .interface .msg {
	z-index: 1;
	position: absolute;
	top: calc(100%);
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	text-align: center;
	transition: top var(--mt-duration) ease;
}
.prizes .interface .msg.open {
	top: 0;
	font-size: 1rem;
	font-weight: bold;
}
.prizes .interface .msg.error {
	background: var(--mt-color-red);
	color: var(--mt-color-white);
}
.prizes .interface .msg.success {
	background: var(--mt-color-teal);
	color: var(--mt-color-black);
}
.prizes .interface .msg * {
	margin: 0;
}

.prizes .prize-featured,
.prizes .prize-regular {
	color: var(--mt-color-white);
	background: var(--mt-color-red);
	text-align: left;
}
.prizes .prize-featured.prize-li,
.prizes .prize-regular.prize-li {
	color: var(--mt-color-black);
	background: var(--mt-color-white);
	text-align: center;
}
.prizes .prize-featured .prize-details .button-group,
.prizes .prize-regular .prize-details .button-group {
	justify-content: flex-start;
	padding-top: 0;
}

/* */
/* What's Popular */
.prizes .whats-popular {
	width: 100%;
	color: var(--mt-color-white);
	background: url('/media/mpclo/images/mpc/template/backgrounds/bg_popular.jpg') no-repeat center/cover;
}
.prizes .whats-popular h2 {
	font-size: 2.25rem;
}
.prizes .whats-popular .key {
	display: flex;
	flex-direction: column;
	row-gap: 0.75rem;
	list-style-type: none;
	margin: 0;
	padding: 0 0 1rem;
}
.prizes .whats-popular .key li {
	display: flex;
	align-items: center;
	text-transform: uppercase;
}
.prizes .whats-popular .key li:before {
	content: '';
	width: 1.5rem;
	height: 1.5rem;
	border: 1px solid var(--mt-color-white);
	margin-right: 1rem;
}
.prizes .whats-popular .key li.prize1:before {
	background: #00aea8;
}
.prizes .whats-popular .key li.prize2:before {
	background: #ee7623;
}
.prizes .whats-popular .key li.prize3:before {
	background: #d50037;
}
/* Pie chart background/border hackish */
.prizes .whats-popular .chart-container {
	position: relative;
	width: 240px;
	height: 240px;
	padding: 2px;
	margin: 0 auto;
	filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.5));
}
.prizes .whats-popular .chart-container * {
	width: 100%;
	height: 100%;
}
.prizes .whats-popular .chart-container:before {
	content: '';
	position: absolute;
	top: -2px;
	left: -2px;
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	background: var(--mt-color-white);
	border-radius: 100%;
}

/**/
/* Modal */
#prize-details-modal .modal-content {
	border-width: 0;
}
#prize-details-modal .modal-body {
	padding: 0;
}
#prize-details-modal .prize-image {
	width: 100%;
}
#prize-details-modal .prize-content {
	padding: 2rem 2rem 1rem;
}
#prize-details-modal .drawing-closes {
	font-size: 0.875rem;
	font-style: italic;
	font-weight: 700;
	padding: 0.3rem 1rem 0.3rem 2rem;
	border-radius: 0 0 0.375rem 0;
	color: var(--mt-color-white);
	background: var(--mt-color-purple);
	width: 50%;
	min-width: 320px;
	margin-top: -2rem;
	margin-left: -2rem;
}
#prize-details-modal .summary {
	font-size: 1.25rem;
}
#prize-details-modal .button-group {
	justify-content: flex-start;
	padding: 0 2rem 2rem 2rem;
}

@media screen and (max-width: 640px) {
	.prizes #points-available p {
		flex-direction: column;
		font-size: 1rem;
		padding: 1rem;
		gap: 0.5rem;
	}
}
@media (max-width: 480px) {
	#prize-details-modal .drawing-closes {
		min-width: unset;
		width: calc(100% + 2rem);
	}
	#prize-details-modal .button-group {
		justify-content: center;
	}
}