/*

TABLE OF CONTENTS

	1. DEVICE TILES
	2. CARD TAP COMPONENT
	3. CARD TAP COMPONENT SCREEN - PAIRING
	4. CARD TAP SETUP
	5. VIRUTAL CARD
	6. APP AND DOWNLOAD ICONS
*/

/***************************************************************************
    1. DEVICE TILES
*/
.device-option {
	/*width: 100%;*/
	max-width: 375px;
	float: none;
	margin-bottom: 15px;
	font-size: 18px;
}

.radius-3 {
	border-radius: 3px;
}

.btn-device {
	background-color: #ffffff;
	border: 2px #003366 solid;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
	min-height: 70px;
	overflow: hidden;
	position: relative;
	padding-right: 5px;
	cursor: pointer;
	border-radius: 5px;
}

.btn-device:focus {
	outline: 4px solid #3B99FC;
    outline-offset: 1px;
}

.tile-subtext {
	margin-bottom: 10px;
	padding-left: 50px;
	font-size: 0.8em;
	line-height: 1.1em;
}

.last-used {
	font-size: 13px;
	margin-left: 10px;
}

.btn-device-content {
	min-height: 70px;
	display: table;
}

.btn-device-content h2 {
	display: table-cell;
	padding-left: 50px;
	margin: 0px;
}

.btn-device h2 {
	margin: 21px 0px 0px 50px;
	font-size: 1.0em;
	font-weight: 600;
	text-align: left;
	vertical-align: middle;
	word-wrap: break-word;
	color: #003366;
}

.btn-device p {
	margin: 0px 0px 0px 50px;
	font-size: 0.7em;
	font-weight: 400;
	text-align: left;
	vertical-align: middle;
	word-wrap: break-word;
	color: #003366;
}

.device-image {
	background-repeat: no-repeat;
	background-size: 40px;
	background-position: 5px center;
	position: absolute;
	top: 0;
	left: 0;
	width: 60px;
	height: 65px;
}

.device-usb {
	background-image: url('../images/cardtap/CardReader_USB_v5.png');
}

.device-counter {
	background-image: url('../images/cardtap/CardReader_Counter_v5.png');
}

.device-mobile {
	background-image: url('../images/cardtap/MobileCard.png');
}

.device-mobile-local {
	background-image: url('../images/cardtap/MobileCard_OnMobile.png');
	background-size: 40px;
}
.bcwallet {
	background-image: url('../images/cardtap/wallet_app_icon.png');
}

.bcwallet-local {
	background-image: url('../images/cardtap/wallet_app_icon.png');
	background-size: 40px;
}
.device-bcsc-lookup {
    background-image: url('../images/cardtap/Lookup.png');
}

.device-virtual {
	background-image: url('../images/cardtap/Virtual.png');
	background-size: 40px;
}

.device-nfc {
	background-image: url('../images/cardtap/CardReader_Mobile_v7.png');
	background-size: 45px;
}

.device-nfc-local {
	background-image: url('../images/cardtap/CardReader_OnMobile_v7.png');
	background-size: 45px;
}

.device-username-password-token {
	background-image: url('../images/cardtap/Token.png');
	background-size: 40px;
}

.device-saved-mobile {
	background-image:
		url('../images/cardtap/CardReader_Mobile_Saved_v5.png');
	height: 80px !important;
	background-size: 45px;
	background-position: top center;
	background-repeat: no-repeat;
}

.deviceRemoval {
	cursor: pointer;
	height: 30px;
	width: 100%;
	vertical-align: middle;
	font-size: 13px;
	line-height: 30px;
	padding-left: 5px;
	border-top: solid 1px transparent;
	position: absolute;
	bottom: 0;
}

.deviceScreenTitle {
	margin-top: 0px;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2em;
}

.rememberedDeviceTileLabel h2 {
	min-height: 0px;
	padding: 0px;
	margin: 7px 20px 2px 10px;
	line-height: 1em;
}

/*clearfix after tiles menus */
#device-selection-div:after, #ondevice-submenu-selection-div:after {
	content: "";
	display: table;
	clear: both;
}

@media ( max-width : 576px) {
	.device-option {
		width: 100%;
		max-width: 100%;
	}
}

.device-remove {
	border-top: solid 1px transparent;
	position: absolute;
	top: 0;
	right: 0;
	text-align: center;
	width: 25px;
}

