/* ------------------------------------------------------------------------- */
/* FORMS */

div.form_wrap {
	max-width:85%;
}

div#r_col_A div.form_wrap {
	width:100%;
	max-width:none;
}

div#form_msg {
	width:100%;
	font-family:'VAGRoundedLight',sans-serif;
	font-size: 1rem;
	font-weight:700;
	color:var(--red);
	margin:0 0 1rem 0;
}

div#form_msg p {
	font-family:'VAGRoundedLight',sans-serif;
	font-size: 1rem;
	font-weight:700;
	color:var(--red);
}

form {
	width:100%;
}

input, select, textarea {
	font-family:'VAGRoundedLight',sans-serif;
	font-size: 1rem;
	line-height:1rem;
	font-weight:500;
	border:1px solid var(--med_grey);
	border-radius:.5rem;
	padding:8px 8px;
	margin:0 0 .7rem 0;
}

select { padding: 8px 30px 8px 8px; }

textarea { font-size:.7rem; width:calc(100% - 22px); resize:vertical; }

textarea.food_prefs {
    margin-top:4px;
}

select {
	min-width:70px;
	appearance:none;
	-moz-appearance: none;
	-webkit-appearance: none;
	background-image:url('../_img/ICON_selDownArrow.png');
	background-repeat:no-repeat;
	background-position:95% center;
}

input.file_upload {
	border:none;
	font-size:.8rem;
}

.form_readonly {
	font-family:'VAGRoundedLight',sans-serif;
	font-size: 1rem;
	font-weight:700;
	padding:10px 0 0 2px;
	margin:0 0 .7rem 0;
	display:inline-block;
}

div.thumb_wrap, div.recipe_upload_wrap {
	width:auto;
	clear:both;
	margin:	0 0 30px 0;
	display:flex;
    justify-content: flex-start;
/*	vertical-align:middle; */
}

div.BUT_delete_file {
/*	float:left; */
    flex:0 0 85px;
	width:85px;
	height:26px;
	margin-left:10px;
	background-image:url('../_img/BUT_delete_upload.png');
	background-position:0 0;
	background-repeat:no-repeat;
	cursor:pointer;
}

div.BUT_delete_file:hover {
	background-position:0 -26px;
}

img.thumbnail { width:120px; float:left; border:1px solid var(--dk_grey); }
img.doc_thumb { float:left; margin:0 0 8px 0; }

span.doc_name {
    flex:0 1 auto;
	font-family:'VAGRoundedLight',sans-serif;
	font-size: .7rem;
    font-weight: 300;
    float:left;
    margin:6px 0 6px 8px;
    overflow-wrap: anywhere;
/*
    width:50%;
    display: table-cell;
    vertical-align: middle;
*/
}

.field_full { margin-right:10px; width:calc(100% - 22px - 10px); }
.field_full-140 { width:calc(100% - 11vw - 22px - 12px); }
.field_full-120 { width:calc(100% - 10vw - 22px - 12px); }
.field_full-100 { width:calc(100% - 9vw - 22px - 12px); }
.field_full-80  { width:calc(100% - 8vw - 22px - 12px); }
.field_twothirds { width:calc(67% - 22px - 12px); }
.field_twothirds-140 { width:calc(67% - 11vw - 22px - 12px); }
.field_twothirds-120 { width:calc(67% - 10vw - 22px - 12px); }
.field_twothirds-100 { width:calc(67% - 9vw - 22px - 12px); }
.field_twothirds-80 { width:calc(67% - 8vw - 22px - 12px); }
.field_half { margin-right:10px; width:calc(50% - 22px - 10px); }
.field_half-140 { width:calc(50% - 11vw - 22px - 12px); }
.field_half-120 { width:calc(50% - 10vw - 22px - 12px); }
.field_half-100 { width:calc(50% - 9vw - 22px - 12px); }
.field_half-80 { width:calc(50% - 8vw - 22px - 12px); }
.field_third { width:calc(33% - 22px); }
.field_third-140 { width:calc(67% - 11vw - 22px - 12px); }
.field_third-120 { width:calc(67% - 10vw - 22px - 12px); }
.field_third-100 { width:calc(67% - 9vw - 22px - 12px); }
.field_third-80 { width:calc(67% - 8vw - 22px - 12px); }
.field_fourth { width:calc(25% - 22px); }
.field_fourth-140 { width:calc(67% - 11vw - 22px - 12px); }
.field_fourth-120 { width:calc(67% - 10vw - 22px - 12px); }
.field_fourth-100 { width:calc(67% - 9vw - 22px - 12px); }
.field_fourth-80 { width:calc(67% - 8vw - 22px - 12px); }
.field_fifth { width:calc(20% - 22px); }
.field_fifth-140 { width:calc(67% - 11vw - 22px - 12px); }
.field_fifth-120 { width:calc(67% - 10vw - 22px - 12px); }
.field_fifth-100 { width:calc(67% - 9vw - 22px - 12px); }
.field_fifth-80 { width:calc(67% - 8vw - 22px - 12px); }

