@import 'css/master/settings/settings';

/** Used for BSD Credit cards (multi credit cards, cc list, add/edit/delete cc's, etc) */
#m02.credit_card_section input[type="text"],
#m02.credit_card_section input[type="password"],
#m02.credit_card_section select,
.credit_card_section input[type="text"],
.credit_card_section input[type="password"],
.credit_card_section select,
#creditCardPermType/*select box for types*/ {
	font-size: 12px;
	height: 27px;
	margin: 1px 8px 0 0;
	padding-left: 2px;
}

.actions {/*TODO Should this reside in bsd -> account.css?*/
	float: right;
	margin: 12px;
}

/******************
Credit Card List page
******************/
/******************
Search/Pagination
******************/
#m02.credit_card_section .pagination .nav_records {
	margin: 12px 0;
	padding: 0;
}

#m02.credit_card_section .pagination li.next a {
	background: url(//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/od/new/arrows.png) no-repeat 100% -1296px;
}

#m02.credit_card_section .pagination li.prev a {
	  background: url(//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/od/new/arrows.png) no-repeat 0 -1261px;
}

/* search results text*/
#m02.credit_card_section > .search_results {
	background-color: #e7e7e7;
	clear: both;
	height: 14px;
	margin: 12px 0;
	padding: 8px 12px;
}

#m02.credit_card_section > .search_results h2 {
	color: #111111;
	font-size: 14px;
	font-weight: normal;
	float: left;
}
/* End search/pagination */

#ccListSearchForm {
	width: auto;
}

span.add {
	background-color: #1e5a99;
	border-radius: 8px;
	color: #fff;
	font: bold 14px/14px Arial;
	margin-right: 4px;
	padding-right: 4px;
	padding-left: 4px;
	text-align: center;
	width: 4px
}

.add_credit_card {
	margin-left: 246px;
	width: 39%;
}

#ccListSearch {
	width: 170px;
}

.cc_list > p {
	margin-top: 8px;
}

.cc_list table{
	border: 0;
	margin: 0;
	padding: 0;
	width: 100%;
}

.cc_list tr {
	border-bottom: 1px solid #ccc;
}

.cc_list tr.first {
	border-bottom: 0;
}

.cc_list th {
	border: 0;
	font-weight: bold;
	padding: 0 8px;
	text-align: left;
}

.cc_list td,
.edit_row td  {
	padding: 2px 8px;
	position: relative;
	text-align: left;
	top: 2px;/*To push background logo img down*/
}

#ccGroupList table,
#manageGroupCCSection {
	margin-top: 12px;
}

#ccGroupListForm td.last {
	text-align: right;
	min-width: 75px;
}

.cc_list td.cc_alias,
.cc_list th.cc_alias,
.cc_list td.cc_created_by,
.cc_list th.cc_created_by {
	width: 20%;
	word-break: break-all;
}

.cc_logo {
	background: url('https://media.officedepot.com/image/upload/f_auto,q_auto/v1657558378/gtools/images/common/creditcard/accepted-ccs-new') 100px no-repeat;
	height: 34px;
	width: 60px;
}

.cc_logo.vs {
	background-position: 6px 0px;
	left: 12px;
	position: relative;
}

.cc_logo.mc {
	background-position: -60px 0px;
	left: 4px;
}

.cc_logo.am {
	background-position: -120px 0px;
	left: 6px;
}

.cc_logo.ds {
	background-position: -182px 0px;
	position: relative;
	right: 2px;
}

.cc_logo.sr {
	background-position: -255px 0px;
	position: relative;
	right: 4px;
}

.cc_logo.unknown {
	background-position: -330px 0px;
	position: relative;
	right: 4px;
}

.add_edit_cc_logo.cc_logo {
	bottom: 4px;
}

.add_edit_cc_logo.cc_logo.sr {
	background-position: -270px 0px;
}

.add_edit_cc_logo.cc_logo.ds {
	background-position: -197px 0px;
}

/* Delete Dialog */
#deleteCcDialog,
#addGroupEmptyCc,
#ccNotPrivateNoteDialog,
#ccGroupListForm td,
#ccGroupList td {
	padding: 12px;
}

#deleteCcDialog h3 {
	margin: 15px 0 0;
}

#deleteCcDialog .note #addGroupEmptyCc .note {
	font-size: 13px;
}

#deleteCcDialog .cc_alias {
	font-size: 14px;
	font-weight: bold;
	margin-top: 12px;
}

