/******************************************************************
Site Name:
Author:

Stylesheet: Credit Card Styles for Gravity Forms

******************************************************************/

.gform_card_icon_container {
	margin: 8px 0 6px 0;
	height: 32px;
}

div.gform_card_icon {
	margin-right: 4px;
	text-indent: -9000px;
	background-image: url("#{$plugins-path}gravityforms/images/gf-creditcard-icons.png");
	background-repeat: no-repeat;
	width: 36px;
	height: 32px;
	float: left;
}

.gform_card_icon_container.gform_card_icon_style1 div.gform_card_icon.gform_card_icon_visa {
	background-position: 0 0;
}

.gform_card_icon_container.gform_card_icon_style1 div.gform_card_icon.gform_card_icon_selected.gform_card_icon_visa {
	background-position: 0 -32px;
}

.gform_card_icon_container.gform_card_icon_style1 div.gform_card_icon.gform_card_icon_inactive.gform_card_icon_visa {
	background-position: 0 -64px;
}

.gform_card_icon_container.gform_card_icon_style1 div.gform_card_icon.gform_card_icon_mastercard {
	background-position: -36px 0;
}

.gform_card_icon_container.gform_card_icon_style1 div.gform_card_icon.gform_card_icon_selected.gform_card_icon_mastercard {
	background-position: -36px -32px;
}

.gform_card_icon_container.gform_card_icon_style1 div.gform_card_icon.gform_card_icon_inactive.gform_card_icon_mastercard {
	background-position: -36px -64px;
}

.gform_card_icon_container.gform_card_icon_style1 div.gform_card_icon.gform_card_icon_amex {
	background-position: -72px 0;
}

.gform_card_icon_container.gform_card_icon_style1 div.gform_card_icon.gform_card_icon_selected.gform_card_icon_amex {
	background-position: -72px -32px;
}

.gform_card_icon_container.gform_card_icon_style1 div.gform_card_icon.gform_card_icon_inactive.gform_card_icon_amex {
	background-position: -72px -64px;
}

.gform_card_icon_container.gform_card_icon_style1 div.gform_card_icon.gform_card_icon_discover {
	background-position: -108px 0;
}

.gform_card_icon_container.gform_card_icon_style1 div.gform_card_icon.gform_card_icon_selected.gform_card_icon_discover {
	background-position: -108px -32px;
}

.gform_card_icon_container.gform_card_icon_style1 div.gform_card_icon.gform_card_icon_inactive.gform_card_icon_discover {
	background-position: -108px -64px;
}

.gform_card_icon_container.gform_card_icon_style1 div.gform_card_icon.gform_card_icon_maestro {
	background-position: -144px 0;
}

.gform_wrapper .gform_card_icon_container.gform_card_icon_style1 div.gform_card_icon.gform_card_icon_selected.gform_card_icon_maestro {
	background-position: -144px -32px;
}

.gform_card_icon_container.gform_card_icon_style1 div.gform_card_icon.gform_card_icon_inactive.gform_card_icon_maestro {
	background-position: -144px -64px;
}

.gform_card_icon_container.gform_card_icon_style1 div.gform_card_icon.gform_card_icon_jcb {
	background-position: -180px 0;
}

.gform_card_icon_container.gform_card_icon_style1 div.gform_card_icon.gform_card_icon_selected.gform_card_icon_jcb {
	background-position: -180px -32px;
}

.gform_card_icon_container.gform_card_icon_style1 div.gform_card_icon.gform_card_icon_inactive.gform_card_icon_jcb {
	background-position: -180px -64px;
}

.gform_card_icon_container.gform_card_icon_style2 div.gform_card_icon.gform_card_icon_visa {
	background-position: 0 -192px;
}

.gform_card_icon_container.gform_card_icon_style2 div.gform_card_icon.gform_card_icon_selected.gform_card_icon_visa {
	background-position: 0 -224px;
}

.gform_card_icon_container.gform_card_icon_style2 div.gform_card_icon.gform_card_icon_inactive.gform_card_icon_visa {
	background-position: 0 -256px;
}

.gform_card_icon_container.gform_card_icon_style2 div.gform_card_icon.gform_card_icon_mastercard {
	background-position: -36px -192px;
}

.gform_card_icon_container.gform_card_icon_style2 div.gform_card_icon.gform_card_icon_selected.gform_card_icon_mastercard {
	background-position: -36px -224px;
}

.gform_card_icon_container.gform_card_icon_style2 div.gform_card_icon.gform_card_icon_inactive.gform_card_icon_mastercard {
	background-position: -36px -256px;
}

