/* Grid layout for the quote entry form */
html, body {
max-width: 100%;
overflow-x: hidden;
}
.quote-entry-form {
display: grid;
grid-template-columns: 150px 1fr;
grid-gap: 10px;
align-items: center;
}
/* Use flex layout for grouped rows */
.form-row-group {
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 10px;
}
/* Each field within the group will share available space */
.form-group {
flex: 1;
}
/* Allow each form row to fit into the grid */
.form-row {
display: contents;
}
.hidden {
display: none;
}
/* Right justify labels */
.form-label {
text-align: right;
padding-right: 10px;
}
/* Left justify input fields */
.form-input {
text-align: left;
width: 500px;
}
/* Adjust narrow inputs to be a bit smaller */
.narrow-input {
width: 150px; /* Or any width that suits your design */
}
/* Force styling even on mobile where jQuery UI renders into */
body .ui-datepicker td.unavailable-date.ui-datepicker-unselectable.ui-state-disabled span {
text-decoration: line-through !important;
color: #999 !important;
font-weight: bold !important;
position: relative;
}
body .ui-datepicker td.unavailable-date.ui-datepicker-unselectable.ui-state-disabled span::after {
content: "Booked";
display: block;
font-size: 0.6em;
color: red;
margin-top: 2px;
}
.ui-datepicker td.available-date span::after {
content: "Open" !important;
display: block;
font-size: 0.6em;
color: green;
margin-top: 2px;
}
/* Make the datepicker popup wider */
.ui-datepicker {
width: 300px !important; /* or try 320px, 340px depending on your layout */
}
.ui-datepicker td {
min-width: 40px;
}
.disabled-link {
pointer-events: none;
opacity: 0.6;
cursor: not-allowed;
}
#emailStatus {
color: red;
font-weight: normal; /* optional */
}
.route-label {
background: white;
color: black;
padding: 2px 4px;
border-radius: 3px;
font-size: 12px;
font-weight: bold;
white-space: nowrap;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}
.route-label-icon {
background: transparent;
border: none;
}
/* Desktop styles (min-width: 768px) */
@media (min-width: 768px) {
body {
background-color: #e8f0f3; /* light blue background */
}
.desktop-box {
border: 1px solid #ccc;
padding: 10px;
border-radius: 4px;
background-color: #f9f9f9;
}
/* Base style for all form controls */
.form-control {
background-color: #ffffff; /* light blue background */
border: 2px solid #ced4da; /* thicker, more prominent border */
border-radius: 4px;
padding: 0.375rem 0.75rem;
transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
/* Focus state for fields */
.form-control:focus {
border-color: #80bdff;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
background-color: #ffffff; /* white on focus */
}
}
/* === GLOBAL STYLES — Always Apply === */
/* Force datepicker above map */
body .ui-datepicker {
z-index: 9999 !important;
}
/* Unavailable dates — greyed out + line through + "Booked" */
body .ui-datepicker td.unavailable-date.ui-datepicker-unselectable.ui-state-disabled span {
text-decoration: line-through !important;
color: #999 !important;
font-weight: bold !important;
position: relative;
}
body .ui-datepicker td.unavailable-date.ui-datepicker-unselectable.ui-state-disabled span::after {
content: "Booked";
display: block;
font-size: 0.6em;
color: red;
margin-top: 2px;
}
input.datepicker[readonly] {
background-color: white !important;
cursor: pointer;
}
/* Fix missing date text on available dates */
.ui-datepicker td a.ui-state-default {
color: black !important;
}
/* Your existing "Open" label */
.ui-datepicker td.available-date a::after,
.ui-datepicker td.available-date span::after {
content: "Open";
display: block;
font-size: 0.6em;
color: green;
margin-top: 2px;
}
.unavailable-date a::after,
.unavailable-date span::after {
content: "Unavailable";
display: block;
font-size: 0.6em;
color: #b00020;
margin-top: 2px;
}
.unavailable-date-admin a::after,
.unavailable-date-admin span::after {
content: "Booked";
display: block;
font-size: 0.6em;
color: #b58900;
margin-top: 2px;
}
.available-date a::after,
.available-date span::after {
content: "Available";
display: block;
font-size: 0.6em;
color: green;
margin-top: 2px;
}
/* Available dates — show "Available" label */
/*.ui-datepicker td.available-date a::after,
.ui-datepicker td.available-date span::after {
content: "Open";
display: block;
font-size: 0.6em;
color: green;
margin-top: 2px;*/
/* Maintain editable look for readonly calendar inputs */
/*input .datepicker[readonly]
{
background-color: white !important;
cursor: pointer;
}*/
/*.ui-datepicker td.available-date a::after,
.ui-datepicker td.available-date span::after {
content: "Open";
display: block;
font-size: 0.6em;
color: green;
margin-top: 2px;
}*/
/* ✅ This should be standalone — not nested */
/*input.datepicker[readonly] {
background-color: white !important;
cursor: pointer;
}*/
/* Mobile styles (max-width: 768px) */
@media (max-width: 768px) {
body {
background-color: #e8f0f3 !important;
}
.form-control {
background-color: #ffffff; /* adjust as needed */
border: 2px solid #adb5bd;
}
body .ui-datepicker {
z-index: 9999 !important;
}
}
@media print {
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
}