.device-remove-confirm {
	border-top: solid 1px transparent;
	position: absolute;
	top: 0;
	left: 0;
	min-height: 150px;
	width: 100%;
	line-height: 1em;
	text-align: center;
}

.device-remove {
	cursor: pointer;
	height: 30px;
	font-size: 13px;
	line-height: 30px;
	background-color: #8b8b8b;
	color: #ffffff;
}

.device-remove:hover {
	background-color: #666;
}

.device-remove>span {
	padding-left: 5px;
}

.device-remove-confirm {
	background-color: #333;
	height: 135px;
}

.device-remove-confirm-internal {
	padding: 10px;
}

.device-remove-confirm>.device-remove-confirm-internal>.btn-sm {
	padding: 5px 9px;
	color: #333;
    background-color: #fff;
    border-color: #ccc;
}

.device-remove-confirm>.device-remove-confirm-internal>label {
	display: block;
	color: #ffffff;
	font-size: 0.8em;
	overflow-x: hidden;
	white-space: nowrap;
}

.device-remove-confirm>.device-remove-confirm-internal>a.cancel {
	margin-left: 5px;
	color: #f7f7f7 !important;
}

#login-options-toggle:not(.collapsed) span.login-options-hidden {
	display: none;
}

#login-options-toggle:not(.collapsed) span.login-options-shown {
	display: inline;
}

#login-options-toggle.collapsed span.login-options-hidden {
	display: inline;
}

#login-options-toggle.collapsed span.login-options-shown {
	display: none;
}

.option-section:not(.collapsed) span.setup-option-show {
	display: none;
}

.option-section:not(.collapsed) span.setup-option-hide {
	display: inline;
}

.option-section.collapsed span.setup-option-show {
	display: inline;
}

.option-section.collapsed span.setup-option-hide {
	display: none;
}

/***************************************************************************
    2. CARD TAP COMPONENT
*/
.cardtap-section {
	padding: 0px;
	margin-bottom: 60px;
}

@media screen and (min-width: 767px) {
	.cardtap-section {
		border: solid 1px #D7D8D8;
		padding: 25px;
		margin-bottom: 25px;
		border-radius: 5px 5px 0px 0px;
	}
}

.section-switch-options {
	border-top: solid 1px #D7D8D8;
	padding-top: 15px;
}

@media screen and (min-width: 767px) {
	.section-switch-options {
		padding-top: 25px;
	}
}

#cardtapErrorDiv:empty {
	display: none;
}

#loading-div, #cardtapErrorDiv {
	padding: 0px;
	margin-bottom: 60px;
}

@media screen and (min-width: 767px) {
	#loading-div, #cardtapErrorDiv {
		border: solid 1px #D7D8D8;
		padding: 25px;
		margin-bottom: 25px;
		border-radius: 5px 5px 0px 0px;
	}
}

#internal-cardtap-panel:empty {
	display: none;
}

.login-attributes {
	font-size: 0.9em;
	margin-bottom: 10px;
}

@media screen and (max-width: 766px) {
	.login-attributes {
		margin-bottom: 40px;
	}
}

/***************************************************************************
    3. CARD TAP COMPONENT SCREEN - PAIRING
*/
.pairing-code {
	margin-top: 10px;
	text-align: center;
	width: 245px;
	border: 1px black solid;
	height: 80px;
}

.code-text {
	font-size: 2.0em;
	line-height: 25px;
	margin-top: 25px;
	letter-spacing: 0.2px;
}

.code-text a {
	text-decoration: none;
	color: #494949;
}

.code-label {
	margin-top: 18px;
	background-color: #ffffff;
	width: 135px;
	margin-left: 55px;
}

/***************************************************************************
    4. CARD TAP SETUP
*/
.start-options>.start-options-horizontal-divider {
	overflow: hidden;
	text-align: center;
	margin-bottom: 30px;
	width: 100%;
	color: #ccc;
	font-size: 0.8em;
}

.start-options>.start-options-horizontal-divider:before, .start-options>.start-options-horizontal-divider:after
	{
	background-color: #ccc;
	content: "";
	display: inline-block;
	height: 1px;
	position: relative;
	vertical-align: middle;
	width: 45%;
}

.start-options-vertical-divider {
	display: none;
}