.gform_card_icon_container.gform_card_icon_style2 div.gform_card_icon.gform_card_icon_amex {
	background-position: -72px -192px;
}

.gform_card_icon_container.gform_card_icon_style2 div.gform_card_icon.gform_card_icon_selected.gform_card_icon_amex {
	background-position: -72px -224px;
}

.gform_card_icon_container.gform_card_icon_style2 div.gform_card_icon.gform_card_icon_inactive.gform_card_icon_amex {
	background-position: -72px -256px;
}

.gform_card_icon_container.gform_card_icon_style2 div.gform_card_icon.gform_card_icon_discover {
	background-position: -108px -192px;
}

.gform_card_icon_container.gform_card_icon_style2 div.gform_card_icon.gform_card_icon_selected.gform_card_icon_discover {
	background-position: -108px -224px;
}

.gform_card_icon_container.gform_card_icon_style2 div.gform_card_icon.gform_card_icon_inactive.gform_card_icon_discover {
	background-position: -108px -256px;
}

.gform_card_icon_container.gform_card_icon_style2 div.gform_card_icon.gform_card_icon_maestro {
	background-position: -144px -192px;
}

.gform_card_icon_container.gform_card_icon_style2 div.gform_card_icon.gform_card_icon_selected.gform_card_icon_maestro {
	background-position: -144px -224px;
}

.gform_card_icon_container.gform_card_icon_style2 div.gform_card_icon.gform_card_icon_inactive.gform_card_icon_maestro {
	background-position: -144px -256px;
}

.gform_card_icon_container.gform_card_icon_style2 div.gform_card_icon.gform_card_icon_jcb {
	background-position: -180px -192px;
}

.gform_card_icon_container.gform_card_icon_style2 div.gform_card_icon.gform_card_icon_selected.gform_card_icon_jcb {
	background-position: -180px -224px;
}

.gform_card_icon_container.gform_card_icon_style2 div.gform_card_icon.gform_card_icon_inactive.gform_card_icon_jcb {
	background-position: -180px -256px;
}

// CREDIT CARD FIELDS

.gform_card_icon_container input[type="radio"]#gform_payment_method_creditcard {
	float: left;
	position: relative;
	top: 4px !important;
}

.ginput_complex .ginput_cardinfo_right {
	min-width: 85px !important;
}

.ginput_complex .ginput_cardinfo_left {
	display: block;
	margin-bottom: 0.5em;
}

.ginput_complex .ginput_cardinfo_left label,
.ginput_complex .ginput_cardinfo_right label {
	white-space: nowrap !important;
}

.ginput_complex select.ginput_card_expiration.ginput_card_expiration_month,
.ginput_complex select.ginput_card_expiration.ginput_card_expiration_month + .select2-container,
.ginput_complex select.ginput_card_expiration.ginput_card_expiration_year,
.ginput_complex select.ginput_card_expiration.ginput_card_expiration_year + .select2-container {
	width: 49% !important;
	display: inline-block;
}

.ginput_complex select.ginput_card_expiration.ginput_card_expiration_year,
.ginput_complex select.ginput_card_expiration.ginput_card_expiration_year + .select2-container {
	float: right;
}

.ginput_complex span.ginput_cardextras {
	display: block;
	overflow: hidden;
}

.ginput_complex .ginput_cardinfo_left span.ginput_card_expiration_container {
	position: relative;
	display: block;
	min-width: 160px !important;
}

.ginput_complex .ginput_cardinfo_left select.ginput_card_expiration.ginput_card_expiration_month,
.ginput_complex .ginput_cardinfo_left select.ginput_card_expiration.ginput_card_expiration_month + .select2-container {
	margin-right: 4px;
}

.ginput_complex .ginput_cardinfo_right input.ginput_card_security_code {
	max-width: 49% !important;
}

.ginput_complex .ginput_cardinfo_right span.ginput_card_security_code_icon {
	width: 32px;
	height: 23px;
	background-image: url("#{$plugins-path}gravityforms/images/gf-creditcard-icons.png");
	background-repeat: no-repeat;
	background-position: 0 -128px;
	position: relative;
	top: -1px;
	left: 6px;
	display: inline-block;
}

//
// MEDIA QUERIES
//

@include media-breakpoint-up('md') {
	
	.ginput_complex .ginput_cardinfo_left,
	.ginput_complex .ginput_cardinfo_right {
		min-height: 43px;
		position: relative;
		float: left;
	}

	.ginput_complex .ginput_cardinfo_left {
		width: 50%;
		margin-right: 1%;
		margin-bottom: 0;
		max-width: 400px;
	}
	
}