#deleteCcDialog .cc_logo {
	float: left;
	height: 34px;
	width: 57px;
}

/* Card logos in delete dialog need to align left */
#deleteCcDialog .cc_logo.vs {
	background-position: 0px 0px;
	left: 0;
	position: relative;
}

#deleteCcDialog .cc_logo.mc {
	background-position: -75px 0px;

}

#deleteCcDialog .cc_logo.am {
	background-position: -144px 0px;
}

#deleteCcDialog .cc_logo.ds {
	background-position: -202px 0px;
	position: relative;
	right: 0;
}

#deleteCcDialog .cc_logo.sr {
	background-position: -278px 0px;
	position: relative;
	right: 0;
}
#deleteCcDialog .cc_logo.unknown {
	background-position: -342px 0px;
}

#deleteCcDialog .cc_type_exp {
	font-size: 13px;
	margin-left: 80px;
	padding-top: 10px;
}

/** Profile: CC List **/
.default_card {
	background-color: #b9e9c9;
	color: #000;
	font-size: 11px;
	font-weight: bold;
	padding: 2px;
	margin-right: 2px;
}

.default_card:hover {
	background-color: #b9e9c9;
	color: #000;
	cursor: default;
	font-size: 11px;
	font-weight: bold;
	padding: 2px;
	margin-right: 2px;
}

/******************
Edit payment page: shared group cc section
******************/
.expand_link {
	background: url(//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/od/new/arrows.png) no-repeat 100% -1296px;
	margin-right: 20px;
  	padding-right: 15px;
}

.expand_link.is_expanded {
	background: url(//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/od/new/arrows.png) no-repeat 100% -420px
}

/******************
Add/Edit Credit Card page
******************/
#addGroupCreditCard label.db {
	line-height: 22px;
}

.credit_card_add_edit_form .info {
	padding-left: 8px;
}

#alias {
	width: 380px;
}

#creditCardNumber,
.credit_card_number_input {
	width: 180px;
}

.credit_card_container {
	width: 190px
}

.cards_accepted {
	bottom: 10px;
	margin-right: 12px;
	position: relative;
}

#creditCardFields {
	.cards_accepted {
		bottom: -8px;
	}

	label.error {
		//override master.css
		display: block;
		&[for="paymentFormInfo.creditCardExpMonth"] {
			clear: left;
		}
	}
}

#ccGroups {
	-moz-box-shadow: 0px -1px 0px #787878;
	-webkit-box-shadow: 0px -1px 0px #787878;
	box-shadow: 0px -1px 0px #787878;
	border: 1px solid #ccc;
	height: 160px;
	margin-top: 8px;
	overflow-y: scroll;
	width: 380px;
}

#ccGroups input[type="checkbox"],
#selectInfo input[type="checkbox"] {
	position: relative;
	top: 2px;
}

#ccGroups .creditCardGroup input[type="checkbox"] {
	top: 0px
}

#ccGroups .is_selected,
#ccGroups .select_all:hover {
	background-color: #ecf6ff;
}

#ccGroups label {
	padding: 4px;
	width: 100%
}

.credit_card_add_edit_form .actions {
	float: none;
	margin-left: 258px;
}

.credit_card_add_edit_form input.error {
	border: 1px solid #f00;/*Global gets overwritten by border styles above, need this here*/
}

/******************
Add Credit Card Form
(Payment info profile page)
******************/
.credit_card_add_edit_form {
	margin: 12px 0;
	padding: 12px 0;
}

.credit_card_add_edit_form .cc_add_wrapper {
	background-color: #f2f2f2;
	padding: 12px;
}

#editPanel .credit_card_add_edit_form .cc_add_wrapper {
	padding-left:100px
}
#addCreditCardGroup.cc_add_wrapper {
	padding: 0;
}

#addGroupCreditCard {
	#addCcLink {
		position: relative;
		top: 30px;
		z-index: 80;

		-webkit-transition: top .5s;
		transition: top .5s;

		&.disabled_link {
			top: 0;
			-webkit-transition: top .5s;
			transition: top .5s;
		}
	}
}

/* No need to float the sections here*/
.credit_card_add_edit_form > .cc_add_wrapper .section {
	float: none;
}

.credit_card_add_edit_form .checkboxes label,
.credit_card_add_edit_form .required {
	margin-bottom: 8px;
}