.field_course { width:calc(50% - 10vw - 22px - 12px); }

.course_custom { 
    width:calc(60% - 10vw - 22px - 12px);
    margin-left:20px;
    display:none;
}


input#BUT_submit, input#BUT_submit_popup {
	width:40%;
	max-width:300px;
	background-color:var(--dk_grey);
	border:none;
	color:white;
	cursor:pointer;
	margin-top:20px;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-family:'VAGRoundedBold',sans-serif;
	font-size:1.2rem;
	line-height:1.2rem;
	padding:14px 10px 10px 10px;
	border-radius:2rem;
}

input#BUT_submit:hover { 
    background-color: var(--red);
}

div.BUT_cancel { background-color:var(--med_grey); }
div.BUT_cancel:hover { background-color:var(--orange); }

div.BUT_cancel_sm { background-color:var(--lt_grey); margin-left:20px; }
div.BUT_cancel_sm:hover { background-color:var(--orange); }

div.BUT_delete, div.BUT_delete_sm { background-color:var(--lt_grey); float:right; }
div.BUT_delete:hover ,div.BUT_delete_sm:hover { background-color:var(--red); }


label {
	font-family:'VAGRoundedLight', sans-serif;
	font-size: .9rem;
	font-weight:300;
	margin-top:-6px;
}

.l_label, .l_label_40, .l_label_80, .l_label_100, .l_label_120, .l_label_140, .l_label_160, .l_label_180, .l_label_200, .l_label_nopad  {
	font-family:'Montserrat', sans-serif;
	font-size: 1rem;
	font-weight:300;
    width: auto;
    display:block;
    position:relative;
    padding-right:12px;
    float:left;
    text-align:right;
    top:.6rem;
}

.l_label_nopad {
    padding:0;
    margin-left:12px;
}

.l_label_40 { width: 6vw; }
.l_label_80 { width: 8vw; }
.l_label_100 { width: 9vw; }
.l_label_120 { width: 10vw; }
.l_label_140 { width: 11vw; }
.l_label_160 { width: 12vw; }
.l_label_180 { width: 13vw; }
.l_label_200 { width: 15vw; }

.label_above {
    width:calc(100% - 4px);
    margin:0 0 4px 4px
}



div#BUT_close {
	width:75px;
	height:20px;
	position:absolute;
	top:8px; right:10px;
	background-image:url('../_img/BUT_close_but.png');
	background-repeat:no-repeat;
	background-position: 0 0;
	cursor:pointer;
}

div#BUT_close:hover {
	background-position: 0 -20px;
}


label.package_label {
	display:flex; align-items:flex-start; margin-bottom:.5rem;
}

