/* Token Redemption
   ========================================================================== */

.tokenLink {
	margin-bottom: 1em;
}   
   
#redeemToken * {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	-webkit-tap-highlight-color: transparent;
}

#redeemToken {
	position: relative;
	/* same as #mainContent */
	margin: 30px 0 0 0;
}
#redeemToken h1 {
  	font-size: 2em;
  	margin: .67em 0;
}
#redeemToken h2 {
  font-size: 1.5em;
  margin: .83em 0;
}
#redeemToken .redeemStep {
	/* variation of @extend %contentPanel */
	padding: 1em 0;
}
#redeemToken .redeemStep + .redeemStep {
	border-top: 1px solid #2f5f7f;
}
#redeemToken form {
	width: 46%;
	
}
#redeemToken .formRow {
	margin-bottom: 1em;
}
#redeemToken label {
	display: inline-block;
	margin-bottom: .25em;
}
#redeemToken textarea,
#redeemToken input[type="text"], 
#redeemToken input[type="password"] {
	display: block;
	width: 100%;
}
#tokenRedeemRow input[type="text"],
#tokenRedeemRow input[type="submit"] { 
	display: inline-block; 
}
#tokenRedeemRow input[type="text"] { 
	width: 15em; 
}
.page-tokens .token-form {
    text-align: right;
    padding: .5em;
}
.page-tokens #recaptcha_table { 
	width: 100%; 
}
.page-tokens .recaptchatable .recaptcha_image_cell {
	width: 68.636363636% !important;
	height: auto !important;
}
.page-tokens .recaptchatable #recaptcha_image,
.page-tokens .recaptchatable #recaptcha_image #recaptcha_challenge_image { 
	width: 100% !important;
	height: auto !important;
}
.page-tokens .recaptchatable #recaptcha_response_field { 
	width: 100% !important;
}

@media screen and (max-width: $breakpoint-med) {
	#redeemToken form {
		width: 70%;
	}
}
@media screen and (max-width: $breakpoint-sm) {
	#redeemToken form {
		width: 100%;
	}
	#tokenRedeemRow input[type="text"] { 
		display: block;
		width: 100%;
		margin-bottom: 1em;
	}
}

/* when login module is displayed within a redeem token page */
#redeemToken #loginPanel {
	float: none;
	margin: 0;
	padding: 0;
	width: 100%;
}
#redeemToken #loginPanel h2,
#redeemToken #loginPanel #loginwrapper2 {
	display: none;
}
#redeemToken #loginPanel #loginwrapper1,
#redeemToken #loginPanel #loginwrapper2 {
	float: none;
	margin: 0;
}
#redeemToken #loginPanel form {
	float: none;
}
#redeemToken #loginPanel input[type="text"],
#redeemToken #loginPanel input[type="password"] {
	display: block;
	width: 100%;
}