@media ( min-width : 992px) {
	.start-options {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: nowrap;
	}
	.start-options>.first-time {
		width: 45.5%;
	}
	.start-options>.returning {
		width: 45.5%;
	}
	.start-options>.start-options-divider {
		width: 9%;
	}
	.start-options>.start-options-horizontal-divider {
		display: none;
	}
	.start-options-vertical-divider {
		display: block;
	}
	.vertical-line-wrapper {
		position: relative;
		width: 25px;
		height: 300px;
		margin: 10px;
	}
	.line {
		position: absolute;
		left: 49%;
		top: 0;
		bottom: 0;
		width: 1px;
		background: #ccc;
		z-index: 1;
	}
	.wordwrapper {
		text-align: center;
		height: 12px;
		position: absolute;
		left: 0;
		right: 0;
		top: 50%;
		margin-top: -12px;
		z-index: 2;
	}
	.word {
		color: #ccc;
		text-transform: uppercase;
		letter-spacing: 1px;
		padding: 3px;
		font: bold 12px arial, sans-serif;
		background: #fff;
	}
}

/***************************************************************************
    5. VIRUTAL CARD
*/
.actions {
	margin-top: 25px;
	margin-bottom: 20px;
}

.mockDivWidget {
	overflow: auto;
	display: none;
	margin-top: 15px;
}

div#virtualCardTapDiv.panel-body {
	padding: 0px;
}

a#virtual-card-help-content-link {
	font-size: 80%;
}

/***************************************************************************
    6. APP AND DOWNLOAD ICONS
*/
.app-icon {
	background-repeat: no-repeat;
	background-size: 48px;
	height: 50px;
	width: 50px;
}

.app-icon-bcsc {
	background-image: url('../images/cardtap/ic_launcher_bcsc_48.png?v=2.8.2');
}

.app-icon-nfc {
	background-image: url('../images/cardtap/ic_launcher_bcsc_nfc_48.png');
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) , only screen and (
		min--moz-device-pixel-ratio: 2) , only screen and (
		-o-min-device-pixel-ratio: 2/1) , only screen and (
		min-device-pixel-ratio: 2) , only screen and ( min-resolution: 192dpi)
		, only screen and ( min-resolution: 2dppx) {
	.app-icon-bcsc {
		background-image: url('../images/cardtap/ic_launcher_bcsc_96.png?v=2.8.2');
	}
	.app-icon-nfc {
		background-image: url('../images/cardtap/ic_launcher_bcsc_nfc_96.png');
	}
}

.download-mac, .download-windows {
	background-repeat: no-repeat;
	background-position: left top;
	padding-left: 30px;
	min-height: 20px;
	display: inline-block;
	line-height: 25px;
	text-decoration: underline;
}

.download-mac {
	background-image: url('../images/cardtap/mac_original.png');
	background-size: 20px;
}

.download-windows {
	background-image: url('../images/cardtap/windows.png');
	background-size: 20px;
}

.download-size {
	display: inline-block;
	margin-left: 5px;
	vertical-align: middle;
}

a.download::after {
	font-family: 'FontAwesome';
	content: " \f019";
}

.app-store {
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 135px;
	display: block;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	height: 60px;
	width: 200px;
}

.app-store-android {
	background-image: url('../images/cardtap/app_store_android.png');
}

.app-store-ios {
	background-image: url('../images/cardtap/app_store_ios.png');
}

/***************************************************************************
    4. PROGRESS INDICATOR
*/
.spin-block {
	display: table;
}

.spin-animation {
	display: table-cell;
	background: url('../images/spinner.gif');
	background-position: left;
	background-repeat: no-repeat;
	background-size: 32px;
	height: 32px;
	width: 32px;
}

.spin-text {
	display: table-cell;
	vertical-align: middle;
	padding-left: 5px;
}

.help-device-notifications {
	background: url('../images/cardtap/login-notification@1x.png') no-repeat top left / 165px 326px;
	height: 326px;
	width: 165px;
}

@media only screen and (min--moz-device-pixel-ration: 1.25), 
	   only screen and (-o-min-device-pixel-ration: 1.25/1), 
	   only screen and (-webkit-min-device-pixel-ration: 1.25), 
	   only screen and (min-device-pixel-ration: 1.25),
	   only screen and (min-resolution: 200dpi),
	   only screen and (min-resolution: 1.25dppx) {
	.help-device-notifications {
		background: url('../images/cardtap/login-notification@2x.png') no-repeat top left / 165px 326px;
		height: 326px;
		width: 165px;
	}
}