/* =============================================================================
BOOKING FORM -- EDITORIAL LOOK (04-Sep-2026)
The trip booking form in the house palette and type: the Travel Booklet /
CC-sheet system, matching the "destination legs" variant of ccsheet-lab.html --
a white card per section under a navy header band with a gold rule, Cormorant
Garamond for the section titles, Mulish for everything a guest reads.
Loaded once by bookingform.template.php together with bookingform.autosave.js.
It restyles the legacy markup where it stands: each section is already
"title div + .bookinfo_text div", so the title becomes the card's header and
.bookinfo_text becomes its body. The option cards that replace the bare radio
buttons and the "Saved" badge live here too.
TWO THINGS THE SITE DOES THAT THESE RULES HAVE TO BEAT, hence the !important
and the id in the selectors:
- .bookinfo_section p / span are painted white with !important, which was
right on the old navy form and is wrong inside a white card;
- under 768px a long :not() chain forces 17px on p, span, td, a, li and more.
Rules are keyed to `#book .bookinfo_text`, never to `.bookinfo_section`: the
legacy markup pops that div off the parser stack early, so most sections are
NOT inside it in the real page.
The tokens are prefixed --ej- so they can live on :root without colliding with
anything the surrounding page defines.
============================================================================ */
:root{
--ej-navy:#001628; --ej-navy2:#0A2440; --ej-gold:#DBB166; --ej-deepgold:#8A6B28;
--ej-ink:#1C2430; --ej-paper:#F7F3EC; --ej-hair:#EDE6DA; --ej-muted:#6B635A;
--ej-white:#fff; --ej-ivory:#FBF9F4;
--ej-ok:#1E7A4C; --ej-okbg:#E8F5ED; --ej-alert:#A32B2B; --ej-alertbg:#FBECEC;
--ej-warnbg:#FCF3E2;
--ej-shadow:0 1px 3px rgba(0,22,40,.07), 0 8px 24px rgba(0,22,40,.05);
--ej-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
--ej-sans:'Mulish',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
/* ========================================================= the page ground === */
/* Paper, and only here. This stylesheet is linked by exactly one file,
bookingform.template.php, and newtemplatewebquotejohn.php includes that file
only for the booking form and its payment relatives ($s = book, bookdp, thanks,
thanksdp, payment, thankspaypal, bookflightpayment, makepayment). The webquote
summary, the tour pages and the hotel pages never load this stylesheet, so the
colour cannot reach them. */
body{background:var(--ej-paper)!important;}
/* SCROLL LOCK BEHIND AN OPEN DIALOG.
Every Add / Change dialog locks the page with document.body.style.overflow="hidden"
and releases it with "auto". That has never worked: css/webquote-css-minified.css
sets html{overflow-x:hidden}, which makes the scrolling element, so locking
does nothing and the page scrolls away behind the open dialog. Carry the lock
up to , keyed on the very inline style the legacy handlers already toggle, so
it releases by itself when a dialog closes and needs no change to their code.
scrollbar-gutter keeps the page from jumping sideways as the bar disappears. */
html{scrollbar-gutter:stable;}
html:has(> body[style*="overflow: hidden"]),
html:has(> body[style*="overflow:hidden"]){overflow:hidden!important;}
/* READABILITY OUTSIDE THE CARDS.
css/webquote-css-minified.css sets body{color:#fff} for the old navy page, and the
parser trap pops .bookinfo_section off the stack so that file's own colour rules
never match anything. On the paper ground that left every paragraph BETWEEN the
cards invisible: the VAT and passport notes under Travelers, the bed-size note
under Rooms, and anything else a template drops between sections. Give #book a
readable default and let it inherit; every card rule below is more specific and
still wins. */
#book{color:var(--ej-ink);font-family:var(--ej-sans);}
#book p,#book h5,#book h6,#book b,#book strong,#book i,#book u,#book font,
#book span,#book li,#book label,#book td,#book th,#book div{
color:inherit;font-family:inherit;
}
/* The site paints links cyan through a long :not() chain carrying !important, which
is unreadable on paper. Out-rank it the same way it out-ranks everything else. */
#book a:not(#ej-x):not(#ej-y){
color:var(--ej-deepgold)!important;
text-decoration:underline!important;text-decoration-thickness:1px;text-underline-offset:2px;
}
#book a:not(#ej-x):not(#ej-y):hover{color:var(--ej-navy)!important;}
/* ===================================================== the section card ===== */
/* the legacy between a section title and its body would split the card */
#book .bookingformtitle + br{display:none;}
#book .bookingformtitle{
font-family:var(--ej-serif)!important;font-style:normal;font-weight:600;
font-size:28px!important;line-height:1.15;letter-spacing:.2px;
text-transform:none!important;text-decoration:none!important;
color:#fff!important;background:var(--ej-navy2);
border:1px solid var(--ej-navy2);border-bottom:0;border-radius:6px 6px 0 0;
padding:16px 22px 14px;margin:30px 0 0;position:relative;
}
/* the editorial rule under every section title */
#book .bookingformtitle::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ej-gold);
}
#book .bookinfo_text{
background:var(--ej-white);color:var(--ej-ink);
font-family:var(--ej-sans);font-size:16px;line-height:1.6;
border:1px solid var(--ej-hair);border-top:0;border-radius:0 0 6px 6px;
padding:20px 22px 22px;box-shadow:var(--ej-shadow);margin:0;
}
/* the Logout line borrows the .bookinfo_text class: it is a line, not a card */
#book p.bookinfo_text{
background:none!important;border:0!important;box-shadow:none!important;
padding:0!important;color:var(--ej-muted)!important;
}
#book p.bookinfo_text span{color:var(--ej-muted)!important;}
#book p.bookinfo_text a{color:var(--ej-deepgold)!important;}
/* ==================================================== what a guest reads ==== */
#book .bookinfo_text p,
#book .bookinfo_text span,
#book .bookinfo_text li,
#book .bookinfo_text td,
#book .bookinfo_text th,
#book .bookinfo_text b,
#book .bookinfo_text i,
#book .bookinfo_text u,
#book .bookinfo_text font,
#book .bookinfo_text label,
#book .bookinfo_text div{
font-family:var(--ej-sans)!important;font-size:16px!important;color:inherit!important;
}
#book .bookinfo_text p{margin:0 0 12px!important;line-height:1.6!important;text-align:left!important;}
/* A legacy at the very start of a paragraph was how the old form made the gap
above it. The card's own padding is that gap now, so the stray break only leaves
an empty first line above the text. */
#book .bookinfo_text p > br:first-child{display:none;}
#book .bookinfo_text p:last-child{margin-bottom:0!important;}
#book .bookinfo_text b,
#book .bookinfo_text strong{font-weight:700;color:var(--ej-navy)!important;}
#book .bookinfo_text a{color:var(--ej-deepgold)!important;text-decoration:underline;text-underline-offset:2px;font-size:inherit!important;}
#book .bookinfo_text a:hover{color:var(--ej-navy)!important;}
/* A TYPING BOX ENDS WHERE THE BOX ENDS.
A textarea is inline by default, so the line it sits on adds a descender's
worth of space underneath it -- 14px here -- and its own 6px margin sat on top
of that and of the card's 22px. Once the comments box became the last thing in
the Additional Information card, all three showed up as one wide empty band.
The card's padding is the only space below it now. The card-number field keeps
its inline behaviour: it is meant to sit in the middle of a sentence. */
#book .bookinfo_text textarea:not(#ccnumber){display:block;margin-bottom:0!important;}
/* THE AVAILABILITY NOTE.
It is an
, which the site sizes as a heading, so a one-line footnote came
out bigger than the paragraphs it follows. It is a note, not a heading: body
size, bold, and a thin deep-gold rule down its left edge to mark it. */
#book > h5,
#book form > h5,
#book .bookinfo_section > form > h5,
#book .bookinfo_section > h5{
font-family:var(--ej-sans)!important;font-size:16px!important;font-weight:700!important;
color:var(--ej-ink)!important;line-height:1.55!important;letter-spacing:0!important;
margin:16px 0 20px!important;padding:3px 0 3px 14px!important;
border-left:3px solid var(--ej-deepgold)!important;
}
/* the copy above the sections sits straight on the paper ground */
#book form > p,#book form > h5,#book .bookinfo_section > p{
font-family:var(--ej-sans)!important;font-size:16px!important;color:var(--ej-ink)!important;line-height:1.6!important;
}
#book form > p b,#book form > h5 b{color:var(--ej-navy)!important;}
#book form > p a,#book .bookinfo_section > p a{color:var(--ej-deepgold)!important;}
/* the site paints loose spans white for the old navy page: on paper they vanish */
#book form > p span,#book form > h5 span,#book .bookinfo_section > p span{color:inherit!important;}
/* the notes the templates coloured inline: readable again on a white card */
#book .bookinfo_text [style*="90EE90"],
#book .bookinfo_text [style*="90ee90"],
#book .bookinfo_text [style*="lightgreen"],
#book .bookinfo_text [style*="darkgreen"]{color:var(--ej-ok)!important;}
#book .bookinfo_text p[style*="color: red"],
#book .bookinfo_text p[style*="color:red"]{
color:var(--ej-alert)!important;background:var(--ej-alertbg);
border-left:3px solid var(--ej-alert);padding:10px 14px;border-radius:0 4px 4px 0;margin:10px 0!important;
}
/* THE VAT NOTE IS RED, NOT PINK.
It sits outside a card, so when the page behind it was navy this had to be a
pale tint to be legible. On paper that same tint is barely there. It is the
same warning as the ones inside the cards, so it is the same red. */
#book p[style*="color: red"],
#book p[style*="color:red"],
#book font[color="red"],
#book [style*="color: #FF0000"],#book [style*="color:#FF0000"],
#book [style*="color: #ff0000"],#book [style*="color:#ff0000"]{color:var(--ej-alert)!important;}
/* ============================= every booking-form page, not just the form == */
/* THE PAGES AROUND THE FORM READ ON PAPER TOO.
Sign-in, set-a-password, forgot-password, thanks and the payment pages are all
rendered through bookingform.template.php, so they get this stylesheet and this
background -- but the colours here were written for #book, which is the form
itself. Everything else kept the site's body{color:#fff} and went invisible the
moment the page turned pale. This file is only ever loaded on those pages, so it
can safely say what the page's own text colour is. */
body{color:var(--ej-ink)!important;}
/* THE ONE WHITE THAT SURVIVED.
webquote-css-minified.css says `.bookinfo_section p{color:white!important}` and
the same for span -- written for the navy page. On the booking form itself the
markup pops .bookinfo_section off the parser stack early, so it reaches almost
nothing and the damage was invisible; on the payment pages the wrapper survives
and it painted the whole trip-payment statement white on paper. Same colour as
the rest of the prose, stated with enough weight to beat it. Anything meant to
be white on a dark panel -- the card titles, the grid headers -- sets its own
colour and is untouched. */
.bookinfo_section p,
.bookinfo_section span,
.bookinfo_section li,
.bookinfo_section td,
.bookinfo_section h4,
.bookinfo_section h5,
.bookinfo_section h6{color:var(--ej-ink)!important;}
/* the payment statement and anything else a payment template prints */
.paymentsection,
.paymentsection p,
.paymentsection b,
.paymentsection span,
.paymentsection td,
.paymentsection li,
.paymentsection h4,
.paymentsection h5{color:var(--ej-ink)!important;}
.paymentsection a{color:var(--ej-deepgold)!important;text-decoration:underline!important;}
/* the sign-in / set-password panel */
.bookingintro,
.bookingintro p,
.bookingintro b,
.bookingintro strong,
.bookingintro div:not(.inputfield),
.bookingintro h1,.bookingintro h2,.bookingintro h3,.bookingintro h4,.bookingintro h5,.bookingintro h6,
.bookingintro span,.bookingintro td,.bookingintro li,.bookingintro font{
color:var(--ej-ink)!important;
font-family:var(--ej-sans)!important;
}
.bookingintro a,
.bookingintro .forget a{
color:var(--ej-deepgold)!important;
text-decoration:underline!important;text-underline-offset:2px;
}
/* THE PAGE TITLE.
.allheaders-gold paints #dbb166 and .allheaders-silver paints a pale gradient
through -webkit-text-fill-color -- both were chosen to sit on the old navy page
and neither has the contrast for paper. Booking-form pages use the deep gold the
rest of this design uses for a heading on a pale ground; the gradient has to be
cleared as well, or it goes on painting the letters. */
.allheaders-gold,
.allheaders-silver,
#book .allheaders-gold,
#book .allheaders-silver{
color:var(--ej-deepgold)!important;
background:none!important;background-image:none!important;
-webkit-background-clip:border-box!important;background-clip:border-box!important;
-webkit-text-fill-color:var(--ej-deepgold)!important;
}
/* THE SIGN-IN BUTTON'S LABEL WAS CLIPPED.
The site pins that button to height:42px with line-height:30px, sized for the old
14px label. This stylesheet gives every button in the section its own padding, and
padding plus a line box no longer fit inside a fixed 42px. Let the button be as
tall as what is in it. */
#book .bookinfo_section .src_btn,
.bookingintro .src_btn,
.bookingintro input[type="submit"]{
height:auto!important;min-height:0!important;line-height:1.2!important;
float:none!important;vertical-align:middle;margin:0!important;
}
.bookingintro .inputfield{
width:auto!important;overflow:visible!important;text-align:center!important;
display:flex!important;flex-direction:row!important;flex-wrap:wrap;
align-items:center;justify-content:center;gap:10px;
padding-left:0!important;margin:0 auto 10px!important;
}
.bookingintro #password_text{
float:none!important;height:auto!important;min-height:46px;margin:0!important;
font-family:var(--ej-sans)!important;font-size:16px!important;color:var(--ej-ink)!important;
background:var(--ej-white)!important;border:1px solid #CFC8BA!important;border-radius:6px!important;
padding:10px 12px!important;
}
/* THE QUESTION ABOVE A GROUP OF OPTIONS.
"Choose 1 among the following 6 tour options in Ushuaia" was set as body text
in a page of body text, so the one line the guest actually has to act on read
as more wall. It gets the same rank the flights card gives its two block
headings -- the display serif over a gold hairline -- so the form has one
sub-heading voice throughout: navy band, sub-heading, eyebrow, field. */
#book .bookinfo_text p.ejChooseTitle,
#book p.ejChooseTitle{
display:block;
font-family:var(--ej-serif)!important;font-size:21px!important;font-weight:600!important;
font-style:normal!important;letter-spacing:.2px;line-height:1.25!important;
text-transform:none!important;color:var(--ej-navy)!important;
margin:26px 0 14px!important;padding:0 0 8px!important;
border-bottom:1px solid var(--ej-gold)!important;
}
#book .bookinfo_text p.ejChooseTitle b,
#book p.ejChooseTitle b{font-weight:inherit!important;color:inherit!important;font-size:inherit!important;}
/* the first one in a card does not need the full run-up */
#book .bookinfo_text p.ejChooseTitle:first-child{margin-top:4px!important;}
/* ==================================================== one option, one card == */
.ejOpt{
position:relative;display:flex;align-items:flex-start;gap:10px;
margin:6px 0;padding:10px 13px;max-width:820px;
border:1px solid var(--ej-hair);border-radius:8px;background:var(--ej-white);
cursor:pointer;line-height:1.4;font-weight:400;box-sizing:border-box;
transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.ejOpt:hover{border-color:var(--ej-gold);background:var(--ej-ivory);}
.ejOpt.is-checked{border-color:var(--ej-gold);background:var(--ej-warnbg);box-shadow:inset 0 0 0 1px var(--ej-gold);}
/* the native control stays in the page (name, value and the Submit path are
untouched); it is hidden but still focusable with the keyboard */
.ejOpt input[type="radio"],
.ejOpt input[type="checkbox"]{
position:absolute!important;left:0;top:0;
width:1px!important;height:1px!important;margin:0!important;
opacity:0!important;pointer-events:none;transform:none!important;
}
.ejMark{
flex:0 0 18px;width:18px;height:18px;margin-top:1px;
border-radius:50%;border:2px solid #B8B2A6;background:var(--ej-white);
position:relative;box-sizing:border-box;
}
.ejOpt input:checked ~ .ejMark{border-color:var(--ej-gold);}
.ejOpt input:checked ~ .ejMark::after{
content:"";position:absolute;left:3px;top:3px;right:3px;bottom:3px;
border-radius:50%;background:var(--ej-gold);
}
/* the card has to show keyboard focus: :focus first for browsers that do not
know :focus-visible, then narrowed for those that do */
.ejOpt input:focus ~ .ejMark{box-shadow:0 0 0 3px rgba(219,177,102,.45);}
.ejOpt input:focus:not(:focus-visible) ~ .ejMark{box-shadow:none;}
.ejOpt input:focus-visible ~ .ejMark{box-shadow:0 0 0 3px rgba(219,177,102,.45);}
#book .bookinfo_text .ejOptText{color:var(--ej-ink)!important;}
/* the extra-cost note under a tour option: its own line, flush with the label */
#book .bookinfo_text .ejOptNote{
display:block;margin:4px 0 0;padding:0;
font-size:16px!important;line-height:1.5;
}
/* a link inside a card opens its page without choosing the option -- that is the
browser's own rule for interactive content inside a label */
#book .bookinfo_text .ejOptText a{position:relative;z-index:1;color:var(--ej-deepgold)!important;}
/* the question a group of cards answers */
#book .bookinfo_text .ejField{margin:0 0 18px;}
#book .bookinfo_text .ejField:last-child{margin-bottom:0;}
#book .bookinfo_text .ejFieldTitle{margin:0 0 8px!important;}
/* a save that failed marks its own question */
#book .bookinfo_text .ejField.has-error .ejOpt,
#book .bookinfo_text .ejField.has-error textarea,
#book .bookinfo_text .ejField.has-error input[type="text"]{border-color:var(--ej-alert)!important;}
/* ========================================================= the fields ======= */
#book .bookinfo_text textarea,
#book .bookinfo_text input[type="text"],
#book .bookinfo_text input[type="email"],
#book .bookinfo_text input[type="tel"],
#book .bookinfo_text select,
#divPax textarea,
#divPax input[type="text"],
#divPax input[type="email"],
#divPax input[type="tel"],
#divPax select,
#divHotel textarea,
#divHotel input[type="text"],
#divHotel input[type="email"],
#divHotel input[type="tel"],
#divHotel select,
#divFlight textarea,
#divFlight input[type="text"],
#divFlight input[type="email"],
#divFlight input[type="tel"],
#divFlight select,
#divTicket textarea,
#divTicket input[type="text"],
#divTicket input[type="email"],
#divTicket input[type="tel"],
#divTicket select,
#divDomestic textarea,
#divDomestic input[type="text"],
#divDomestic input[type="email"],
#divDomestic input[type="tel"],
#divDomestic select,
#divDirectHotel textarea,
#divDirectHotel input[type="text"],
#divDirectHotel input[type="email"],
#divDirectHotel input[type="tel"],
#divDirectHotel select,
#divContact textarea,
#divContact input[type="text"],
#divContact input[type="email"],
#divContact input[type="tel"],
#divContact select,
#divCare textarea,
#divCare input[type="text"],
#divCare input[type="email"],
#divCare input[type="tel"],
#divCare select,
#divMail textarea,
#divMail input[type="text"],
#divMail input[type="email"],
#divMail input[type="tel"],
#divMail select{
font-family:var(--ej-sans)!important;font-size:16px!important;color:var(--ej-ink)!important;
background:var(--ej-white)!important;border:1px solid #CFC8BA!important;border-radius:6px!important;
padding:10px 12px!important;box-shadow:none!important;
transition:border-color .15s ease, box-shadow .15s ease;
}
/* THE CLIPPED LINE OF TEXT INSIDE A FIELD.
bookingform-responsive.min.css pins input[type="text"] and select to
height:35px!important. Those are border-box, so with the padding above the content
box falls to about 13px -- smaller than Mulish's own 1.5 line box -- and the text is
sliced off along the bottom. Let the field size itself to its own content, with a
floor so short fields still look deliberate. Textareas are untouched: they carry
their own heights. */
#book .bookinfo_text input[type="text"],
#book .bookinfo_text input[type="email"],
#book .bookinfo_text input[type="tel"],
#book .bookinfo_text select,
#divPax input[type="text"],
#divPax input[type="email"],
#divPax input[type="tel"],
#divPax select,
#divHotel input[type="text"],
#divHotel input[type="email"],
#divHotel input[type="tel"],
#divHotel select,
#divFlight input[type="text"],
#divFlight input[type="email"],
#divFlight input[type="tel"],
#divFlight select,
#divTicket input[type="text"],
#divTicket input[type="email"],
#divTicket input[type="tel"],
#divTicket select,
#divDomestic input[type="text"],
#divDomestic input[type="email"],
#divDomestic input[type="tel"],
#divDomestic select,
#divDirectHotel input[type="text"],
#divDirectHotel input[type="email"],
#divDirectHotel input[type="tel"],
#divDirectHotel select,
#divContact input[type="text"],
#divContact input[type="email"],
#divContact input[type="tel"],
#divContact select,
#divCare input[type="text"],
#divCare input[type="email"],
#divCare input[type="tel"],
#divCare select,
#divMail input[type="text"],
#divMail input[type="email"],
#divMail input[type="tel"],
#divMail select{
height:auto!important;min-height:46px;line-height:1.5!important;
}
/* css/webquote-css-minified.css opens with *,*::before,*::after{box-sizing:border-box},
so every box on this page is already border-box; these two only pin it, and stop an
inline width:100% from ever spilling past the card. */
#book .bookinfo_text textarea,
#divPax textarea,
#divHotel textarea,
#divFlight textarea,
#divTicket textarea,
#divDomestic textarea,
#divDirectHotel textarea,
#divContact textarea,
#divCare textarea,
#divMail textarea{box-sizing:border-box!important;max-width:100%!important;}
/* THE HEIGHT OF THE TYPING BOXES.
Those four boxes carry an inline height from a much smaller legacy type size, and
because the page is border-box the padding and border come OUT of that height, not
on top of it. The site's own reboot already sets textarea{padding:10px 10px}, so the
pick-up boxes were left about ONE line tall and the guest's text scrolled out of
sight the moment it wrapped. Give each box the rows its markup asks for at the
current type: 22px of chrome plus N lines of 16px x 1.6. */
#book .bookinfo_text #bookPickUp1,
#book .bookinfo_text #bookPickUp2,
#book .bookinfo_text #seatotherinfo{height:99px!important;} /* 3 lines */
#book .bookinfo_text #bookotherinfo{height:125px!important;} /* 4 lines */
#book .bookinfo_text textarea:focus,
#book .bookinfo_text input[type="text"]:focus,
#book .bookinfo_text input[type="email"]:focus,
#book .bookinfo_text input[type="tel"]:focus,
#book .bookinfo_text select:focus,
#divPax textarea:focus,
#divPax input[type="text"]:focus,
#divPax input[type="email"]:focus,
#divPax input[type="tel"]:focus,
#divPax select:focus,
#divHotel textarea:focus,
#divHotel input[type="text"]:focus,
#divHotel input[type="email"]:focus,
#divHotel input[type="tel"]:focus,
#divHotel select:focus,
#divFlight textarea:focus,
#divFlight input[type="text"]:focus,
#divFlight input[type="email"]:focus,
#divFlight input[type="tel"]:focus,
#divFlight select:focus,
#divTicket textarea:focus,
#divTicket input[type="text"]:focus,
#divTicket input[type="email"]:focus,
#divTicket input[type="tel"]:focus,
#divTicket select:focus,
#divDomestic textarea:focus,
#divDomestic input[type="text"]:focus,
#divDomestic input[type="email"]:focus,
#divDomestic input[type="tel"]:focus,
#divDomestic select:focus,
#divDirectHotel textarea:focus,
#divDirectHotel input[type="text"]:focus,
#divDirectHotel input[type="email"]:focus,
#divDirectHotel input[type="tel"]:focus,
#divDirectHotel select:focus,
#divContact textarea:focus,
#divContact input[type="text"]:focus,
#divContact input[type="email"]:focus,
#divContact input[type="tel"]:focus,
#divContact select:focus,
#divCare textarea:focus,
#divCare input[type="text"]:focus,
#divCare input[type="email"]:focus,
#divCare input[type="tel"]:focus,
#divCare select:focus,
#divMail textarea:focus,
#divMail input[type="text"]:focus,
#divMail input[type="email"]:focus,
#divMail input[type="tel"]:focus,
#divMail select:focus{
outline:none!important;border-color:var(--ej-gold)!important;box-shadow:0 0 0 3px rgba(219,177,102,.30)!important;
}
/* the site styles the card box by id, so this has to be at least as specific */
#book textarea#ccnumber.ejCardField{
width:calc(9ch + 22px);min-height:0;height:auto;box-sizing:border-box;
font-family:var(--ej-sans)!important;font-size:16px!important;letter-spacing:2px;text-align:center;
padding:8px 10px!important;border-radius:6px!important;border:1px solid #CFC8BA!important;
resize:none;overflow:hidden;vertical-align:middle;margin-top:0;
}
/* ========================================================= the buttons ====== */
#book .crud_button{
font-family:var(--ej-sans)!important;font-size:12px!important;font-weight:800!important;
letter-spacing:1.4px;text-transform:uppercase;
color:var(--ej-navy)!important;background:var(--ej-white)!important;
border:1px solid #CFC8BA!important;border-radius:4px!important;
padding:9px 18px!important;margin:0 8px 10px 0!important;cursor:pointer;
/* bookingform-responsive.min.css sets .crud_button{width:100%}, which makes the
three buttons stack one per line on a phone. They are a row of three short
actions, so keep them on one line and let them wrap only if they must. */
display:inline-flex!important;align-items:center;justify-content:center;
width:auto!important;max-width:none!important;float:none!important;
width:auto!important;max-width:none!important;box-shadow:none!important;
transition:border-color .15s ease, background-color .15s ease;
}
#book .crud_button:hover{border-color:var(--ej-gold)!important;background:var(--ej-warnbg)!important;}
#book .src_btn2,#book .bookinfo_section .src_btn{
font-family:var(--ej-sans)!important;font-size:14px!important;font-weight:800!important;
letter-spacing:2px;text-transform:uppercase;
color:var(--ej-navy)!important;background:var(--ej-gold)!important;
border:1px solid var(--ej-gold)!important;border-radius:4px!important;
padding:14px 28px!important;cursor:pointer!important;text-shadow:none!important;
display:inline-flex;align-items:center;gap:10px;float:none;
box-shadow:0 6px 18px rgba(219,177,102,.25);
transition:background-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
#book .src_btn2:hover{background:#E6C27B!important;box-shadow:0 8px 22px rgba(219,177,102,.35);}
#book .src_btn2:active{transform:translateY(1px);}
#book .src_btn2 svg{
width:18px;height:18px;flex:0 0 18px;
stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
transition:transform .18s cubic-bezier(.2,.8,.2,1);
}
#book .src_btn2:hover svg,
#book .src_btn2:focus svg{transform:translateX(4px);}
@media (prefers-reduced-motion:reduce){
#book .src_btn2 svg{transition:none;}
#book .src_btn2:hover svg,
#book .src_btn2:focus svg{transform:none;}
}
/* ========================================================= the data grids === */
#book div.gridbox,#book div.gridbox_dhx_skyblue{
border:1px solid var(--ej-hair)!important;border-radius:6px;overflow:hidden;
background:var(--ej-white)!important;font-family:var(--ej-sans)!important;
}
#book div.gridbox_dhx_skyblue .xhdr,
#book div.gridbox_dhx_skyblue table.hdr,
#book div.gridbox_dhx_skyblue table.hdr tr,
#book div.gridbox_dhx_skyblue table.hdr td{
background:var(--ej-navy)!important;background-image:none!important;border-color:var(--ej-navy)!important;
}
#book div.gridbox_dhx_skyblue table.hdr td{padding:0!important;}
#book div.gridbox_dhx_skyblue table.hdr td div.hdrcell{
font-family:var(--ej-sans)!important;font-size:10px!important;font-weight:800!important;
letter-spacing:1.6px;text-transform:uppercase;color:var(--ej-gold)!important;padding:10px!important;
}
#book div.gridbox_dhx_skyblue table.obj tr td{
font-family:var(--ej-sans)!important;font-size:14px!important;color:var(--ej-ink)!important;
padding:9px 10px!important;border-bottom:1px solid var(--ej-hair)!important;border-right:0!important;
background-image:none!important;
}
#book div.gridbox_dhx_skyblue table.obj tr.rowselected td{
background:var(--ej-warnbg)!important;background-image:none!important;color:var(--ej-navy)!important;
}
#book div.gridbox_dhx_skyblue .odd_dhx_skyblue{background:var(--ej-ivory)!important;}
#book .objbox{background:var(--ej-white)!important;}
/* THE EMPTY BAND UNDER A GRID'S LAST ROW.
Every one of these grids is built with enableAutoHeigth(true,...), so dhtmlx measures
the rows once and then writes pixel heights onto the container, the scroll box and
the table. It measures before the web fonts arrive, so the number it writes is taller
than the rows actually need and the surplus renders as a blank row under the data.
That is also why the band comes and goes as the page is zoomed: dhtmlx re-measures
and lands on a different number. Let the content decide the height instead, which is
what enableAutoHeigth asked for in the first place. */
#book div.gridbox,#book div.gridbox_dhx_skyblue{height:auto!important;min-height:0!important;}
#book div.gridbox .objbox,#book div.gridbox_dhx_skyblue .objbox{
height:auto!important;max-height:none!important;overflow:visible!important;
}
#book div.gridbox table.obj,#book div.gridbox_dhx_skyblue table.obj{height:auto!important;}
/* ===================================================== the "Saved" badge ==== */
/* One badge for the whole form: it slides in from the right edge and rests in
the top right corner, so an answer saved far down the page still confirms
itself somewhere the guest is looking. */
#ejSaveToast{
position:fixed;top:16px;right:16px;z-index:2147483000;
display:inline-flex;align-items:center;gap:8px;max-width:min(360px,calc(100vw - 32px));
font-family:var(--ej-sans);font-size:14px;font-weight:700;line-height:1.35;
color:#fff;background:var(--ej-ok);
padding:10px 16px;border-radius:999px;
box-shadow:0 6px 20px rgba(0,22,40,.28);
transform:translateX(calc(100% + 28px));opacity:0;
transition:transform .32s cubic-bezier(.2,.8,.2,1), opacity .32s ease;
pointer-events:none;
}
#ejSaveToast.is-on{transform:translateX(0);opacity:1;}
#ejSaveToast.is-saving{background:var(--ej-navy2);}
#ejSaveToast.is-error{background:var(--ej-alert);border-radius:10px;pointer-events:auto;}
#ejSaveToast svg{width:16px;height:16px;flex:0 0 16px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
@media (prefers-reduced-motion:reduce){
#ejSaveToast{transition:opacity .2s ease;transform:translateX(0);}
}
/* ===================================================== the staff note ======= */
.ejStaffNote,
#book .bookinfo_text .ejStaffNote{
margin:0 0 12px!important;font-size:13px!important;color:var(--ej-muted)!important;
font-family:var(--ej-sans)!important;
}
/* ============================================== the Add / Change dialogs ==== */
/* They opened at 95% of the page width whatever they contained, over a tiled
olive photograph from the old design. Give them a width that suits the handful
of fields each one holds, centre them, and dress them like the rest of the
form. Sizing and centring are desktop-only: below 769px the site's own rules
already make a dialog fill the screen, which is right on a phone. */
@media (min-width:769px){
#divPax,#divHotel,#divFlight,#divTicket,#divDomestic,#divDirectHotel,#divContact,#divCare,#divMail{
/* inset:0 with auto margins centres against the viewport box itself, so the
dialog does not drift by half a scrollbar when the scroll lock hides it. */
position:fixed!important;inset:0!important;margin:auto!important;transform:none!important;
width:min(560px,94vw)!important;max-width:min(560px,94vw)!important;
height:-moz-fit-content!important;height:fit-content!important;
max-height:88vh!important;overflow-y:auto!important;overflow-x:hidden!important;
border-radius:10px;box-shadow:0 18px 48px rgba(0,22,40,.38);
}
/* THE DAY BOX IS REBUILT, AND THAT USED TO MOVE THE YEAR BOX.
DiasMes() deletes the day dropdown's wrapper and appends a fresh one whenever
the month changes. The replacement does not reproduce the whitespace text node
the original markup had, so the inline run reflowed and the year box jumped 5px
sideways on every single month change. A flex wrapper ignores whitespace text
nodes altogether, so the row is identical before and after the rebuild. */
#divPax [id^="divDays"],#divHotel [id^="divDays"],#divFlight [id^="divDays"],#divTicket [id^="divDays"],#divDomestic [id^="divDays"],#divDirectHotel [id^="divDays"],#divContact [id^="divDays"],#divCare [id^="divDays"],#divMail [id^="divDays"],#divPax [id^="Days"],#divHotel [id^="Days"],#divFlight [id^="Days"],#divTicket [id^="Days"],#divDomestic [id^="Days"],#divDirectHotel [id^="Days"],#divContact [id^="Days"],#divCare [id^="Days"],#divMail [id^="Days"]{
display:inline-flex!important;vertical-align:middle;
}
/* THE DATE AND TIME DROPDOWNS KEEP STILL.
They had no width of their own, so the browser sized each one to its widest
option. Picking a month rebuilds the day list (28, 29, 30 or 31 entries), the
widest option changes, and every box in the row shifts. They were also about
2px too narrow for their own longest option once this stylesheet's padding and
the dropdown arrow were counted, which clipped the text. Fixed widths, sized
from the longest option each one can hold, so they never move and never clip. */
#divPax select[name$="Month"],#divHotel select[name$="Month"],#divFlight select[name$="Month"],#divTicket select[name$="Month"],#divDomestic select[name$="Month"],#divDirectHotel select[name$="Month"],#divContact select[name$="Month"],#divCare select[name$="Month"],#divMail select[name$="Month"]{width:140px!important;min-width:140px!important;}
#divPax select[name$="Day"],#divHotel select[name$="Day"],#divFlight select[name$="Day"],#divTicket select[name$="Day"],#divDomestic select[name$="Day"],#divDirectHotel select[name$="Day"],#divContact select[name$="Day"],#divCare select[name$="Day"],#divMail select[name$="Day"]{width:90px!important;min-width:90px!important;}
#divPax select[name$="Year"],#divHotel select[name$="Year"],#divFlight select[name$="Year"],#divTicket select[name$="Year"],#divDomestic select[name$="Year"],#divDirectHotel select[name$="Year"],#divContact select[name$="Year"],#divCare select[name$="Year"],#divMail select[name$="Year"]{width:98px!important;min-width:98px!important;}
#divPax select[name$="Hour"],#divHotel select[name$="Hour"],#divFlight select[name$="Hour"],#divTicket select[name$="Hour"],#divDomestic select[name$="Hour"],#divDirectHotel select[name$="Hour"],#divContact select[name$="Hour"],#divCare select[name$="Hour"],#divMail select[name$="Hour"]{width:88px!important;min-width:88px!important;}
#divPax select[name$="Min"],#divHotel select[name$="Min"],#divFlight select[name$="Min"],#divTicket select[name$="Min"],#divDomestic select[name$="Min"],#divDirectHotel select[name$="Min"],#divContact select[name$="Min"],#divCare select[name$="Min"],#divMail select[name$="Min"]{width:88px!important;min-width:88px!important;}
#divPax select[name$="TT"],#divHotel select[name$="TT"],#divFlight select[name$="TT"],#divTicket select[name$="TT"],#divDomestic select[name$="TT"],#divDirectHotel select[name$="TT"],#divContact select[name$="TT"],#divCare select[name$="TT"],#divMail select[name$="TT"]{width:86px!important;min-width:86px!important;}
/* The time is four cells -- hh, a colon, mm, AM -- so once the field tables
became block stacks each part dropped onto its own line. Keep them inline
under the label they share. */
#divPax tr:has(> td > select[name$="Hour"]) > td:not(:first-child),#divHotel tr:has(> td > select[name$="Hour"]) > td:not(:first-child),#divFlight tr:has(> td > select[name$="Hour"]) > td:not(:first-child),#divTicket tr:has(> td > select[name$="Hour"]) > td:not(:first-child),#divDomestic tr:has(> td > select[name$="Hour"]) > td:not(:first-child),#divDirectHotel tr:has(> td > select[name$="Hour"]) > td:not(:first-child),#divContact tr:has(> td > select[name$="Hour"]) > td:not(:first-child),#divCare tr:has(> td > select[name$="Hour"]) > td:not(:first-child),#divMail tr:has(> td > select[name$="Hour"]) > td:not(:first-child){
display:inline-block!important;width:auto!important;vertical-align:middle;
}
/* a gap between the date and time boxes. The flex wrapper above ignores the
whitespace text nodes the markup relied on for spacing, so state it. */
#divPax select[name$="Month"],#divHotel select[name$="Month"],#divFlight select[name$="Month"],#divTicket select[name$="Month"],#divDomestic select[name$="Month"],#divDirectHotel select[name$="Month"],#divContact select[name$="Month"],#divCare select[name$="Month"],#divMail select[name$="Month"],#divPax select[name$="Day"],#divHotel select[name$="Day"],#divFlight select[name$="Day"],#divTicket select[name$="Day"],#divDomestic select[name$="Day"],#divDirectHotel select[name$="Day"],#divContact select[name$="Day"],#divCare select[name$="Day"],#divMail select[name$="Day"],#divPax select[name$="Hour"],#divHotel select[name$="Hour"],#divFlight select[name$="Hour"],#divTicket select[name$="Hour"],#divDomestic select[name$="Hour"],#divDirectHotel select[name$="Hour"],#divContact select[name$="Hour"],#divCare select[name$="Hour"],#divMail select[name$="Hour"],#divPax select[name$="Min"],#divHotel select[name$="Min"],#divFlight select[name$="Min"],#divTicket select[name$="Min"],#divDomestic select[name$="Min"],#divDirectHotel select[name$="Min"],#divContact select[name$="Min"],#divCare select[name$="Min"],#divMail select[name$="Min"]{
margin-right:8px!important;
}
#divPax select[name$="Year"],#divHotel select[name$="Year"],#divFlight select[name$="Year"],#divTicket select[name$="Year"],#divDomestic select[name$="Year"],#divDirectHotel select[name$="Year"],#divContact select[name$="Year"],#divCare select[name$="Year"],#divMail select[name$="Year"],#divPax select[name$="TT"],#divHotel select[name$="TT"],#divFlight select[name$="TT"],#divTicket select[name$="TT"],#divDomestic select[name$="TT"],#divDirectHotel select[name$="TT"],#divContact select[name$="TT"],#divCare select[name$="TT"],#divMail select[name$="TT"]{
margin-right:0!important;
}
/* THE FIELD TABLE STOPS BEING A TABLE.
Stacking a label over its field only works if the table stops allocating
columns: a block-level row inside a real table is still handed its old column's
width, which left every field about 60%% of the card. Converting the field table
to a plain block stack removes the column algorithm entirely. The title table is
untouched, and so is the arrival/departure dialog, whose outer table is already
laid out as a grid; only its inner column tables are converted. */
#divPax table:not(:first-of-type),#divHotel table:not(:first-of-type),#divFlight table:not(:first-of-type),#divTicket table:not(:first-of-type),#divDomestic table:not(:first-of-type),#divDirectHotel table:not(:first-of-type),#divContact table:not(:first-of-type),#divCare table:not(:first-of-type),#divMail table:not(:first-of-type),#divPax table:not(:first-of-type) > tbody,#divHotel table:not(:first-of-type) > tbody,#divFlight table:not(:first-of-type) > tbody,#divTicket table:not(:first-of-type) > tbody,#divDomestic table:not(:first-of-type) > tbody,#divDirectHotel table:not(:first-of-type) > tbody,#divContact table:not(:first-of-type) > tbody,#divCare table:not(:first-of-type) > tbody,#divMail table:not(:first-of-type) > tbody,
#divPax td table,#divHotel td table,#divFlight td table,#divTicket td table,#divDomestic td table,#divDirectHotel td table,#divContact td table,#divCare td table,#divMail td table,#divPax td table > tbody,#divHotel td table > tbody,#divFlight td table > tbody,#divTicket td table > tbody,#divDomestic td table > tbody,#divDirectHotel td table > tbody,#divContact td table > tbody,#divCare td table > tbody,#divMail td table > tbody{
display:block!important;width:100%!important;
}
/* EVERY ROW OF A CONVERTED TABLE IS A BLOCK, not just the ones that carry a
caption. A row left as table-row inside a block tbody gets wrapped in an
anonymous table of its own, and the column algorithm sizes it to its
content -- which is why the traveller list sat in a 198px column while the
dropdown above it filled the card. */
#divPax table:not(:first-of-type) > tbody > tr,#divHotel table:not(:first-of-type) > tbody > tr,#divFlight table:not(:first-of-type) > tbody > tr,#divTicket table:not(:first-of-type) > tbody > tr,#divDomestic table:not(:first-of-type) > tbody > tr,#divDirectHotel table:not(:first-of-type) > tbody > tr,#divContact table:not(:first-of-type) > tbody > tr,#divCare table:not(:first-of-type) > tbody > tr,#divMail table:not(:first-of-type) > tbody > tr,#divPax td table > tbody > tr,#divHotel td table > tbody > tr,#divFlight td table > tbody > tr,#divTicket td table > tbody > tr,#divDomestic td table > tbody > tr,#divDirectHotel td table > tbody > tr,#divContact td table > tbody > tr,#divCare td table > tbody > tr,#divMail td table > tbody > tr{
display:block!important;width:100%!important;
}
#divPax table:not(:first-of-type) > tbody > tr > td,#divHotel table:not(:first-of-type) > tbody > tr > td,#divFlight table:not(:first-of-type) > tbody > tr > td,#divTicket table:not(:first-of-type) > tbody > tr > td,#divDomestic table:not(:first-of-type) > tbody > tr > td,#divDirectHotel table:not(:first-of-type) > tbody > tr > td,#divContact table:not(:first-of-type) > tbody > tr > td,#divCare table:not(:first-of-type) > tbody > tr > td,#divMail table:not(:first-of-type) > tbody > tr > td,#divPax td table > tbody > tr > td,#divHotel td table > tbody > tr > td,#divFlight td table > tbody > tr > td,#divTicket td table > tbody > tr > td,#divDomestic td table > tbody > tr > td,#divDirectHotel td table > tbody > tr > td,#divContact td table > tbody > tr > td,#divCare td table > tbody > tr > td,#divMail td table > tbody > tr > td{
display:block!important;width:100%!important;text-align:left!important;
}
/* LABELS SIT ABOVE THEIR FIELD, AS EYEBROWS.
The markup is a two-cell table row, label beside field, which either wasted a
band of space between the two or, right-aligned, read as a wall of text pushed
against the boxes. Turning the row and its two cells into blocks stacks them:
a small uppercase caption directly over the control it names, full width, which
is what a form label should be and what the rest of the page already looks like.
Only rows whose first cell is a bold caption are touched; prose rows are left. */
#divPax table tr:has(> td:first-child > b),#divHotel table tr:has(> td:first-child > b),#divFlight table tr:has(> td:first-child > b),#divTicket table tr:has(> td:first-child > b),#divDomestic table tr:has(> td:first-child > b),#divDirectHotel table tr:has(> td:first-child > b),#divContact table tr:has(> td:first-child > b),#divCare table tr:has(> td:first-child > b),#divMail table tr:has(> td:first-child > b){
/* the row has to be a block as well, or the table keeps allocating columns
and the stacked cells only get their old column's width */
display:block!important;width:100%!important;
}
#divPax table tr:has(> td:first-child > b) > td,#divHotel table tr:has(> td:first-child > b) > td,#divFlight table tr:has(> td:first-child > b) > td,#divTicket table tr:has(> td:first-child > b) > td,#divDomestic table tr:has(> td:first-child > b) > td,#divDirectHotel table tr:has(> td:first-child > b) > td,#divContact table tr:has(> td:first-child > b) > td,#divCare table tr:has(> td:first-child > b) > td,#divMail table tr:has(> td:first-child > b) > td{
text-align:left!important;
display:block!important;width:100%!important;
}
#divPax table tr:has(> td:first-child > b) > td:first-child,#divHotel table tr:has(> td:first-child > b) > td:first-child,#divFlight table tr:has(> td:first-child > b) > td:first-child,#divTicket table tr:has(> td:first-child > b) > td:first-child,#divDomestic table tr:has(> td:first-child > b) > td:first-child,#divDirectHotel table tr:has(> td:first-child > b) > td:first-child,#divContact table tr:has(> td:first-child > b) > td:first-child,#divCare table tr:has(> td:first-child > b) > td:first-child,#divMail table tr:has(> td:first-child > b) > td:first-child{
text-align:left!important;
}
#divPax table tr:has(> td:first-child > b) > td:first-child > b,#divHotel table tr:has(> td:first-child > b) > td:first-child > b,#divFlight table tr:has(> td:first-child > b) > td:first-child > b,#divTicket table tr:has(> td:first-child > b) > td:first-child > b,#divDomestic table tr:has(> td:first-child > b) > td:first-child > b,#divDirectHotel table tr:has(> td:first-child > b) > td:first-child > b,#divContact table tr:has(> td:first-child > b) > td:first-child > b,#divCare table tr:has(> td:first-child > b) > td:first-child > b,#divMail table tr:has(> td:first-child > b) > td:first-child > b{
display:block;font-family:var(--ej-sans)!important;font-size:11px!important;
font-weight:800!important;letter-spacing:1.4px;text-transform:uppercase;
color:var(--ej-navy)!important;
}
#divPax table tr:has(> td:first-child > b) > td:last-child,#divHotel table tr:has(> td:first-child > b) > td:last-child,#divFlight table tr:has(> td:first-child > b) > td:last-child,#divTicket table tr:has(> td:first-child > b) > td:last-child,#divDomestic table tr:has(> td:first-child > b) > td:last-child,#divDirectHotel table tr:has(> td:first-child > b) > td:last-child,#divContact table tr:has(> td:first-child > b) > td:last-child,#divCare table tr:has(> td:first-child > b) > td:last-child,#divMail table tr:has(> td:first-child > b) > td:last-child{
padding-bottom:0!important;
}
/* a field with no width of its own should fill the row it now owns */
#divPax table tr:has(> td:first-child > b) input[type="text"],#divHotel table tr:has(> td:first-child > b) input[type="text"],#divFlight table tr:has(> td:first-child > b) input[type="text"],#divTicket table tr:has(> td:first-child > b) input[type="text"],#divDomestic table tr:has(> td:first-child > b) input[type="text"],#divDirectHotel table tr:has(> td:first-child > b) input[type="text"],#divContact table tr:has(> td:first-child > b) input[type="text"],#divCare table tr:has(> td:first-child > b) input[type="text"],#divMail table tr:has(> td:first-child > b) input[type="text"],#divPax table tr:has(> td:first-child > b) > td:last-child > select:not([name$="Month"]):not([name$="Day"]):not([name$="Year"]):not([name$="Hour"]):not([name$="Min"]):not([name$="TT"]),#divHotel table tr:has(> td:first-child > b) > td:last-child > select:not([name$="Month"]):not([name$="Day"]):not([name$="Year"]):not([name$="Hour"]):not([name$="Min"]):not([name$="TT"]),#divFlight table tr:has(> td:first-child > b) > td:last-child > select:not([name$="Month"]):not([name$="Day"]):not([name$="Year"]):not([name$="Hour"]):not([name$="Min"]):not([name$="TT"]),#divTicket table tr:has(> td:first-child > b) > td:last-child > select:not([name$="Month"]):not([name$="Day"]):not([name$="Year"]):not([name$="Hour"]):not([name$="Min"]):not([name$="TT"]),#divDomestic table tr:has(> td:first-child > b) > td:last-child > select:not([name$="Month"]):not([name$="Day"]):not([name$="Year"]):not([name$="Hour"]):not([name$="Min"]):not([name$="TT"]),#divDirectHotel table tr:has(> td:first-child > b) > td:last-child > select:not([name$="Month"]):not([name$="Day"]):not([name$="Year"]):not([name$="Hour"]):not([name$="Min"]):not([name$="TT"]),#divContact table tr:has(> td:first-child > b) > td:last-child > select:not([name$="Month"]):not([name$="Day"]):not([name$="Year"]):not([name$="Hour"]):not([name$="Min"]):not([name$="TT"]),#divCare table tr:has(> td:first-child > b) > td:last-child > select:not([name$="Month"]):not([name$="Day"]):not([name$="Year"]):not([name$="Hour"]):not([name$="Min"]):not([name$="TT"]),#divMail table tr:has(> td:first-child > b) > td:last-child > select:not([name$="Month"]):not([name$="Day"]):not([name$="Year"]):not([name$="Hour"]):not([name$="Min"]):not([name$="TT"]){
width:100%!important;
}
/* the arrival/departure dialog nests a table per column; keep both inside the card */
#divFlight table{max-width:100%!important;table-layout:auto!important;}
/* the two that genuinely carry more fields */
#divPax{width:min(660px,95vw)!important;max-width:min(660px,95vw)!important;}
/* THE ARRIVAL / DEPARTURE DIALOG STACKS ITS TWO BLOCKS.
It is a three-column table -- arrival, a spacer, departure -- with the captions
on one row and the fields on the next, and its content will not compress below
about 1065px. Side by side that meant a dialog wider than most laptops, labels
shattered into three lines, and sideways scrolling. Laying the table out as a
single-column grid stacks the two blocks; the order below keeps each caption
with its own fields, which simply stacking the cells would not. */
#divFlight{width:min(640px,95vw)!important;max-width:min(640px,95vw)!important;}
/* the arrival/departure dialog is two columns of fields; give its labels
enough room that "Flight Number:" stays on one line, and let the two
halves share the width evenly */
#divFlight > form > table > tbody > tr > td:first-child{width:auto;min-width:0;}
}
/* NO LEGACY OLIVE ANYWHERE INSIDE A DIALOG.
bookingform-responsive.min.css paints every table that is not a data grid with
table:not(.obj){background:#ececd3!important} plus a gradient, and the dialogs nest
tables several deep, so clearing only the outer one left olive panels inside. Clear
them all, and the olive field borders (#564300) with them. */
#divPax table,#divHotel table,#divFlight table,#divTicket table,#divDomestic table,#divDirectHotel table,#divContact table,#divCare table,#divMail table{
background:transparent!important;background-image:none!important;
border-color:var(--ej-hair)!important;
}
#divPax td,#divHotel td,#divFlight td,#divTicket td,#divDomestic td,#divDirectHotel td,#divContact td,#divCare td,#divMail td,#divPax th,#divHotel th,#divFlight th,#divTicket th,#divDomestic th,#divDirectHotel th,#divContact th,#divCare th,#divMail th{
background-image:none!important;
}
/* NOTHING OLIVE, ANYWHERE, WHATEVER THE MARKUP.
bookingform-responsive.min.css carries table:not(.obj){background:#ececd3!important}
plus a linear-gradient, and the dialogs nest tables and divs several deep, so a rule
aimed at one level always leaves another showing. This clears every descendant in one
pass. It is written with two ids so it outranks anything the site can bring, and it
sits BEFORE the navy title band and the fields below, which paint themselves back. */
#divPax table,,#divHotel table,,#divFlight table,,#divTicket table,,#divDomestic table,,#divDirectHotel table,,#divContact table,,#divCare table,,#divMail table,#divPax tbody,#divHotel tbody,#divFlight tbody,#divTicket tbody,#divDomestic tbody,#divDirectHotel tbody,#divContact tbody,#divCare tbody,#divMail tbody,#divPax tr,#divHotel tr,#divFlight tr,#divTicket tr,#divDomestic tr,#divDirectHotel tr,#divContact tr,#divCare tr,#divMail tr,#divPax td,#divHotel td,#divFlight td,#divTicket td,#divDomestic td,#divDirectHotel td,#divContact td,#divCare td,#divMail td,#divPax th,#divHotel th,#divFlight th,#divTicket th,#divDomestic th,#divDirectHotel th,#divContact th,#divCare th,#divMail th,#divPax div,#divHotel div,#divFlight div,#divTicket div,#divDomestic div,#divDirectHotel div,#divContact div,#divCare div,#divMail div,#divPax form,#divHotel form,#divFlight form,#divTicket form,#divDomestic form,#divDirectHotel form,#divContact form,#divCare form,#divMail form,#divPax p,#divHotel p,#divFlight p,#divTicket p,#divDomestic p,#divDirectHotel p,#divContact p,#divCare p,#divMail p{
background-color:transparent!important;background-image:none!important;
}
/* THE DIALOG IS ONE CARD, NOT A STACK OF NARROW TABLES.
Each dialog is built from two or more tables carrying old fixed widths in the
markup (the ticket one is width="350px" for the title and 406px for the fields).
Inside a dialog that is now 560px wide those left a band of backdrop showing down
the right-hand side, which read as a ghost of the dialog. Make every direct table
fill the card, and paint the card itself so any remaining gap is white. */
#divPax,#divHotel,#divFlight,#divTicket,#divDomestic,#divDirectHotel,#divContact,#divCare,#divMail{
background:var(--ej-white)!important;overflow-x:hidden;
}
#divPax > form,#divHotel > form,#divFlight > form,#divTicket > form,#divDomestic > form,#divDirectHotel > form,#divContact > form,#divCare > form,#divMail > form{
display:block;
}
#divPax > form > table,#divHotel > form > table,#divFlight > form > table,#divTicket > form > table,#divDomestic > form > table,#divDirectHotel > form > table,#divContact > form > table,#divCare > form > table,#divMail > form > table{
width:100%!important;max-width:100%!important;
}
/* the card: no tiled photograph, no black hairlines */
#divPax > form > table,#divHotel > form > table,#divFlight > form > table,#divTicket > form > table,#divDomestic > form > table,#divDirectHotel > form > table,#divContact > form > table,#divCare > form > table,#divMail > form > table{
background:var(--ej-white)!important;background-image:none!important;
border:0!important;border-collapse:collapse!important;
font-family:var(--ej-sans)!important;font-size:16px!important;color:var(--ej-ink)!important;
}
#divPax > form > table > tbody > tr > td,#divHotel > form > table > tbody > tr > td,#divFlight > form > table > tbody > tr > td,#divTicket > form > table > tbody > tr > td,#divDomestic > form > table > tbody > tr > td,#divDirectHotel > form > table > tbody > tr > td,#divContact > form > table > tbody > tr > td,#divCare > form > table > tbody > tr > td,#divMail > form > table > tbody > tr > td{
background:transparent!important;background-image:none!important;
border:0!important;
font-family:var(--ej-sans)!important;font-size:16px!important;color:var(--ej-ink)!important;
vertical-align:middle;
}
#divPax b,#divHotel b,#divFlight b,#divTicket b,#divDomestic b,#divDirectHotel b,#divContact b,#divCare b,#divMail b{color:var(--ej-navy)!important;font-weight:700;}
/* ================================== one left edge, one vertical rhythm ===== */
/* EVERY LABEL, FIELD AND CAPTION IN A DIALOG SHARES ONE INDENT.
The inset used to be written on each stacked cell, and these dialogs nest
tables two and three deep, so a field inside an inner table was pushed in
twice while a caption in the outer cell was pushed in once: within a single
card the content sat at 25px, 45px and 47px. The inset is now carried by
whichever cell is OUTERMOST -- a cell inside another cell adds nothing -- so
depth cannot change where a row starts. */
#divPax td,#divHotel td,#divFlight td,#divTicket td,#divDomestic td,#divDirectHotel td,#divContact td,#divCare td,#divMail td{
padding-left:20px!important;padding-right:20px!important;
padding-top:0!important;padding-bottom:0!important;
/* the markup carries height="47" and height="49" attributes, which a table
cell reads as a minimum and a block reads as a ceiling: once these cells
became blocks, Taking Care of You clamped its content to 47px and the
dietary questions were drawn over the traveller list. */
height:auto!important;
}
#divPax td td,#divHotel td td,#divFlight td td,#divTicket td td,#divDomestic td td,#divDirectHotel td td,#divContact td td,#divCare td td,#divMail td td{padding-left:0!important;padding-right:0!important;}
#divPax table,#divHotel table,#divFlight table,#divTicket table,#divDomestic table,#divDirectHotel table,#divContact table,#divCare table,#divMail table{padding:0!important;}
/* ONE GAP BETWEEN A LABEL AND THE FIELD IT NAMES.
The gap used to come from cell padding, which differs per row, so no two
labels sat the same distance above their control. It now comes from the
caption's own margin, which is the same object everywhere: 14px of air above
a field group, 6px between its label and its control. */
#divPax tr:has(> td:first-child > b) > td:first-child,#divHotel tr:has(> td:first-child > b) > td:first-child,#divFlight tr:has(> td:first-child > b) > td:first-child,#divTicket tr:has(> td:first-child > b) > td:first-child,#divDomestic tr:has(> td:first-child > b) > td:first-child,#divDirectHotel tr:has(> td:first-child > b) > td:first-child,#divContact tr:has(> td:first-child > b) > td:first-child,#divCare tr:has(> td:first-child > b) > td:first-child,#divMail tr:has(> td:first-child > b) > td:first-child{padding-top:14px!important;}
#divPax tr:has(> td:first-child > b) > td:first-child > b,#divHotel tr:has(> td:first-child > b) > td:first-child > b,#divFlight tr:has(> td:first-child > b) > td:first-child > b,#divTicket tr:has(> td:first-child > b) > td:first-child > b,#divDomestic tr:has(> td:first-child > b) > td:first-child > b,#divDirectHotel tr:has(> td:first-child > b) > td:first-child > b,#divContact tr:has(> td:first-child > b) > td:first-child > b,#divCare tr:has(> td:first-child > b) > td:first-child > b,#divMail tr:has(> td:first-child > b) > td:first-child > b{display:block;margin:0 0 6px!important;}
#divPax tr:has(> td:first-child > b) > td:last-child,#divHotel tr:has(> td:first-child > b) > td:last-child,#divFlight tr:has(> td:first-child > b) > td:last-child,#divTicket tr:has(> td:first-child > b) > td:last-child,#divDomestic tr:has(> td:first-child > b) > td:last-child,#divDirectHotel tr:has(> td:first-child > b) > td:last-child,#divContact tr:has(> td:first-child > b) > td:last-child,#divCare tr:has(> td:first-child > b) > td:last-child,#divMail tr:has(> td:first-child > b) > td:last-child{padding-bottom:0!important;}
/* a section caption -- a bold heading in a cell that then holds a table of its
own fields -- keeps the same left edge and only a little less air under it */
#divPax td:has(> table) > b,#divHotel td:has(> table) > b,#divFlight td:has(> table) > b,#divTicket td:has(> table) > b,#divDomestic td:has(> table) > b,#divDirectHotel td:has(> table) > b,#divContact td:has(> table) > b,#divCare td:has(> table) > b,#divMail td:has(> table) > b{margin:0 0 2px!important;}
/* prose, notes and anything else that is not a labelled field still needs air */
#divPax > form > table > tbody > tr:not(:has(> td:first-child > b)) > td,#divHotel > form > table > tbody > tr:not(:has(> td:first-child > b)) > td,#divFlight > form > table > tbody > tr:not(:has(> td:first-child > b)) > td,#divTicket > form > table > tbody > tr:not(:has(> td:first-child > b)) > td,#divDomestic > form > table > tbody > tr:not(:has(> td:first-child > b)) > td,#divDirectHotel > form > table > tbody > tr:not(:has(> td:first-child > b)) > td,#divContact > form > table > tbody > tr:not(:has(> td:first-child > b)) > td,#divCare > form > table > tbody > tr:not(:has(> td:first-child > b)) > td,#divMail > form > table > tbody > tr:not(:has(> td:first-child > b)) > td{padding-top:12px!important;}
/* the clock stays on one line, and starts where its own label starts */
#divPax tr:has(> td > select[name$="Hour"]) > td:not(:first-child),#divHotel tr:has(> td > select[name$="Hour"]) > td:not(:first-child),#divFlight tr:has(> td > select[name$="Hour"]) > td:not(:first-child),#divTicket tr:has(> td > select[name$="Hour"]) > td:not(:first-child),#divDomestic tr:has(> td > select[name$="Hour"]) > td:not(:first-child),#divDirectHotel tr:has(> td > select[name$="Hour"]) > td:not(:first-child),#divContact tr:has(> td > select[name$="Hour"]) > td:not(:first-child),#divCare tr:has(> td > select[name$="Hour"]) > td:not(:first-child),#divMail tr:has(> td > select[name$="Hour"]) > td:not(:first-child){
display:inline-block!important;width:auto!important;vertical-align:middle;
padding-right:0!important;
}
#divPax tr:has(> td > select[name$="Hour"]) > td:nth-child(n+3),#divHotel tr:has(> td > select[name$="Hour"]) > td:nth-child(n+3),#divFlight tr:has(> td > select[name$="Hour"]) > td:nth-child(n+3),#divTicket tr:has(> td > select[name$="Hour"]) > td:nth-child(n+3),#divDomestic tr:has(> td > select[name$="Hour"]) > td:nth-child(n+3),#divDirectHotel tr:has(> td > select[name$="Hour"]) > td:nth-child(n+3),#divContact tr:has(> td > select[name$="Hour"]) > td:nth-child(n+3),#divCare tr:has(> td > select[name$="Hour"]) > td:nth-child(n+3),#divMail tr:has(> td > select[name$="Hour"]) > td:nth-child(n+3){padding-left:0!important;}
/* THE ROWS THAT ARE NOT REALLY ROWS.
A field table's inner rows -- the three parts of a date, the two parts of a
time -- were being given the same air as a paragraph of prose, because their
first cell holds a control rather than a caption. Air belongs to the group,
not to its pieces, so only an OUTERMOST row gets it. */
#divPax td tr > td,#divHotel td tr > td,#divFlight td tr > td,#divTicket td tr > td,#divDomestic td tr > td,#divDirectHotel td tr > td,#divContact td tr > td,#divCare td tr > td,#divMail td tr > td{padding-top:0!important;}
/* CANCEL AND DONE SIT JUST BELOW THE LAST FIELD.
Their row is two cells wide: an empty one, then the buttons. Stacked as blocks
the empty cell became a band of dead space the height of a cell's padding, and
that -- not the buttons' own margin -- is what pushed them so far down the
card. Drop the empty cell and give the row one padding. */
#divPax tr:has(> td > input[type="button"]) > td:not(:has(input)):not(:has(select)):not(:has(textarea)):not(:has(b)):not(:has(a)):not(:has(img)),#divHotel tr:has(> td > input[type="button"]) > td:not(:has(input)):not(:has(select)):not(:has(textarea)):not(:has(b)):not(:has(a)):not(:has(img)),#divFlight tr:has(> td > input[type="button"]) > td:not(:has(input)):not(:has(select)):not(:has(textarea)):not(:has(b)):not(:has(a)):not(:has(img)),#divTicket tr:has(> td > input[type="button"]) > td:not(:has(input)):not(:has(select)):not(:has(textarea)):not(:has(b)):not(:has(a)):not(:has(img)),#divDomestic tr:has(> td > input[type="button"]) > td:not(:has(input)):not(:has(select)):not(:has(textarea)):not(:has(b)):not(:has(a)):not(:has(img)),#divDirectHotel tr:has(> td > input[type="button"]) > td:not(:has(input)):not(:has(select)):not(:has(textarea)):not(:has(b)):not(:has(a)):not(:has(img)),#divContact tr:has(> td > input[type="button"]) > td:not(:has(input)):not(:has(select)):not(:has(textarea)):not(:has(b)):not(:has(a)):not(:has(img)),#divCare tr:has(> td > input[type="button"]) > td:not(:has(input)):not(:has(select)):not(:has(textarea)):not(:has(b)):not(:has(a)):not(:has(img)),#divMail tr:has(> td > input[type="button"]) > td:not(:has(input)):not(:has(select)):not(:has(textarea)):not(:has(b)):not(:has(a)):not(:has(img)){display:none!important;}
#divPax tr:has(> td > input[type="button"]) > td:has(> input[type="button"]),#divHotel tr:has(> td > input[type="button"]) > td:has(> input[type="button"]),#divFlight tr:has(> td > input[type="button"]) > td:has(> input[type="button"]),#divTicket tr:has(> td > input[type="button"]) > td:has(> input[type="button"]),#divDomestic tr:has(> td > input[type="button"]) > td:has(> input[type="button"]),#divDirectHotel tr:has(> td > input[type="button"]) > td:has(> input[type="button"]),#divContact tr:has(> td > input[type="button"]) > td:has(> input[type="button"]),#divCare tr:has(> td > input[type="button"]) > td:has(> input[type="button"]),#divMail tr:has(> td > input[type="button"]) > td:has(> input[type="button"]){
padding:14px 20px 16px!important;text-align:right!important;
}
/* THE TWO FLIGHT BLOCKS ARE SUB-HEADINGS, NOT FIELD LABELS.
Set in the eyebrow style they read as the caption of the field beneath them,
which is the wrong rank: each one heads a whole block of six fields. Give them
the voice the form uses for a section title, one size down -- the display
serif over a gold hairline -- so the hierarchy inside the card is legible at a
glance: navy band, sub-heading, eyebrow, field. */
#divFlight b[class*="Caption"]:not(#ej-x):not([style*="none"]){
display:block;font-family:var(--ej-serif)!important;font-size:21px!important;
font-weight:600!important;font-style:normal;letter-spacing:.2px;
text-transform:none!important;line-height:1.2;
color:var(--ej-navy)!important;
margin:0 0 4px!important;padding:0 0 8px!important;
border-bottom:1px solid var(--ej-gold)!important;
}
/* A TYPING BOX IN A DIALOG IS THE SAME OBJECT AS ONE IN THE FORM.
The markup gives these inline heights of 40px and 50px, measured for a much
smaller type; border-box takes the padding out of that, so the health note
and the dietary note were single scrolling lines. Give them the rows their
markup asks for at the type they are now set in. */
#divPax textarea,#divHotel textarea,#divFlight textarea,#divTicket textarea,#divDomestic textarea,#divDirectHotel textarea,#divContact textarea,#divCare textarea,#divMail textarea{
height:auto!important;min-height:78px;resize:vertical;
}
/* A DATE IS ONE CONTROL, not three stacked ones.
Month, day and year live in a little table of their own inside the field
cell. Now that a converted table's rows are blocks, that row's three cells
would stack, so the parts of a single date are put back on one line. The
row is matched by the month (or hour) it holds, and only inside a nested
table, so prose rows keep their own layout. */
#divPax td table > tbody > tr:has(> td > select[name$="Month"]) > td:not(:has(b)),#divHotel td table > tbody > tr:has(> td > select[name$="Month"]) > td:not(:has(b)),#divFlight td table > tbody > tr:has(> td > select[name$="Month"]) > td:not(:has(b)),#divTicket td table > tbody > tr:has(> td > select[name$="Month"]) > td:not(:has(b)),#divDomestic td table > tbody > tr:has(> td > select[name$="Month"]) > td:not(:has(b)),#divDirectHotel td table > tbody > tr:has(> td > select[name$="Month"]) > td:not(:has(b)),#divContact td table > tbody > tr:has(> td > select[name$="Month"]) > td:not(:has(b)),#divCare td table > tbody > tr:has(> td > select[name$="Month"]) > td:not(:has(b)),#divMail td table > tbody > tr:has(> td > select[name$="Month"]) > td:not(:has(b)),#divPax td table > tbody > tr:has(> td > select[name$="Hour"]) > td:not(:has(b)),#divHotel td table > tbody > tr:has(> td > select[name$="Hour"]) > td:not(:has(b)),#divFlight td table > tbody > tr:has(> td > select[name$="Hour"]) > td:not(:has(b)),#divTicket td table > tbody > tr:has(> td > select[name$="Hour"]) > td:not(:has(b)),#divDomestic td table > tbody > tr:has(> td > select[name$="Hour"]) > td:not(:has(b)),#divDirectHotel td table > tbody > tr:has(> td > select[name$="Hour"]) > td:not(:has(b)),#divContact td table > tbody > tr:has(> td > select[name$="Hour"]) > td:not(:has(b)),#divCare td table > tbody > tr:has(> td > select[name$="Hour"]) > td:not(:has(b)),#divMail td table > tbody > tr:has(> td > select[name$="Hour"]) > td:not(:has(b)){
display:inline-block!important;width:auto!important;vertical-align:middle;
padding-left:0!important;padding-right:0!important;
}
/* THE COLON BETWEEN THE HOUR AND THE MINUTE GOES.
The markup sets the two dropdowns as if they were a digital clock face. They
are two labelled dropdowns; the separator only crowds the row. It is the one
element sitting directly after the hour, so it can go without touching the
markup the endpoints render. */
#divPax select[name$="Hour"] + b,#divHotel select[name$="Hour"] + b,#divFlight select[name$="Hour"] + b,#divTicket select[name$="Hour"] + b,#divDomestic select[name$="Hour"] + b,#divDirectHotel select[name$="Hour"] + b,#divContact select[name$="Hour"] + b,#divCare select[name$="Hour"] + b,#divMail select[name$="Hour"] + b,
#book select[name$="Hour"] + b{display:none!important;}
/* The hour, the minute and AM/PM are laid out by the row, not by the whitespace
between them: a flex line ignores stray text nodes, so the gaps are the same
8px the date row uses, whatever the markup happens to contain. */
#divPax tr:has(> td > select[name$="Hour"]) > td:not(:first-child),#divHotel tr:has(> td > select[name$="Hour"]) > td:not(:first-child),#divFlight tr:has(> td > select[name$="Hour"]) > td:not(:first-child),#divTicket tr:has(> td > select[name$="Hour"]) > td:not(:first-child),#divDomestic tr:has(> td > select[name$="Hour"]) > td:not(:first-child),#divDirectHotel tr:has(> td > select[name$="Hour"]) > td:not(:first-child),#divContact tr:has(> td > select[name$="Hour"]) > td:not(:first-child),#divCare tr:has(> td > select[name$="Hour"]) > td:not(:first-child),#divMail tr:has(> td > select[name$="Hour"]) > td:not(:first-child){
display:inline-flex!important;align-items:center;gap:8px;width:auto!important;
}
#divPax tr:has(> td > select[name$="Hour"]) > td:not(:first-child) > select,#divHotel tr:has(> td > select[name$="Hour"]) > td:not(:first-child) > select,#divFlight tr:has(> td > select[name$="Hour"]) > td:not(:first-child) > select,#divTicket tr:has(> td > select[name$="Hour"]) > td:not(:first-child) > select,#divDomestic tr:has(> td > select[name$="Hour"]) > td:not(:first-child) > select,#divDirectHotel tr:has(> td > select[name$="Hour"]) > td:not(:first-child) > select,#divContact tr:has(> td > select[name$="Hour"]) > td:not(:first-child) > select,#divCare tr:has(> td > select[name$="Hour"]) > td:not(:first-child) > select,#divMail tr:has(> td > select[name$="Hour"]) > td:not(:first-child) > select{
margin-right:0!important;margin-left:0!important;
}
/* THE FLIGHTS CARD KEEPS ITS TWO BLOCKS TOGETHER AT EVERY WIDTH.
The markup lays arrival and departure out as two table columns with their
captions in a row of their own, so read in document order both captions come
first and both blocks of fields follow, each headed by nothing. Ordering the
four cells puts every caption back above its own fields -- and a phone needs
that more than a desktop does, not less. */
#divFlight:not(#ej-x) > form > table:nth-of-type(2){display:grid!important;grid-template-columns:1fr!important;}
#divFlight:not(#ej-x) > form > table:nth-of-type(2) > tbody,#divFlight:not(#ej-x) > form > table:nth-of-type(2) > tbody > tr{display:contents!important;}
#divFlight:not(#ej-x) > form > table:nth-of-type(2) > tbody > tr > td{display:block!important;width:auto!important;}
#divFlight:not(#ej-x) > form > table:nth-of-type(2) > tbody > tr:nth-child(1) > td:nth-child(1){order:1;}
#divFlight:not(#ej-x) > form > table:nth-of-type(2) > tbody > tr:nth-child(2) > td:nth-child(1){order:2;}
#divFlight:not(#ej-x) > form > table:nth-of-type(2) > tbody > tr:nth-child(1) > td:nth-child(3){order:3;padding-top:22px!important;}
#divFlight:not(#ej-x) > form > table:nth-of-type(2) > tbody > tr:nth-child(2) > td:nth-child(3){order:4;}
#divFlight:not(#ej-x) > form > table:nth-of-type(2) > tbody > tr > td:nth-child(2){display:none!important;}
/* the stacked-layout duplicates of the two captions; the ordering above means
every caption already heads its own block, at every width */
#divFlight b[class*="Caption2"]:not(#ej-x):not(#ej-y){display:none!important;}
/* ============================================= one checkbox, everywhere ==== */
/* The native box was inheriting .form-control from the legacy markup, which is
display:block;width:100%;padding:.375rem .75rem -- so the browser stretched the
tick into a 45px slab of blue. Draw the box ourselves instead: the same 18px
square, the same palette and the same focus ring in every dialog and in the
form. The input keeps its name and its value, so the Submit path is unchanged. */
#divPax input[type="checkbox"],#divHotel input[type="checkbox"],#divFlight input[type="checkbox"],#divTicket input[type="checkbox"],#divDomestic input[type="checkbox"],#divDirectHotel input[type="checkbox"],#divContact input[type="checkbox"],#divCare input[type="checkbox"],#divMail input[type="checkbox"],
#book .bookinfo_text .ejChkRow input[type="checkbox"]{
-webkit-appearance:none!important;appearance:none!important;
box-sizing:border-box!important;
width:18px!important;height:18px!important;min-height:0!important;max-width:18px!important;
flex:0 0 18px;display:inline-block;vertical-align:middle;position:relative;
margin:0!important;padding:0!important;
border:1.5px solid #B9AF9C!important;border-radius:4px!important;
background:var(--ej-white)!important;background-image:none!important;
box-shadow:none!important;cursor:pointer;
transition:border-color .12s ease, background-color .12s ease;
}
#divPax input[type="checkbox"]:hover,#divHotel input[type="checkbox"]:hover,#divFlight input[type="checkbox"]:hover,#divTicket input[type="checkbox"]:hover,#divDomestic input[type="checkbox"]:hover,#divDirectHotel input[type="checkbox"]:hover,#divContact input[type="checkbox"]:hover,#divCare input[type="checkbox"]:hover,#divMail input[type="checkbox"]:hover{border-color:var(--ej-gold)!important;}
#divPax input[type="checkbox"]:checked,#divHotel input[type="checkbox"]:checked,#divFlight input[type="checkbox"]:checked,#divTicket input[type="checkbox"]:checked,#divDomestic input[type="checkbox"]:checked,#divDirectHotel input[type="checkbox"]:checked,#divContact input[type="checkbox"]:checked,#divCare input[type="checkbox"]:checked,#divMail input[type="checkbox"]:checked{background:var(--ej-navy)!important;border-color:var(--ej-navy)!important;}
#divPax input[type="checkbox"]:checked::after,#divHotel input[type="checkbox"]:checked::after,#divFlight input[type="checkbox"]:checked::after,#divTicket input[type="checkbox"]:checked::after,#divDomestic input[type="checkbox"]:checked::after,#divDirectHotel input[type="checkbox"]:checked::after,#divContact input[type="checkbox"]:checked::after,#divCare input[type="checkbox"]:checked::after,#divMail input[type="checkbox"]:checked::after{
content:"";position:absolute;left:5px;top:1px;width:4px;height:9px;
border:solid var(--ej-white);border-width:0 2px 2px 0;transform:rotate(45deg);
}
#divPax input[type="checkbox"]:focus,#divHotel input[type="checkbox"]:focus,#divFlight input[type="checkbox"]:focus,#divTicket input[type="checkbox"]:focus,#divDomestic input[type="checkbox"]:focus,#divDirectHotel input[type="checkbox"]:focus,#divContact input[type="checkbox"]:focus,#divCare input[type="checkbox"]:focus,#divMail input[type="checkbox"]:focus{box-shadow:0 0 0 3px rgba(219,177,102,.45)!important;}
#divPax input[type="checkbox"]:focus:not(:focus-visible),#divHotel input[type="checkbox"]:focus:not(:focus-visible),#divFlight input[type="checkbox"]:focus:not(:focus-visible),#divTicket input[type="checkbox"]:focus:not(:focus-visible),#divDomestic input[type="checkbox"]:focus:not(:focus-visible),#divDirectHotel input[type="checkbox"]:focus:not(:focus-visible),#divContact input[type="checkbox"]:focus:not(:focus-visible),#divCare input[type="checkbox"]:focus:not(:focus-visible),#divMail input[type="checkbox"]:focus:not(:focus-visible){box-shadow:none!important;}
#divPax input[type="checkbox"]:focus-visible,#divHotel input[type="checkbox"]:focus-visible,#divFlight input[type="checkbox"]:focus-visible,#divTicket input[type="checkbox"]:focus-visible,#divDomestic input[type="checkbox"]:focus-visible,#divDirectHotel input[type="checkbox"]:focus-visible,#divContact input[type="checkbox"]:focus-visible,#divCare input[type="checkbox"]:focus-visible,#divMail input[type="checkbox"]:focus-visible{outline:none!important;box-shadow:0 0 0 3px rgba(219,177,102,.45)!important;}
/* A ROW THAT HOLDS NOTHING BUT HIDDEN INPUTS TAKES NO SPACE.
Several dialogs park their hidden fields in a table row of their own. The row
renders nothing, but it still took a cell's worth of padding, which is where
the wide, unexplained band above Cancel and Done came from. */
#divPax td:has(> input[type="hidden"]):not(:has(input:not([type="hidden"]))):not(:has(select)):not(:has(textarea)):not(:has(b)),#divHotel td:has(> input[type="hidden"]):not(:has(input:not([type="hidden"]))):not(:has(select)):not(:has(textarea)):not(:has(b)),#divFlight td:has(> input[type="hidden"]):not(:has(input:not([type="hidden"]))):not(:has(select)):not(:has(textarea)):not(:has(b)),#divTicket td:has(> input[type="hidden"]):not(:has(input:not([type="hidden"]))):not(:has(select)):not(:has(textarea)):not(:has(b)),#divDomestic td:has(> input[type="hidden"]):not(:has(input:not([type="hidden"]))):not(:has(select)):not(:has(textarea)):not(:has(b)),#divDirectHotel td:has(> input[type="hidden"]):not(:has(input:not([type="hidden"]))):not(:has(select)):not(:has(textarea)):not(:has(b)),#divContact td:has(> input[type="hidden"]):not(:has(input:not([type="hidden"]))):not(:has(select)):not(:has(textarea)):not(:has(b)),#divCare td:has(> input[type="hidden"]):not(:has(input:not([type="hidden"]))):not(:has(select)):not(:has(textarea)):not(:has(b)),#divMail td:has(> input[type="hidden"]):not(:has(input:not([type="hidden"]))):not(:has(select)):not(:has(textarea)):not(:has(b)){
padding:0!important;line-height:0!important;font-size:0!important;
}
/* THE STANDALONE CHECKBOXES USE THE SAME COMPONENT AS THE CHECKLISTS.
The markup floats the box left and scales it 1.5x, which drew a box half again
the size of every other control and dropped it out of the row's flow. Put it
back in the row: same 18px square, its label beside it, both on the card's
edge, and the label is the hit area the browser already gave us through