/**************************************************************************
Name:         form.css
Description:  Front end form styling.
Date Created: 08/08/2017 by Jenna Hart
Modified:
**************************************************************************/

form legend
{
	color:		 #999;
	font-family: MyriadProBold, Helvetica, sans-serif;
	font-size:	 20px;
	padding:     30px 0 10px;
	text-align:  left;
}

.simpleForm label.textLabel
{
	color: #666;
	display: block;
	margin-top: 8px;
}

input, select, textarea {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
			box-sizing: border-box;
}

input[type="text"], 
input[type="password"], 
input[type="dateField"],
input[type="number"],
/*input.datefieldinput,*/
select,
textarea/*,
div.resumeStores,
div.resumePosition*/
{
	border: 	   1px solid #999;
	border-radius: 5px;
	font-family:   MyriadProRegular, Helvetica, sans-serif;
	font-size: 	   16px;
	height: 	   40px;
	margin:  	   8px 0 2px 0;
	outline: 	   none;
	padding: 	   7px;
	width:  	   100%;
}

input.pointer
{
	cursor: pointer;
}

.simpleForm input.outerLabel[type="text"], 
.simpleForm input.outerLabel[type="password"], 
.simpleForm input.outerLabel[type="dateField"],
.simpleForm input.outerLabel[type="number"],
.simpleForm select.outerLabel,
.simpleForm textarea.outerLabel,
.simpleForm .outerLabel,
.simpleForm div.collectionDateContainer input[type="text"]
{
	margin-top: 2px;
}

textarea
{
	resize: vertical;
}

select
{
	padding-right: 2px;
}

select:focus
{
	font-size: 16px;
}

select.opt.italic 		 { font-style: italic; }
select.opt.italic option { font-style: normal; }
select.opt option.italic { font-style: italic; }

