/* panel */

.bg-panel {
	background-color: rgb(54, 54, 54);
    background: -webkit-linear-gradient(top, rgb(36, 36, 36), rgba(54,54,54,.7));
	background: -moz-linear-gradient(top, rgb(36, 36, 36), rgba(54,54,54,.7));
	background: -o-linear-gradient(top, rgb(36, 36, 36), rgba(54,54,54, .7));
	background: linear-gradient(to top, rgba(36, 36, 36,0), rgba(54,54,54,.7));
}

.reward-container {
	line-height: 150%;
}

/* switch */

.rewards-btns > .btn {
	border: 0;
	border-radius: 0;
	background-color: rgb(31, 31, 31);
	color: rgb(153, 153, 153);
	font-family: "SST W01 Roman",Helvetica Neue,Helvetica,Arial,sans-serif;
	letter-spacing: -.2px;
	padding: 10px;
}

.rewards-btns > .btn:hover {
	text-decoration: none;
	color: rgb(222, 222, 222);
}

.rewards-btns > .btn:focus {
	background-color: rgb(54, 54, 54);
}

.rewards-btns > .btn.active {
	background-color: rgba(54, 54, 54, 0);
	color: rgb(0, 162, 255);
}

.rewards-btns > .btn > img {
	width: 20px;
	margin-right: 5px;
	margin-top: -5px;
}

/* panel */
.rewards-panel {
	position: relative;
	padding:10px;
}

.rewards-loading {
	padding-top: 10px;
	text-align: center;
	color:white;
	padding-bottom: 10px;
}

.rewards-mascot { 
	width: auto;
	height: 200px;
	margin: 20px 0px;
	display: inline-block;
}

.rewards-button, .rewards-button:focus, .rewards-button:hover {
	width: 100%;
	border-radius: 0;
	background-color: rgb(0, 114, 206);
	color: white;
	white-space: inherit !important;
	border: 0;
	margin-bottom: 10px;
	margin-top: 10px;
	font-family: "SST W01 Roman",Helvetica Neue,Helvetica,Arial,sans-serif;
	font-size: 90%;
	padding: 10px;
}

.rewards-button-redeem, .rewards-button-redeem:focus, .rewards-button-redeem:hover {
	width: 100%;
	border-radius: 0;
	background-color: rgb(54, 54, 54);
	color: rgb(0, 162, 255);
	white-space: inherit !important;
	border: 0;
	margin-bottom: 10px;
	margin-top: 10px;
	font-family: "SST W01 Roman",Helvetica Neue,Helvetica,Arial,sans-serif;
	font-size: 90%;
	padding: 10px;
}


/* mobile */
.rewards-list {
	height: 100%;
}

/* desktop */
@media only screen and (min-width: 768px) {
	.rewards-list {
		max-height: calc(100vh - 250px);
		overflow-x: hidden;
		overflow-y: auto;
	}

	.rewards-list::-webkit-scrollbar {
		width: 5px;
		background-color:rgba(0, 0, 0, .3);
	}

	.rewards-list::-webkit-scrollbar-track {
		background-color:rgba(0, 0, 0, .3);
	}

	.rewards-list::-webkit-scrollbar-thumb {
		background-color: rgb(0, 114, 206);
	}
}

.rewards-row {
	text-align: left;
	background-color: rgb(31, 31, 31);
	/* border-bottom: solid .7px rgba(153,153,153,.3); */
}

.reward-name:first-child {
	margin-top: 0px;
}

/* individual rewards */
.reward-name {
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 0px;
	padding-top: 10px;
	font-size: 110%;
	color: rgb(0, 162, 255);
	font-family: "SST W01 Roman",Helvetica Neue,Helvetica,Arial,sans-serif;
}

.reward-expiration {
	margin: 0px 10px;
	color: rgb(222,222,222);
	font-size: 70%;
	letter-spacing: 1px;
}

.reward-expiration > i {
	color: rgb(0, 162, 255);
	margin-right: 5px;
}

.reward-collapse {
	color: rgb(0, 162, 255);
	margin-top: 10px;
	margin-right: 15px;
	margin-bottom: 0px;
	font-family: "SST W01 Bold",Helvetica Neue,Helvetica,Arial,sans-serif;
	font-size: 90%;
}

.reward-gutter {
	height: 10px;
	/* background-color: rgb(153, 153, 153); */
	margin: 10px 0;
}

.reward-collectibles {
	background-color: rgb(31, 31, 31);
	padding: 0px 10px 10px 10px;
	border-bottom: solid .7px rgba(153,153,153,.3);
	margin-bottom:10px;
	margin-top: -20px;
}

.reward-collectible-label {
	color: rgb(153, 153, 153);
	font-size: 80%;
	font-family: "SST W01 Roman",Helvetica Neue,Helvetica,Arial,sans-serif;
	letter-spacing: .5px;
}

.reward-collectible-instructions {
	white-space: pre-wrap;
	/* background-color: rgb(54, 54, 54); */
	color: rgb(222, 222, 222);
	padding: 0 5px;
}