/* Credit Card Groups */
#addCreditCardGroupDiv {
	background: #f2f2f2;
	float: left;
	margin-bottom: 12px;
	padding: 12px 0;
}

#addGroupCreditCardLink {
	position: relative;
	top: 30px;
}

.disabled_link {
	color: #72777C;
	margin-bottom: 6px;
	display: inline-block;
	pointer-events: none;
   	cursor: default;
   	top: 0;
}

.disabled_link:hover {
	color: #72777C;
}

.disabled_link span.add {
	background-color: #72777C;
}

.credit_card_section .summary_info p {
	margin: 1em 0
}

#creditCardGroupId {
	border: 1px solid #ccc;
	height: 150px;
	margin-top: 6px;
	overflow-y: scroll;
}

#selectAll {
	margin: 4px 7px 0 7px;
	vertical-align: top;
}

//Had to specify id to make rule stronger than form_fields
#expMonth,
#expMonthMulti,
.exp_month {
	width: 50px;
}
#expYear,
#expYearMulti,
.exp_year {
	width: auto;
}

.payment_exp_date{
	width: 60px;
	height:22px;
}

#alias,
.alias_input {/*TODO Replace all styles */
	width: 300px;
}

.select_info {
	width: 60%;
}

.select_info p {
	margin: 1em 0;
}
.select_info label {
	display: inline-block;
	margin-top: 4px;
}

.credit_card_section {
	.error_text {
		display: block;

		&.hide {
			display: none !important;
		}
	}
}

/******************
Edit CC row in
payment info page
******************/
.edit_row {
	background-color: #f2f2f2;
	border-bottom: 1px solid #ccc;
	padding: 0;
}

/******************
Credit card/PLCC tabs with 9/2016 iframe [*NEW]
******************/
label {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

//TODO Move somewhere global, maybe bsd forms.scss. New styles/styledguide, net yet global in bsd. merging some in with current bsd styles
.form_field {
  > input,
  > select {
	box-shadow: none;
	height: 20px;
  }

  > select {
	height: 30px;
	margin: 0 0 0 $commonPadding*3;
	-webkit-appearance: menulist;

	&:first-of-type {
	  margin: 0 -4px;
	}
  }
}

.cc_form_container {
	.cc_icons {
		&.show_for_cc {
			margin-top: 30px;
		}
	}
	.checkboxes {
		label {
			display: inline-block;
		}
	}
}


#editPanel {
	#addCcContainerMulti {
		.cc_icons {
			&.show_for_cc {
				margin-top: 30px;
			}
		}
	}
	.cc_icons {
		&.show_for_cc {
			margin-top: 6px;
		}
	}
}

.cc_form_container {
	background-color: $lightBlue;
	border: 1px solid $blue;
	padding: $commonPadding*2 $commonPadding*4;

	.cc_num_input,
	.alias_input {
	  width: 230px;
	}

	label.error {
		clear: both;
	}
}

.cc_card_img {
	background: url('//media.officedepot.com/image/upload/v1661367083/gtools/images/common/creditcard/vertical_CC_logos_2.png') 100px no-repeat;
	bottom: 4px;
	float: left;
	height: 50px;
	padding-left: 76px;
	margin-left: 0;
	position: relative;
	right: 18px;
	@include transform(scale(.5, .4));

	&.vs {
	  background-position: 0 0;
	}
	&.mc {
	  background-position: 0 -67px;
	}
	&.ds {
	  background-position: 0 -135px;
	}
	&.am {
	  background-position: 0 -203px;
	}
	&.sr {
	  background-position: 0 -270px;
	}
}

#creditCardCvvTooltip {
	 width: 495px;
 }

#subscriptionCreditCard {
	.form_field {
		> select {
			&:first-of-type {
				margin: 0 -5px;
			}
		}
	}
}


#removeCreditCard {
	line-height: 16px;
	height: 16px;
}

#creditCardMessage {
	p {
		padding-bottom: 4px;
		line-height: 20px;
	}
}

#ccList {
	.default_card_label {
		display:none;
	}
	.disable_links {
		pointer-events: none;
		touch-action: none;
		a {
			pointer-events: none;
			cursor : pointer;
			color: $gray;
		}
	}
	.edit_row {
		background: none;
	}
	.cc_form_container {
		.actions {
			float: right;
		}

	}
}

.iframe_font {
	.cc_fields {
		@include font-size($baseFontSize);
	}
}