select.hasPlaceholder 					 { color: #999; }
select.hasPlaceholder option 			 { color: #000; }
select option.placeholder,
select.hasPlaceholder option.placeholder { color: #999; }

.simpleForm .pickupTimeContainer select 
{
	float: none;
	width: auto;
}

input[type="file"]
{
	padding: 0;
}

input[type="ckeckbox"]
{
	outline: none;
}

input[type="radio"]
{
	float: 			left;
	margin-top: 	12px;
	outline: 		none;
	vertical-align: top;
}

input[type="radio"]+label
{
	display: block;
	margin:  0 0 2px 25px;
	padding-top: 10px;

	width: 100%;
	width: -webkit-calc( 100% - 30px );
	width:    -moz-calc( 100% - 30px );
	width: 		   calc( 100% - 30px );
}

.resumePosition input[type="radio"]
{
	margin-top: 10px;
}

fieldset.controls
{
	clear:      both;
	display:    block;
	margin:     30px 0;
	padding:    0;
	position:   relative;
	width:      auto;
}

fieldset.controls a 
{
	outline: none;
}

fieldset.controls input,
form input[type="submit"],
input.submitSearch
{
	max-width: 350px;
	outline:   none;
	width: 	   100%;
}

form input[type="submit"].span_1_4
{
	width: 25%;
}

form input[type="submit"].go
{
	height: 40px;
	line-height: 40px;
	margin-left: 3px;
	width: 44px;
}

fieldset.controls a 
{
	display: 	inline-block;
	margin-top: 15px;
}

.modal fieldset.controls
{
	margin: 10px 0 25px 0;
}

.modal fieldset.controls a 
{
	text-decoration: none;
}

.modal fieldset.controls a.cancel:hover 
{
	color: #000;
	text-decoration: underline;
}

input.error, 
select.error, 
textarea.error, 
div.resumeStores.error, 
div.resumePosition.error
{
	border: solid 1px #c00;
}

.margin_5 {
	margin-left: 5%;
}

.btn_15 {
	width: 15% !important;
}
/**************************************************************************
Cash&Carry Card
**************************************************************************/

.cardForm
{
	background-color: #f6f6f6;
	margin: 		  50px auto 0;
	max-width: 		  978px;
	padding:   		  10px 80px 20px 80px;
	
	width: 100%; 
	width: -webkit-calc( 100% - 160px );
	width:    -moz-calc( 100% - 160px );
	width: 	  	   calc( 100% - 160px );
}

.cardForm.sub 
{
	background-color: #dedede;
	margin-top: 0;
}

fieldset.controls.cardForm
{
	background-color: transparent;
	margin: 30px auto;
	max-width: 1138px;
	padding: 0;
}

.cardForm p,
.cardForm span,
.cardForm label
{
	color: #666;
}

.cardForm hr 
{
	border-bottom: 1px solid #999;
	border-top: none;
	clear: both;
	margin: 0;
	padding-top: 10px;
}

form .cardForm legend
{
	color: #666;
	padding-top: 20px;
}

form .cardForm legend.hasSubtext
{
	float: left;
	width: 18%;
}

form .cardForm legend.hasSubtext + span 
{
	padding-top: 24px;
	width: 82%; 
}

.cardForm .white
{
	margin:  10px 0 0 0;
	padding: 5px 0;
}

div.signature
{
	border-bottom: 1px solid #000;
	margin-left:   10px;
	margin-top:    20px;
}

div.signature.date
{
	margin: 43px 10px 0 0;
}

div.sigSub 
{
	margin-left: 10px;
}

span.sigX 
{
	font-size:   20px;
	font-weight: bold;
}

span.sigI 
{
	color: 		#999;
	font-style: italic;
}

.cardForm input[type="text"],
.cardForm select
{
	float: right;
	width: 63%;
}

.cardForm input[type="text"].datefieldinput
{
	float: left;
	width: 100%;
}

.cardForm .textLabel
{
	float: left;
	margin: 8px 10px 2px 0;
	min-height: 40px;
	position: relative;
	text-align: right;

	width: 37%; 
	width: -webkit-calc( 37% - 10px ); 
	width:    -moz-calc( 37% - 10px ); 
	width: 	  	   calc( 37% - 10px ); 
}

.cardForm .textLabel.checkbox
{
	display: 	inline-block;
	float: 		none;
	margin-top: 10px;
	min-height: auto;
}

.cardForm .textLabel.checkbox+input[type="checkbox"]
{
	margin:  13px 3px 3px 0;
	padding: 0;
	/*position:    relative;
	top: 		 4px;*/

	vertical-align: top;
}

/*.cardForm .textLabel.checkbox+input[type="checkbox"]+span 
{
	position: relative;
	top: -2px;
}*/

.cardForm .textLabel span 
{
	position: absolute;
	right: 0;
	top: 50%;

	-webkit-transform: translate(0,-50%);
	   -moz-transform: translate(0,-50%);
			transform: translate(0,-50%);
}

.cardForm .checkboxLabel
{
	display: inline-block;
	margin: 8px 0;
	padding-top: 0;
	text-align: right;

	width: 100%; 
	width: -webkit-calc( 100% - 72px );
	width:    -moz-calc( 100% - 72px );
	width: 	  	   calc( 100% - 72px );
}

.cardForm .checkboxLabel + input[type="checkbox"]
{
	margin:  12px 40px 0 12px;
	padding: 0;
	/*position: relative;
	top: 2px;*/
	vertical-align: top;
}

.printPDF
{
	display: 		 inline-block;
	font-weight:	 bold;
	margin-left:	 10px;
	text-decoration: none; 

	max-width: 100%;
	max-width: -webkit-calc( 100% - 96px );
	max-width:    -moz-calc( 100% - 96px );
	max-width: 	  	   calc( 100% - 96px ); 
}

/* WebKit browsers */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder
{
	color: #999;
}

/* Mozilla Firefox 4 to 18 */
input:-moz-placeholder,
textarea:-moz-placeholder
{
	color: #999;
}

/* Mozilla Firefox 19+ */
input::-moz-placeholder,
textarea::-moz-placeholder
{
	color: #999;
	opacity: 1;
}

/* Internet Explorer 10+ */
input:-ms-input-placeholder,
textarea:-ms-input-placeholder
{
	color: #999;
}

input[type="date"    ]:-ms-input-placeholder,
input[type="email"   ]:-ms-input-placeholder,
input[type="number"  ]:-ms-input-placeholder,
input[type="password"]:-ms-input-placeholder,
input[type="tel"     ]:-ms-input-placeholder,
input[type="text"    ]:-ms-input-placeholder,
input[type="url"     ]:-ms-input-placeholder
{
	color: #999;
}

/* WebKit browsers */
div.headerRight input::-webkit-input-placeholder
{
	color: #000;
}

/* Mozilla Firefox 4 to 18 */
div.headerRight input:-moz-placeholder
{
	color: #000;
}

/* Mozilla Firefox 19+ */
div.headerRight input::-moz-placeholder
{
	color: #000;
	opacity: 1;
}

/* Internet Explorer 10+ */
div.headerRight input:-ms-input-placeholder
{
	color: #000;
}

/* WebKit browsers */
div.nav ul li.mobileSearch input::-webkit-input-placeholder
{
	color: #666;
}

/* Mozilla Firefox 4 to 18 */
div.nav ul li.mobileSearch input:-moz-placeholder
{
	color: #666;
}

/* Mozilla Firefox 19+ */
div.nav ul li.mobileSearch input::-moz-placeholder
{
	color: #666;
	opacity: 1;
}

/* Internet Explorer 10+ */
div.nav ul li.mobileSearch input:-ms-input-placeholder
{
	color: #666;
}

/**************************************************************************
Email/Text Shopping List and Text Store Info
**************************************************************************/
.emailListForm h2,
.textListForm h2,
.textInfoForm h2
{
	margin-bottom: 10px;
}

.emailListForm
{
	margin-top: 20px;
}

.emailListForm fieldset,
.textListForm fieldset,
.textInfoForm fieldset
{
	border: 0;
	margin: 0;
	min-width: 0;
	padding: 0;
}

.checkboxLabel
{
	display: block;
	margin:  0 0 2px 25px;
	padding-top: 10px;
	overflow: hidden;
	text-align: left;
	text-overflow: ellipsis;

	width: 100%;
	width: -webkit-calc( 100% - 30px );
	width:    -moz-calc( 100% - 30px );
	width: 		   calc( 100% - 30px );
}

.signinModal .checkboxLabel,
.signinForm .checkboxLabel
{
	margin-bottom: 11px;
}

.resume h3
{
	margin: 10px 0;
}

.resume .workShiftContainer
{
	margin-top: 3px;
}

.resume .checkboxLabel
{
	margin-bottom: 0;
}

.resume .checkboxLabel.openSoon
{
	color: #b85c00;
}

.simpleForm .collectionDateContainer
{
	width: 100%;
}

.resume input[type="checkbox"],
.signinModal input[type="checkbox"],
.shoppingModal input[type="checkbox"],
.emailListForm input[type="checkbox"],
.textInfoForm input[type="checkbox"],
.signinForm input[type="checkbox"],
.simpleForm input[type="radio"],
.clickCarryAdmin input[type="checkbox"],
.allowSubstitutionsAllContainer input[type="checkbox"]
{
	float: left;
	margin:  12px 12px 0 0;
	padding: 0;
	/*position: relative;
	top: 2px;*/
	vertical-align: top;
}

.simpleForm input[type="checkbox"] {
	margin:  12px 12px 0 0;
	padding: 0;
}

.space {
	height:50px;
	width:100%;
}

html.touch .signinModal input[type="checkbox"],
html.touch .shoppingModal input[type="checkbox"],
html.touch .emailListForm input[type="checkbox"],
html.touch .textInfoForm input[type="checkbox"],
html.touch .signinForm input[type="checkbox"],
html.touch .simpleForm input[type="checkbox"],
html.touch .simpleForm input[type="radio"],
html.touch .clickCarryAdmin input[type="checkbox"],
html.touch .allowSubstitutionsAllContainer input[type="checkbox"]
{
	margin: 10px 0 0 0; 
}

.resume input[type="checkbox"]
{
	margin: 13px 8px 0 0;
}

.navRight .resume input[type="checkbox"]
{
	margin: 10px 8px 0 0;
}

.emailListForm .newEmail
{
	height:   0;
	overflow: hidden;

	-webkit-transition: height 0.25s;
	   -moz-transition: height 0.25s;
	    	transition: height 0.25s;
}

.emailListForm .newEmail.active
{
	height: 50px;
}

.signinModal fieldset.controls,
.shoppingModal fieldset.controls
{
	margin: 20px 0 0 0;
}

.emailListForm fieldset.controls,
.textListForm fieldset.controls,
.textInfoForm fieldset.controls
{
	margin-top: 20px;
}

.emailListForm a.addEmailBtn
{
	background: 	 url( '/images/icons/icon_shopControls.png' ) -51px -51px no-repeat;
	background-size: 225px 75px;
	cursor: 		 pointer;
	display: 		 block;
	float: 		     right;
	height: 	 	 26px;
	margin-top:   	 10px;
	text-decoration: none;
	width:  	 	 26px;
}

.shoppingModal p,
.textListForm p,
.textInfoForm p
{
	overflow: hidden;
	text-overflow: ellipsis;
}

.textListForm p.noPadding,
.textInfoForm p.noPadding
{
	padding: 0;
}

/**************************************************************************
Sidebar
**************************************************************************/

aside input[type="submit"],
aside input[type="button"]
{
	max-width: 100px;
}

#sideSearchForm input[type="text"],
#sideSearchForm select
{
	width: 49%;
}

/*#sideSearchForm input[type="text"].right 
{
	float: none;
}*/

/**************************************************************************
Firefox-specific Styles
**************************************************************************/

@-moz-document url-prefix() { 
	/*.cardForm .textLabel.checkbox+input[type="checkbox"]+span 
	{
		top: 0;
	}*/

	/*html.touch .cardForm .checkboxLabel + input[type="checkbox"]
	{
		top: 0;
	}

	html.touch .cardForm .textLabel.checkbox+input[type="checkbox"]
	{
		top: -2px;
	}*/

	div.signature.date
	{
		margin-top: 44px;
	}
}

/**************************************************************************
Touch-specific Styles
**************************************************************************/

/*html.touch .cardForm .textLabel.checkbox+input[type="checkbox"]+span 
{
	top: -4;
}*/

.cardForm .textLabel.checkbox+input[type="checkbox"]
{
	margin-top: 11px;
}

.cardForm .checkboxLabel + input[type="checkbox"]
{
	margin-top: 10px;
}


/**************************************************************************
Tablet-specific Styles
**************************************************************************/

@media only screen and ( max-width: 1200px )
{
	.availabilityContainer
	{
		width: 100%;
	}

	.margin_5 {
		margin-left: 0;
	}

	.btn_15 {
		width: calc( 100% - 145px ) !important;
	}

	.back {
		width: 30% !important;
	}
}

@media only screen and ( max-width: 1024px )
{
	.cardForm
	{
		padding: 10px 20px 20px 20px;
		
		width: 100%; 
		width: -webkit-calc( 100% - 40px );
		width:    -moz-calc( 100% - 40px );
		width: 	  	   calc( 100% - 40px );
	}

	.cardForm .checkboxLabel
	{
		width: 100%; 
		width: -webkit-calc( 100% - 32px );
		width:    -moz-calc( 100% - 32px );
		width: 	  	   calc( 100% - 32px );
	}

	.cardForm .checkboxLabel + input[type="checkbox"]
	{
		margin-right: 0;
	}

	#sideSearchForm input[type="text"],
	#sideSearchForm select
	{
		width: 100%;
	}
}

@media only screen and ( max-width: 820px )
{
	.cardForm .textLabel.checkbox+input[type="checkbox"]+span 
	{
		clear: 		both;
		display:    block;
		margin-top: 3px;
	}
}

@media only screen and ( max-width: 768px ) 
{
	form .column.nomobileborder
	{
		border-left:  10px solid transparent;
		border-right: 10px solid transparent;
	}

	form#productForm .column.nomobileborder
	{
		border-left:  none;
		border-right: none;
	}

	form .column.span_1_3 { width: 50%; }

	.cardForm
	{
		margin-top: 20px;
	}

	form .cardForm legend.hasSubtext + span 
	{
		padding-top: 0;
		width: 100%; 
	}

	.cardForm .textLabel.checkbox+input[type="checkbox"]+span 
	{
		display:    inline-block;
		margin-top: 0;
	}

	div.signature
	{
		margin-left: 0;
	}

	div.signature.date
	{
		margin-right: 0;
	}

	div.column.span_1_2.expire .clear
	{
		padding-left: 37%;
	}

	.cardForm.sub .column.span_1_3
	{
		width: 33.33%; 
		width: -webkit-calc( 100% / 3 * 1 ); 
		width:    -moz-calc( 100% / 3 * 1 ); 
		width: 	  calc( 100% / 3.0001 * 1 );
	}

	.cardForm.sub .textLabel
	{
		min-height: 0;
		text-align: left;
		width: 100%;
	}

	.cardForm.sub .textLabel span 
	{
		position: relative;

		-webkit-transform: none;
	   	   -moz-transform: none;
				transform: none;
	}

	.cardForm.sub input[type="text"]
	{
		margin-top: 0;
		width: 100%;
	}

	.resume .noMobile
	{
		display: none;
	}

	.resume .workShiftContainer span
	{
		display: inline !important;
	}

	.resume .checkboxLabel
	{
		padding-top: 0px;
		padding-bottom: 10px;
	}

	.resume input[type="checkbox"]
	{
		margin: 0 8px 13px 0;
	}
}

/**************************************************************************
Wireless-specific Styles
**************************************************************************/
@media only screen and ( max-width: 568px ) 
{
	form .column.nomobileborder
	{
		border: none;
	}

	form .column.span_1_3 { width: 100%; }

	.cardForm.sub .column.span_1_3
	{
		border: 0;
		width:  100%;
	}

	.cardForm .textLabel
	{
		min-height: 0;
		text-align: left;
		width: 100%;
	}

	.cardForm .textLabel.checkbox
	{
		text-align: right;

		width: 37%; 
		width: -webkit-calc( 37% - 10px ); 
		width:    -moz-calc( 37% - 10px ); 
		width: 	  	   calc( 37% - 10px ); 
	}

	.cardForm .textLabel span 
	{
		position: relative;

		-webkit-transform: none;
	   	   -moz-transform: none;
				transform: none;
	}

	.cardForm .textLabel.checkbox span 
	{
		position: absolute;

		-webkit-transform: translate(0,-50%);
		   -moz-transform: translate(0,-50%);
				transform: translate(0,-50%);
	}

	.cardForm input[type="text"],
	.cardForm select
	{
		margin-top: 0;
		width: 100%;
	}

	.cardForm input[type="text"].datefieldinput
	{
		margin-top: 8px;
	}

	div.column.span_1_2.expire .clear
	{
		padding-left: 0;
	}

	fieldset.controls input,
	form input[type="submit"],
	input.submitSearch
	{
		max-width: 100%; 
		max-width: -webkit-calc( 100% - 100px );
		max-width:    -moz-calc( 100% - 100px );
		max-width: 	  	   calc( 100% - 100px );
	}

	fieldset.controls input.mobileSpan100
	{
		max-width: 100%;
	}
}

@media only screen and ( max-width: 420px )
{
	.cardForm .textLabel.checkbox
	{
		width: 100%; 
		width: -webkit-calc( 100% - 30px );
		width:    -moz-calc( 100% - 30px );
		width: 	  	   calc( 100% - 30px );
	}

	.cardForm .textLabel.checkbox+input[type="checkbox"]
	{
		margin-right: 0;
	}

	.cardForm .textLabel.checkbox+input[type="checkbox"]+span 
	{
		display:       block;
		padding-right: 5px;
		margin-top:    3px;
		text-align:    right;
	}
}

.alertPreference {
	margin:0;
}