@charset "utf-8";
/* CSS Document */

/* -------------------------------------------
	RESET & BASE TYPOGRAPHY
-------------------------------------------- */
* { margin:0; }
body { font-family:Arial, Helvetica, sans-serif; }

/* -------------------------------------------
	FORM ELEMENTS
-------------------------------------------- */
input,textara,select { color:#999; }

/* -------------------------------------------
	LAYOUT: STRUCTURAL CONTAINERS
-------------------------------------------- */
.wrapper { width:960px; margin:0 auto; box-shadow:0 -1px 6px -3px #000; }
.header { background: url('../images/header_bg.webp'); height 120px; }
.header_left { width:274px; float:left; }
.header_right { float:left; width:690px; }
.menu { background:#000; padding:5px 0 0 0; margin-bottom:0; }
.nav_sec { margin:0; padding:0; }
.nav_sec li { float:left; list-style:none; margin:0 0 0 0; line-height:30px; }
.scm { width:45%; }
.scm2 { width:55%; }
.container { background-color: #8080ff; padding:10px 10px 0 10px; height:auto}
.content { border-radius:5px; padding:5px; }
.content_left { float:left; width:400px; margin:0 9px 0 0 ; background:#fff; border-radius:5px; padding:10px 10px 10px 10px; min-height:364px; }
.content_right { float:right; width:500px; }
.inner_content { background:#fff; border-radius:5px; padding:5px; }
.clear { clear:both; }

/* -------------------------------------------
	NAVIGATION MENU STYLES
-------------------------------------------- */
.menu_link { color:#fff; padding:6px 22px; text-decoration:none; font-weight:bold; border-radius:5px 5px 0 0; background: url(../images/menu_bg.gif) repeat-x; }
.menu_link:hover { color:#043fab; background:url(../images/menu_bg_hover.jpg); }
.menu_link_dead { color:#fff; padding:6px 22px; text-decoration:none; font-weight:bold; border-radius:5px 5px 0 0; background: url(../images/menu_bg.gif) repeat-x; }
.active { color:#043fab; padding:6px 22px; text-decoration:none; font-weight:bold; border-radius:5px 5px 0 0; background:url(../images/menu_bg_hover.jpg); }
.menu_left { float:left; width:800px; }
.menu_right { float:left;width:159px; }
.menu_right h1 { margin:1px; color:#fff; font-size:19px; text-align:right; margin-right:8px; }

/* -------------------------------------------
	FOOTER STYLES
-------------------------------------------- */
.footer2 {
	display: table;
	width: 100%;
	margin: 0 auto;
	padding: 5px 0 0 0;
	height: 44px;
}
.footer_left {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	font-size: 15px;
	color: #fff;
	font-weight: bold;
}
.footer_left a { color: #fff; text-decoration: none; }
.footer_right { display: table-cell; vertical-align: middle; text-align: right; }
.footer_right img { vertical-align: middle; }
.copyright { width:65%; margin:0 auto; text-align:center; padding:15px 0; }
.copyright p { font-size:12px; }

/* -------------------------------------------
	BUTTONS & MISC LAYOUT ELEMENTS
-------------------------------------------- */
.menu_btn { padding:4px 0px; width:98%; margin:0 auto; background:#232ebf; border:none; cursor:pointer;text-align:center; color:#fff; font-size:15px; text-transform:uppercase; font-weight:bold; display:none; border-radius:5px; font-family:calibri; }
.subbtn { background: url(../images/menu_bg.gif); border:none; padding:7px 15px; color:#fff; font-weight:bold; border-radius:5px; cursor: pointer; }
.subbtn:hover { background:url(../images/menu_bg_hover.jpg); color:#043fab; border-left:1px solid #ccc; border-right:1px solid #ccc; }
.g-recaptcha { display: inline-block; }

/* -------------------------------------------
	TABLES / FORMS
-------------------------------------------- */
table { font-size:13px; }
.shot2_table { border:5px solid #8080ff; margin:0 auto; margin-top:15px; }
.shot2_table tr td { vertical-align: top; padding:5px; }
.shot2_table tr td table { border:1px solid #8080ff; }
.shot2_table tr td table tr td { padding:2px; }
.shot2_table tr td .vehicle_table tr td { padding:10px}
.vehicle_table tbody tr:nth-child(2n+1) td, .vehicle_table tbody tr:nth-child(2n+1) th { background-color: #eee; padding:10px; }
.vehicle_table h1 { font-size:15px; }
.vehicle_table h1 span { font-size:10px; }
.booking_table tr td table tr td { padding:0px; }
.border_none { border:none; }
.form_table { padding: 0; border-spacing: 0; }
.form_table p { padding: 6px; }
.form_table tr:first-child td { padding-top: 0; border-spacing: 0; }
.form_table tr:not(:first-child) td { padding: 5px 0 5px 0; }
.form_table tr td select { /*background:#f4f4f4;*/ border:1px solid #ddd; padding:9px 4px; width:100%; color:#000000; /*border-radius:5px;*/ }
.form_table label { color: #555; margin-bottom: 20px; }
.form_table label.extraMargin + * { margin-top: 5px; }
.time_120 { width: 120px; }
.shortField { width: 150px; }  /*used in inquiry forms*/
.input_txt2 { /*background:#f4f4f4;*/ border:1px solid #ddd; padding:10px 5px; width:95%; color:#000000;/*border-radius:5px;*/ }
.input_txt3 { /*background:#f4f4f4;*/ border:1px solid #ddd; padding:10px 5px; width:97%; color:#000000;/*border-radius:5px;*/ }
.input_txt4 { /*background:#f4f4f4;*/ border:1px solid #ddd; padding:10px 5px; width:85%; color:#000000;/*border-radius:5px;*/ }
.reservation_form { padding:0 0 0; margin: 10px 10px 0px 10px;}
.reservation_form h1 { color:#043ea8; font-family:'Trebuchet MS'; text-transform:uppercase; text-align:center; }
.reservation_form h2 { color:#499fe5; font-size:20px; margin:8px 0; }
.reservation_form a { text-decoration:none; font-weight:bold; float:right; }
.reservation_form a:hover { color:#F00; }
.error { font-size:12px; color:#006600; background-color: lightpink; }

/* -------------------------------------------
	PLACEHOLDER
-------------------------------------------- */
/* Placeholder selectors -- consider grouping these */
::-webkit-input-placeholder { color: #CCCCCC; }
:-moz-placeholder { /* Firefox 18- */ color: #CCCCCC; }
::-moz-placeholder { /* Firefox 19+ */ color: #CCCCCC; }
:-ms-input-placeholder { color: #CCCCCC; }
::-webkit-select-placeholder { color: #CCCCCC; }
:-ms-select-placeholder { color: #CCCCCC; }

/* -------------------------------------------
	GRAVEL SELECT (1_index.php)
-------------------------------------------- */
a.numberCircle { /*Gravel Popup circle*/
	border-radius: 50%;
	width: 12px;
	height: 12px;
	padding: 6px;
	background: #0000FF;
	color: #FFFFFF;
	text-align: center;
	font: bold 13px Arial, sans-serif;
	margin: 0 0 10px 15px;
}
a.numberCircle, a.numberCircle:hover, a.numberCircle:focus { color: #FFFFFF; }
.switch-container { /*standard/gravel switch*/
	display: flex;
	justify-content: center;
	align-items: start;
	margin-top: 8px;
}
.switch-field { font-family: "Lucida Grande", Tahoma, Verdana, sans-serif; overflow: hidden; margin: 0; }
.switch-field input { display: none; }
.switch-field label {
	float: left; 
	margin-bottom: 0px;
	display: inline-block;
	background-color: #e4e4e4;
	color: rgba(0, 0, 0, 0.6);
	font-size: 11px;
	font-weight: normal;
	text-align: center;
	text-shadow: none;
	padding: 6px 12px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
	-webkit-transition: all 0.1s ease-in-out;
	-moz-transition:    all 0.1s ease-in-out;
	-ms-transition:     all 0.1s ease-in-out;
	-o-transition:      all 0.1s ease-in-out;
	transition:         all 0.1s ease-in-out;
}
.switch-field input:checked + label {
	/*background-color: #A5DC86;*/
	background-color: #03328D;
	color:#FFFFFF;
	font-weight:bold;
	-webkit-box-shadow: none;
	box-shadow: none;
}
.switch-field label:first-of-type { border-radius: 4px 0 0 4px; }
.switch-field label:last-of-type { border-radius: 0 4px 4px 0; }

/* -------------------------------------------
	INPUT FOCUS & FORM FEEDBACK
-------------------------------------------- */
input[type=text]:focus, input[type=checkbox]:focus, textarea:focus {
	box-shadow: 0 0 5px rgba(81, 203, 238, 1);
	border: 1px solid rgba(81, 203, 238, 1);
}

/* -------------------------------------------
	TEXT STYLING
-------------------------------------------- */
.heading { font-size:18px; margin:0 0 10px 0; }
.wrdcs { font-size:12px !important; word-break: break-all !important; }
.wrdcsb { font-weight: bold; }

/* -------------------------------------------
	UI DATEPICKER
-------------------------------------------- */
#ui-datepicker-div { 
	width: 250px !important;
	z-index: 1000 !important;
	position: fixed;
	top: 50px;
	left: 50%;
	/*  transform: translate(-50%, -50%);*/
	background-color: white;
	border: 5px solid #8080ff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	padding: 10px;
}
/*.ui-datepicker-multi-2 .ui-datepicker-group { font-size: 12px; width: 240px; }*/
.ui-datepicker-group { width: 100%; }
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { font-size: 12px !important; }
.ui-datepicker .ui-datepicker-buttonpane button { font-size: 12px !important; }
.ui-datepicker-row-break { height:3px; }

/* -------------------------------------------
	LOCATION/INFO POPUPS
-------------------------------------------- */
.location_info { 
	background-color: white;
	padding:20px;
	height:auto;
	border-radius: 5px;
	font-size: 14px;
}
.location_info p { margin-bottom: 6px; }

#pickup_sublocation_popup { display: none; max-width: 900px; }
#return_sublocation_popup { display: none; max-width: 900px; }
#gravel_info_popup { display: none; max-width: 900px;}
#debitCard_popup { display: none; max-width: 900px;}
.info_popup {
  background-color: #8080ff;
  padding: 10px;
  height: auto;
  font-size: 12px;
  position: fixed;
	top: 20px;
  left: 0;
  right: 0;
  margin: auto;
  max-height: 90vh;
  border: 2px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  max-width: 80vw;
  z-index: 1000;
  overflow-y: auto;
}
#close {
	position: absolute;
	top: 12px;
	right: 13px;
	cursor: pointer;
	font-size: 24px;
	font-weight: bold;
	color: #333;
	border: 1px solid #000;
	padding: 1px 6px;
	border-radius: 5px;
}

/* -------------------------------------------
	IMAGE FADE-IN (rotator graphics)
-------------------------------------------- */
.fadein { position:relative; margin:0 auto; }
.fadein img { position:absolute; border-radius:5px; border-color:#FFFFFF; border:#FFFFFF solid 10px; max-height:364px; }

/* -------------------------------------------
   PROMO CODE & SAVINGS BOXES
-------------------------------------------- */

/* --- Estimated Total Cell Formatting --- */
.est-total-cell {
	text-align: center;
	font-size: 18px;
}

/* --- Totals --- */
.orig-total       { font-size: 1.2em; color: #888; text-decoration: line-through; margin-right: 6px; }
.discounted-total { font-size: 1.2em; color: #219150; font-weight: bold; margin-left: 3px; }
.regular-total    { font-size: 1.2em; color: #222; }

/* --- Promo savings box & contents --- */
.promo-savings {
	margin: 16px auto 0 auto;
	max-width: 340px;
	background: #eaffef;
	border: 1px solid #219150;
	border-radius: 8px;
	padding: 10px 12px;
	box-shadow: 0 2px 6px 0 #0001;
}

/* First line: promo code applied */
.promo-code-applied {
	font-weight: bold;
	color: #219150;
	font-size: 15px;
	letter-spacing: 1px;
	margin-bottom: 8px;
}

/* Second row: savings + remove btn side by side */
.promo-savings-row {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

/* The saved amount stays centered */
.promo-saved-amount {
	color: #fff;
	background: #219150;
	border-radius: 5px;
	display: inline-block;
	padding: 3px 14px;
	font-size: 16px;
	font-weight: bold;
	margin: 0 auto;
}

.promo-savings .promo-code-mono {
	font-family: monospace;
	letter-spacing: 1px;
}

/* Remove button is positioned absolutely at the right of the row */
#removePromoCodeBtn {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: #219150;
	font-size: 1.4em;
	cursor: pointer;
	font-weight: bold;
	padding: 0 10px;
}

/* --- Invalid promo code box ("Try Again") --- */
#invalidPromoBox {
	margin: 16px auto 0 auto;
	max-width: 340px;
	background: #fff5f5;
	border: 1px solid #e65555;
	border-radius: 8px;
	padding: 14px 18px;
	box-shadow: 0 2px 6px 0 #0001;
	text-align: center;
}
#invalidPromoBox .invalid-message {
	color: #e65555;
	font-weight: bold;
	font-size: 16px;
}

/* --- Try Again button --- */
#clearInvalidPromoBtn {
	background: #e65555;
	color: #fff;
	border: 0;
	padding: 7px 22px;
	font-weight: bold;
	font-size: 1em;
	border-radius: 4px;
	box-shadow: 0 1px 4px #0001;
	cursor: pointer;
	transition: background .18s;
	margin-top: 8px;
}

/* --- Promo code input area & fields --- */
.promo-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.promo-checkbox-row {
	margin-bottom: 0;
	padding-top: 5px;
	width: 100%;
	display: flex;
	justify-content: center;
}
.promo-checkbox-label {
	font-weight: 600;
	cursor: pointer;
	display: flex;
	align-items: center;
}
#hasPromoCode {
	accent-color: #8080ff;
	margin-right: 8px;
	width: 18px;
	height: 18px;
}
#promoCodeFields {
	display: flex;
	margin-top: 12px;
	background: #f4f7ff;
	border: 1.5px solid #b5c8ff;
	border-radius: 8px;
	padding: 18px 16px 12px 16px;
	max-width: 340px;
	box-shadow: 0 2px 8px 0 #0001;
	width: 100%;
	justify-content: center;
}
.promo-fields-inner {
	display: flex;
	gap: 10px;
	align-items: center;
}
#promoCode {
	flex: 1;
	min-width: 110px;
	max-width: 150px;
	font-size: 1em;
	padding: 7px 12px;
	border: 1.5px solid #8080ff;
	border-radius: 4px;
	background: #fff;
	color: #222;
	transition: border-color .2s;
}
#applyPromoCodeBtn,
.button-blue {
	background: #4959c7;
	color: #fff;
	border: 0;
	padding: 7px 22px;
	font-weight: bold;
	font-size: 1em;
	border-radius: 4px;
	box-shadow: 0 1px 4px #0001;
	cursor: pointer;
	transition: background .18s;
}


/* -------------------------------------------
	DEBUG BUTTONS
-------------------------------------------- */
#debug-btn {
	position: fixed;
	top: 10px;
	left: 10px;
	width: 30px;
	height: 30px;
	background-color: #ff0000;
	color: #fff;
	border: none;
	border-radius: 50%;
	font-size: 16px;
	line-height: 30px;
	text-align: center;
	cursor: pointer;
	z-index: 1000;
}
#clear-session-btn {
	position: fixed;
	top: 10px;
	left: 50px;
	width: 30px;
	height: 30px;
	background-color: #00ff00;
	color: #fff;
	border: none;
	border-radius: 50%;
	font-size: 16px;
	line-height: 30px;
	text-align: center;
	cursor: pointer;
	z-index: 1000;
}
.debugmodeBanner {
	background-color: red;
	font-family: monospace;
	font-weight: bold;
}
.debugmodeBody {
	font-family: monospace;
	font-size: 0.9em;
	background-color: pink;
	text-align: left;
}

/* -------------------------------------------
	RESPONSIVE/MEDIA QUERIES
-------------------------------------------- */
@media (max-width:800px) {
	.wrapper { width:97%; }
	.header_left { float: left; width: 27%; }
	.header_left img { width: 100%; }
	.header_right { width: 73%; }
	.header_right img { width:100%; }
	.nav_sec { margin: 0 0 0 10px; padding: 0; }
	.nav_sec li a { font-size: 14px; margin: 0 1px 0 0; padding: 7px 8px; }
	.content_left { width: 29%; max-height: 100% !important; }
	.content_right { width:66%}
	.content_right img { width:100%; }
	.reservation_form h1 { font-size: 23px; }
	.footer_left { width: 86%; }
	.reservation_form {	padding: 15px 0 38px;	display: flex; justify-content: center; }
	.menu_left { float: left; width: 74%; }
	.menu_right { width: 26%; float:right; }
	.menu_right h1 { font-size: 19px; text-align:right; margin-right:8px; }
	.info_popup { top: 50px; max-width: 90vw;	}
}

@media (max-width:640px) {
	.menu { padding:0; }
	.menu_left { position: relative; float: left; width: 170px; padding: 5px 0 5px 5px; border:none; }
	.menu_right { width: 140px; padding: 5px 0 0 0; }
	.reservation_form h1 { font-size: 16px; }
	.reservation_form h2 { font-size: 15px; margin: 8px 0; }
	.reservation_form { padding: 15px 0 34px; display: flex; justify-content: center; }
	.footer_left { font-size: 12px; text-align: center; width:80%; }
	.shot2_table tr td { float:left; width:100%; }
	.shot2_table tr td table { width: 100%; }
	.shot2_table tr td { padding:0; }
	.shot2_table tr td table tr td { padding: 3px 0; text-align: center !important; }
	.shot2_table tr td .vehicle_table tr td  { padding: 2px; text-align: left; }
	.shot2_table tr td .vehicle_table tr td:first-child { padding-top: 10px; }
	.shot2_table tr td .vehicle_table tr td:last-child { padding: 2px 0 10px 0; }
	.container { padding: 2px 0 0 2px; }
	.content_left { width: 97%; max-height:100% !important; margin: 0; }
	.content_right { width: 100%; }
	.menu_navigation { display: none; }
	#navMenu { position: absolute; top: 100%; z-index: 1000; width: 97%; }	
	.menu_navigation.visible { display: block; }
	.menu_btn { display:block; }
	.nav_sec li { float:none; background:url("../images/menu_bg.gif") repeat-x scroll 0 0 rgba(0, 0, 0, 0); text-align:center; }
	.nav_sec li:hover { background: url("../images/menu_bg_hover.jpg") repeat-x scroll 0 0 rgba(0, 0, 0, 0); }
	.nav_sec li a { font-size: 14px; padding: 6px 20px; background:none; }
	.nav_sec li a:hover { background:none; }
	.active { color:#fff!Important; }
	.copyright { padding: 8px; }
	.form_table { text-align: center; width:100% !important; }
	.form_table tr td { float: left; margin: 0 !important; padding: 0; width: 100% !important; }
	.form_table tr td select { margin:0 0 2px 0; width: 90%; }	
	.form_table label { float: left; margin: 0; padding: 0 0 0 20px; color: #339; }	
	.switch-field label { padding: 6px 12px; }
	.input_txt2 { width: 90%; }
	.input_txt3 { width: 90%; }
	.input_txt4 { width: 90%; padding: 10px 0; text-indent: 10px; }
	.hideOnMobile { display: none; }
	.numberCircle { margin: 8px 0 0 15px; }
}

@media (max-width:480px) {
	.nav_sec { margin: 0; padding: 0; }
	.nav_sec li { float:none; background:url("../images/menu_bg.gif") repeat-x scroll 0 0 rgba(0, 0, 0, 0); text-align:center; }
	.nav_sec li:hover { background: url("../images/menu_bg_hover.jpg") repeat-x scroll 0 0 rgba(0, 0, 0, 0); }
	.nav_sec li a { background:none; }
	.nav_sec li a:hover { background:none; }
	.content_left { width: 95%; max-height:100% !important; margin: 0; }
	.content_right { width: 99%; margin:15px 0 0 0; }
	.header_left { width:100%; float: left; width: 100%; text-align:center; padding:5px 0; }
	.header_left img { width: 60%; }
	.menu_btn { display:block; }
	.content_left { padding:5px; max-height:100% !important; }
	.reservation_form {	padding: 2px 15px; display: flex; justify-content: center; }
}

@media (max-width:360px) {
	.footer_left { font-size: 11px; line-height: 21px; text-align: center; width: 80%; }
}