div.extra_hours_msg {
	display: inline-block;
	width:40%;
	vertical-align: middle;
	margin:0 0 0 1rem;
	font-size:.9rem;
	font-family:'VAGRoundedBold',sans-serif;
	color:black;
}

div.addl_info_item_wrap {
	display:flex; 
	align-item:flex-start;
	font-family:'VAGRoundedLight',sans-serif;
	line-height:1.1rem;
	border-bottom: 1px solid var(--blue);
	padding:0 0 .5rem 0;
	margin:0 0 .5rem 0;
}

div#ducks_quan_wrap, div#steps_quan_wrap {
	font-family:'VAGRoundedLight',sans-serif;
	font-size:1rem;
	margin:0 0 -.5rem 2rem;
	line-height:.5;
}


/* ------------------------------------------------------------------------- */
/* POP-UP FORMS */

div#popup_form_wrap {
	box-sizing: border-box;
	width:40%;
	height:30%;
	border:.3rem var(--red) solid;
	border-radius: 2rem;
	position: absolute;
	top:30%;
	left:30%;
	padding:2rem;
	background-image: linear-gradient(var(--yellow), white);
	box-shadow: 0 0 2rem 0 rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 0 2rem 0 rgba(0,0,0,0.5);
	-moz-box-shadow: 0 0 2rem 0 rgba(0,0,0,0.5);
	z-index:10000;
}

div.address_button {
	background-color:white;
	padding:1rem;
	font-size:1rem;
	font-family:"VAGRoundedLight";
	color:black;
	border: 1px black solid;
	border-radius: 1rem;
	cursor:pointer;
	margin-right:1rem;
}

div.address_button:last-of-type {
	margin-right:0;
}



/* ------------------------------------------------------------------------- */
/* STYLED CHECKBOX */

input[type=checkbox].css-checkbox {
	position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
}

input[type=checkbox].css-checkbox + label.css-label {
	padding-left:35px;
	height:30px; 
	display:inline-block;
	line-height:30px;
	background-repeat:no-repeat;
	background-position: 0 0;
	font-size:1rem;
	vertical-align:middle;
	cursor:pointer;
}

input[type=checkbox].css-checkbox:checked + label.css-label {
	background-position: 0 -30px;
}

label.css-label {
	background-image:url('../_img/checkbox.png');
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* ------------------------------------------------------------------------- */
/* STYLED RADIO BUTTON */

/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 1.6rem;
  margin: 12px 0;
  cursor: pointer;
  font-size: 1rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: -3px;
  left: 0;
  height: 1.2rem;
  width: 1.2rem;
  background-color: #eee;
  border-radius: 50%;
  border:1px solid var(--med_grey);
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a color background */
.container input:checked ~ .checkmark {
  background-color: var(--orange);
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
 	top: .4rem;
	left: .4rem;
	width: .4rem;
	height: .4rem;
	border-radius: 50%;
	background: white;
}

/* Honeypot anti-bot field — off-screen (not display:none) so bots
   that skip hidden/invisible fields still trip it. */
.hp_wrap {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}


/* ------------------------------------------------------------------------- */
/* DEVICE-SPECIFIC */

/* SMARTPHONES */
@media only screen and (max-width: 600px) {
	
	div#buy_order_form { max-width: 100%; }
	div.form_wrap { max-width: 100%; }
	.field_full { margin-right:10px; width:calc(100% - 10px); }
	.field_twothirds { width:calc(67% - 12px); }
	.field_half { margin-right:10px; width:calc(50% - 10px); }
	.field_third { width:calc(33%); }
	.field_fourth { width:calc(25%); }
	.field_fifth { width:calc(20%); }
	
	
}    

/* TABLETS */
@media only screen and (min-width: 601px) and (max-width: 1200px) {

}

/* SMALL DESKTOP & LAPTOPS */
@media only screen and (min-width: 1201px) and (max-width: 1500px) {

}

/* DESKTOP */    
@media only screen and (min-width: 1501px) {

}