/* ==========================================================================
   COMMON ADMIN THEME - theme_version_02
   booksultan - the source palette, unchanged

   Built from Content/css/Booksultan_css/ with the palette re-pointed.
   Same palette as the Booksultan sheet (#ff5a00 blue, #c11026
   accent). This version exists so the Booksultan look can be used as
   the COMMON theme by any tenant, whatever that tenant's own ImgName
   folder holds - no colour is converted here.

   Same selectors, same rules, same --bs-* token NAMES as the Booksultan
   sheet, so every screen it styles is styled identically here - only the
   colours differ. Enable with the theme_version_02 key in Web.config.

   Regenerate with scratchpad/make_themes.py rather than hand-editing, so
   this stays in step with the Booksultan sheet it is derived from.
   ========================================================================== */

/* main style overrides */
.payoutBtn, .commisnSetBtn, .sBtn, a.paginate_button.current, .vBtn,  
.manageSbtn, .exBtn, .pubBtn, .browseBtn1 button, .resourceBtn1,.resourceBtn2, 
.resourceAdd, .qSearchBtn, .qSearchBtn:hover, .saveDbtn, .saveDbtn:hover, 
.dayLabel span, .or_sep, .generate_code_btn, .reset_code_btn,
.searchBtn1, .addIcon i, #mainmenu a:hover, .theme_color_bg, .assign_to_right_arr,.assign_to_left_arr,
.search_btn_big, .save_btn, .tabbable-line > .nav-tabs, .breadcrumb li.completed a, .multi_plus, 
.book_f_btn, .default_blue_btns, .memb_sel_btn, .bg_color_base, .hotel_select_btn, 
 .hotel_select_btn.hotel_select_btn_default:hover, .name_search_go_btn, .main_select_btn_hotel, 
.addon_go_btn, .btn_center, .material-scrolltop::before, .full_summary h4, 
.hotel_summary, .addBtns, .new_transfers, .resultBtn, .modifySearchForms .modifyClose, 
.secont_details .resultBtn, .map_details h4, .action_btn, .mobile_tkt_hd, .transfers_mobile_tkt_hd, 
.btnBuy, .colsIcon, .back_to_result, .proceedBtn, .hotel_less_detail h5,  .action_btn,
.eventCalendar-daysList li.eventCalendar-dayWithEvents a, .ui-widget-header .ui-state-active,
.ui-slider-horizontal .ui-slider-handle, .bg-primary, .breadcrumb li.active a, .ins_title
{background:#ff5a00;}




.arw,.arw2, .dateIcon::before, .dateIcon1::before , .minimal_subtitle, .minimal_subtitle2,
.filter_main_title, .calendarIcon::before, .menu-bar ul li span, ul#secondmenu li ul li a:hover,ul.secondmenu li ul li a:hover,
ul#secondmenu li ul li a.active_link,ul.secondmenu li ul li a.active_link, .formSubTitle h5, 
.formSubTitle h3, input[type="checkbox"]:checked + label::before,input[type="checkbox"]:checked + input + label::before,
input[type="radio"]:checked + label::before,input[type="radio"]:checked + input + label::before, 
.sub2Div h4, .uploadBlock h3, .text-success, .meterial_modal .modal-title, .tab_common_heading, 
.theme_color_text, .price_total, .data_table_heading, .small_text, .title_area h1, .summary h1, 
.box_title, .colored_price, .layover_time, .saved_data a,.saved_data2 a, .room_count_label, 
.price_new, .progress_bg .prog_page .way_load h4, .option_assign, .popup_common_heading, 
.summary_col02 > p, .tabContentInner .main_title, .glyphicon-plus, .glyphicon-remove, 
.transfers_name h3, .mz-search__stars i, .flightPrice,  .green, .selection_clr,  .more, 
.flightPrice, .form_left h4, .trsfers_name_car h3, .transfers_reslt h2, .ticketCatBox h5, .innerContents h2,
.subTitle1, .line_2, .passengerBox h3, .morphsearch-input, .morphsearch.open .morphsearch-input, 
.eventCalendar-list li a.eventCalendar-eventTitle, .ui-widget-header .ui-state-focus, #popup_title, a, .main-head
{color:#ff5a00}




a.paginate_button.current,.has-error .form-control{
    border-color:#ff5a00 !important
}
.textBox1:focus,.textBox2:focus,.textBox4:focus .textArea:focus,.new-row:focus,.inline_text_input:focus{
    outline:1px solid #ff5a00 !important
}
.pagination>li>a,.pagination>li>span{
    border-bottom:2px solid #ff5a00 !important
}
.form-group2 .alert-success,.form-group .alert-success,.input-group .alert-success{
    border-top:5px solid #ff5a00 !important
}
.notifiactions ul li:hover{
    border-left:5px solid #ff5a00 !important
}
.breadcrumb li.completed a:after{
    border-left:30px solid #ff5a00 !important
}
.memb_sel_btn{
    border:1px solid #ff5a00 !important
}
.name_search_go_btn{
    border:1px solid #ff5a00 !important
}
.breadcrumb li.completed a::after{
    border-left:30px solid #ff5a00 !important
}
#main_cat_menu li a.active_menu {
    background-color: #ff5a00;
}
.vBtn, .eBtn, .dBtn, .uBtn, .genBtn, .dltBtn {
    color: #fff !important;
}
.pagination>.active>a, .pagination>.active>a:hover{
	background-color: #ff5a00;
    border-color: #ff5a00;
    color:#fff !important;
}
#main_cat_menu li a, .book_f_btn , .tabbable-line > .nav-tabs > li > a{
    color: #FFFFFF !important;  
}
.breadcrumb li.active a:after {
    border-left: 30px solid #ff5a00;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    background: #ff5a00 none repeat scroll 0 0 !important;
    color: #ffffff !important; 
}
.btn-primary {
    color: #fff !important;
    background-color: #ff5a00;
    border-color: #ff5a00 !important;

}
.btn-primary:hover, .tabbable-line > .nav-tabs > li.active > a {
    background-color: #333;  
}
/* main style overrides */

/* other style overrides */
.ui-slider-horizontal .ui-slider-handle{
    border:1px solid #ff5a00!important
}
.ui-slider-horizontal .ui-slider-handle:hover{
    border:1px solid #ff5a00!important
}
/* other style overrides */

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
    color:#ff5a00 !important;
}
.farebrkuphd{
    background-color:#ff5a00;
}
.ui-slider-horizontal .ui-slider-handle{
    background:#ff5a00 !important;  
    border: 1px solid #ff5a00 !important;
}
span.alertmsgs {
    color: #f00;
}
.price_theme_color{ 
    color: #ff5a00; 
}
.price_total_hilight{ 
    color: #ff5a00; 
}
.details_block .title_label{ 
    color: #4e4e4e; 
}
.toggle_details_links li a{ 
    color: #4e4e4e; 
}
.hotel_less_detail h5{ 
    color:#fff; 
}
#popup_title{ 
    background: #ff5a00;
}
.clearing{ 
    border: 1px solid #ff5a00; 
}
.clearing:after{ 
    color: #ff5a00;
}
.save_edit{ 
    background:#ff5a00;
}
.progress_bg .prog_page .way_load h4{ 
    color:#ff5a00;
}
.page_heading{ 
    color:#ff5a00 !important;
}
.tranfrcnclpolicy{ 
    color:#ff5a00;
}
button.confirmbutton:hover, .confirmbutton_wht:hover {
    background-color: #ff5a00;
}
button.confirmbutton, .confirmbutton_wht{
    background-color: #ff5a00;
}
#popup_container{ 
    border: solid 3px #ff5a00 !important; 
}
#popup_title{
    background: #ff5a00 !important;

}
button.confirmbutton, .confirmbutton_wht{
    background: #ff5a00 !important;
}
.map_pagination .pagination > li > a{ 
    margin-bottom:5px; 
    color:#ff5a00;
}
.sportsCollapse span.glyphicon{ 
    color:#fff;
}
.ticketCatBox span.glyphicon{ 
    color:#fff;
}
.activityInner .breadcrumb li.active a { 
    background: #ff5a00;
}
.activityInner .breadcrumb li.active a:after {
    border-left: 30px solid #ff5a00;
}
.pagination>li>a{ 
    color: #ff5a00;
}
.searchBtnLoader {
    background:#ba317769  url('../images/15.gif');
    /*background-image: url('../images/15.gif');*/
    background-repeat: no-repeat;
    width: 100%;
    padding: 7px 0;
    text-align: center;
    background-size: cover;
}      
/*new home design changes shinto*/
.main-head {
    margin-top: 1px;
    font-family: "Calibri-Light", sans-serif;
    font-size: 20px;
    display: inline-block;
    position: relative;
    text-transform: capitalize;
    background: #999b9e;
    width: 100%;
    padding: 8px;
    color: #fff;
    cursor: pointer;
    margin-bottom: 0px;
    background-image: url(../images/hmdownarow.png);
    background-repeat: no-repeat;
    background-position: 99%;
}
.help_hover_btn {
    color: #ffffff;
    margin-left: 10px;
    font-size: 20px;
    cursor: help;
    position: relative;
    right:0px;
    top:-10px;
}
.mobile_box_row {
    margin: 0;
    padding: 10px;
    border: 1px solid #737373;
    width: 100%;
    float: left;
}
.hMdttlshead{
    background:#ff5a00; 
    color:#fff; 
    width:100%; 
    float:left; 
    padding:10px; 
    font-size:20px; 
    background-image:url(../images/hmdownarow.png); 
    background-repeat:no-repeat;
    background-position:99%; 
    cursor:pointer;

}
.hMbookingdetailsfull{
    float:left; 
    width:100%; 
    padding:25px 10px 10px;  
    border: 1px solid #737373;
}
.hMAgsphead{
    background:#ff5a00; 
    color:#fff; 
    width:100%; 
    float:left; 
    margin: 1px 0; 
    padding:10px; 
    font-size:20px; 
    background-image:url(../images/hmdownarow.png); 
    background-repeat:no-repeat;
    background-position:99%; 
    cursor:pointer;

}
.hMAgencydetailsfull{
    float:left; 
    width:100%; 
    padding:25px 10px 10px;  
    border: 1px solid #737373;
}
#TransactionCounts{
    margin-bottom:30px;
}
.hMSaleshead {
    background:#ff5a00; 
    color:#fff; 
    width:100%; 
    float:left; 
    margin: 1px 0; 
    padding:10px; 
    font-size:20px; 
    background-image:url(../images/hmdownarow.png); 
    background-repeat:no-repeat;
    background-position:99%; 
    cursor:pointer;

}
.hMchartdegraphfull{
    float:left; 
    width:100%; 
    padding:25px 10px 10px;  
    border: 1px solid #737373;
}
/*new home design changes shinto*/
.d-flex {
    display:flex;
}
.align-items-center {
    align-items:center
}
.payCard.topup_page .radioCol label{
    position: relative !important;
}
.payCard.topup_page input[type="radio"] + label::before, .payCard.topup_page input[type="radio"] + input + label::before{
    top:5px !important;
}
.payCard.topup_page .cc_ave input[type="radio"] + label::before, .payCard.topup_page .cc_ave input[type="radio"] + input + label::before{
    top:0px !important;
}
.payCard.topup_page .cc_ave input[type="radio"]:checked + label::before, .payCard.topup_page .cc_ave input[type="radio"]:checked + input + label::before{
    top:0px !important;
}
.badge_label{
    background-color: #c11026;
}
.material-scrolltop{
    background-color: #c11026;
}
.material-scrolltop:hover{
    background-color: #c11026;
}
.packNewMtop {
    margin-top: 22px;
}

div#Filght_Transaction .tabbable-line > .tab-content {
    display: block;
}
a.dashboardMenu.SearchTabs.tabclick {
    background: #c11026;
}

.main-head {
    margin-top: 1px;
    font-family: "Calibri-Light", sans-serif;
    font-size: 20px;
    display: inline-block;
    position: relative;
    text-transform: capitalize;
    background: #999b9e;
    width: 100%;
    padding: 8px;
    color: #fff;
    cursor: pointer;
    margin-bottom: 0px;
    background-image: url(../images/hmdownarow.png);
    background-repeat: no-repeat;
    background-position: 99%;
}

.vBtn, .eBtn, .dBtn, .uBtn, .genBtn, .dltBtn {
    color: #fff !important;
    background: #c11026 !important;
}
.vBtn:hover, .eBtn:hover, .dBtn:hover, .uBtn:hover, .genBtn:hover, .dltBtn:hover {
    color: #fff !important;
    background: #c11026 !important;
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    background: #c11026 !important;
    color: #fff !important;
}
.arroMain2 {
    border-top-color: #000000 !important;
}
.selectric .button:after {
    border-top-color: #000000 !important;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
    color: #fff;
    background-color: #c11026 !important;
}
.color_theme_2 {
    color: #c11026;
}
.common_btn_light {
    color: #c11026;
    border: 1px solid #c11026;
}
.addament_btn {
    background: #c11026;
}
.meterial_modal button.close {
    color: #000000 !important;
}

/* ==========================================================================
   BOOKSULTAN ADMIN REVAMP - UI layer only
   Added 2026-10-20. Pure presentation: colours, type, radius, borders,
   shadows and spacing. No markup, no behaviour, no class names changed.
   Palette taken from the live booksultan.com stylesheet.
   Scoped to this tenant because the layout loads {ImgName}css/theme.css.
   Revert with: git checkout -- Content/css/Booksultan_css/theme.css
   ========================================================================== */

:root {
    --bs-blue: #ff5a00;
    --bs-blue-dark: #d94900;
    --bs-blue-hover: #cc4400;
    --bs-blue-soft: #ffb68a;
    --bs-blue-tint: #fff1e9;
    --bs-blue-tint2: #fff7f2;
    --bs-pink: #c11026;
    --bs-nav-bg: #232323;
    --bs-pink-hover: #a20d20;
    --bs-ink: #232323;
    --bs-muted: #4b5463;
    --bs-bg: #f5f6f8;
    --bs-line: #e2e6ec;
    --bs-line-soft: #eef0f4;
    --bs-radius: 10px;
    --bs-radius-sm: 6px;
    --bs-shadow: 0 1px 2px rgba(35, 35, 35, .08);
    --bs-shadow-md: 0 4px 14px rgba(35, 35, 35, .10);
    --bs-font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Base ---------- */
body {
    background: var(--bs-bg) !important;
    font-family: var(--bs-font) !important;
    color: var(--bs-ink);
    -webkit-font-smoothing: antialiased;
}

.all_page { background: transparent !important; }

h1, h2, h3, h4, h5, h6 { font-family: var(--bs-font) !important; color: var(--bs-ink); }

a { transition: color .15s ease; }
a:hover, a:focus { color: var(--bs-blue-hover); }

:focus-visible { outline: 2px solid var(--bs-blue); outline-offset: 2px; }

/* ---------- Header ---------- */
#header {
    background: #fff;
    border-bottom: 1px solid var(--bs-line);
    box-shadow: var(--bs-shadow);
}

.menu-bar ul li > a {
    border-radius: var(--bs-radius-sm);
    transition: background .15s ease;
}

.menu-bar ul li > a:hover { background: var(--bs-blue-tint); }

/* ---------- Primary nav bar ---------- */
.bg-primary {
    background-color: var(--bs-blue) !important;
    background-image: linear-gradient(180deg, #ff7a33 0%, #ff5a00 100%) !important;
    border: 0 !important;
    box-shadow: var(--bs-shadow);
}

/* The bar carries on from .control-mob's flat #c11026 at its left end. */
#navmenu {
    background-color: #c11026 !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: var(--bs-shadow);
}

#cpanel {
    color: var(--bs-ink) !important;
    font-weight: 600;
    letter-spacing: .04em;
}

.bg-darkwhite { background: #fff !important; }

#main_cat_menu li a {
    border-radius: 0;
    font-weight: 600;
    letter-spacing: .01em;
    transition: background .15s ease;
}

#main_cat_menu li a.active_menu,
a.dashboardMenu.SearchTabs.tabclick {
    background: var(--bs-blue) !important;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18);
}

#mainmenu a:hover { background: #a20d20 !important; }

.control-panel,
.control-panel-right { border-radius: var(--bs-radius-sm); }

/* ---------- Control Panel sidebar (full redesign) ----------
   Booksultan brand blue: #ff5a00 at the top fading into #d94900, both taken
   from the live booksultan.com stylesheet. The header block is left solid
   #ff5a00 so it meets the topbar cleanly.

   Presentation only: the accordion still runs on scripts.js toggling
   downArrow3/upArrow3 and downArrow4/upArrow4, and leaf links still get
   .active_link - those classes are read here as styling hooks, never changed.

   Everything is scoped under #secondmenudiv on purpose. Role Management
   (rolemanagement.js) injects the same .secondmenu/.iconSet3/.menu-item
   markup onto a white page, and unscoped white text or white chevrons would
   be invisible there. */

#secondmenudiv {
    background: linear-gradient(180deg, #c11026 0%, #9d0d1f 100%) !important;
}

#navmenu .control-mob {
    background: #c11026 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    box-shadow: none;
}

#cpanel {
    color: #fff !important;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .10em;
    margin: 0;
    padding: 6px 0 6px 20px;
}

#secondmenudiv {
    border: 0 !important;
    border-radius: 0;
    box-shadow: var(--bs-shadow-md) !important;
    padding-bottom: 10px;
    padding-top: 6px;
    overflow-y: auto;
    overflow-x: hidden;
    /* Run the rail the full height of the viewport below the header (64px) and
       the nav bar (44px), instead of stopping after the last menu item. It
       scrolls internally when the menu is taller than that. */
    max-height: calc(100vh - 108px);
    min-height: calc(100vh - 108px);
}

/* Kill the divider lines the light theme drew between menu blocks */
#secondmenudiv .col-xs-50 {
    border-bottom: 0 !important;
    border-top: 0 !important;
}

/* ---- Search ---- */
#menuSearch {
    background: rgba(255, 255, 255, .14) !important;
    border: 1px solid rgba(255, 255, 255, .22) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    color: #fff !important;
    height: 36px;
    margin: 12px 14px 4px;
    padding: 6px 14px 6px 36px;
    width: calc(100% - 28px);
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.75' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.2-3.2'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 12px center !important;
    background-size: 15px 15px !important;
    transition: background-color .15s ease, border-color .15s ease;
}

#menuSearch::placeholder { color: rgba(255, 255, 255, .70); }

#menuSearch:focus {
    background-color: rgba(255, 255, 255, .22) !important;
    border-color: rgba(255, 255, 255, .45) !important;
    outline: none !important;
}

/* ---- Shared list reset ---- */
/* _AdminWebMenu.cshtml gives EVERY section its own <ul id="secondmenu"> - the
   id repeats twenty-seven times - so the 6px this list carried top and bottom
   was charged once per row rather than once for the menu, and with the row's
   own 2px that put 14px of pure gap between one section and the next. The
   vertical padding moves onto the rail itself; the rows keep a 3px gap. */
#secondmenudiv #secondmenu,
#secondmenudiv #secondmenu ul {
    padding: 0 8px !important;
    margin: 0;
}

#secondmenudiv #secondmenu > li {
    padding: 0 !important;
    position: relative;
    margin-bottom: 3px;
}

/* ---- Level 1 ---- */
#secondmenudiv #secondmenu li span.menu-item {
    align-items: center;
    border: 0 !important;
    /* A hairline under each row, so twenty-seven sections read as a list
       rather than one block of text. It goes on the span and not the li,
       because an OPEN li also holds its whole submenu - the line would then
       be drawn under that, not under the row it belongs to. Declared after
       the border reset above so it survives it. */
    border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: var(--bs-radius-sm);
    color: #fff;
    display: flex;
    font-size: 13px;
    font-weight: 600;
    gap: 10px;
    letter-spacing: .01em;
    line-height: 1.3;
    /* Was 11px, which with the list padding above put the rows 53px apart and
       left barely six of the twenty-seven sections on screen. 12px gives the
       row back a little height now that each one carries a divider. */
    padding: 12px 34px 12px 10px;
    position: relative;
    transition: background .15s ease, color .15s ease;
}

/* ---- A glyph per section ----
   Keyed on data-nav, which _AdminWebMenu.cshtml carries on each top-level
   span: nth-child would have been wrong, because which sections render at all
   depends on the account's permissions, and the text cannot be matched in CSS
   and would not survive the Arabic resources anyway.

   Drawn and masked rather than shipped as images, the same way the dashboard
   module tiles are, so the colour is the rail's and there is nothing to load.
   A section this set does not name still gets the fallback mark below. */
#secondmenudiv #secondmenu li span.menu-item::before {
    background: currentColor;
    content: "";
    flex: 0 0 19px;
    height: 19px;
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E");
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 19px;
    mask-size: 19px;
    opacity: .92;
    width: 19px;
}

#secondmenudiv #secondmenu li span.menu-item[data-nav="admin"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.4' cy='8.2' r='3.3'/%3E%3Cpath d='M3.4 19.6c0-3.5 2.7-5.6 6-5.6s6 2.1 6 5.6'/%3E%3Cpath d='M16.4 5.3a3.3 3.3 0 0 1 0 6.1M17.8 14.6c1.9.8 2.8 2.4 2.8 5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.4' cy='8.2' r='3.3'/%3E%3Cpath d='M3.4 19.6c0-3.5 2.7-5.6 6-5.6s6 2.1 6 5.6'/%3E%3Cpath d='M16.4 5.3a3.3 3.3 0 0 1 0 6.1M17.8 14.6c1.9.8 2.8 2.4 2.8 5'/%3E%3C/svg%3E");
}

#secondmenudiv #secondmenu li span.menu-item[data-nav="affiliate"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='17.4' cy='5.8' r='2.6'/%3E%3Ccircle cx='6.6' cy='12' r='2.6'/%3E%3Ccircle cx='17.4' cy='18.2' r='2.6'/%3E%3Cpath d='m8.9 10.7 6.2-3.6M8.9 13.3l6.2 3.6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='17.4' cy='5.8' r='2.6'/%3E%3Ccircle cx='6.6' cy='12' r='2.6'/%3E%3Ccircle cx='17.4' cy='18.2' r='2.6'/%3E%3Cpath d='m8.9 10.7 6.2-3.6M8.9 13.3l6.2 3.6'/%3E%3C/svg%3E");
}

#secondmenudiv #secondmenu li span.menu-item[data-nav="booking-handler"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 14.2v-2.4a7.8 7.8 0 0 1 15.6 0v2.4'/%3E%3Cpath d='M4.2 14.2h2.6v5.2H5.4a1.2 1.2 0 0 1-1.2-1.2z'/%3E%3Cpath d='M19.8 14.2h-2.6v5.2h1.4a1.2 1.2 0 0 0 1.2-1.2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 14.2v-2.4a7.8 7.8 0 0 1 15.6 0v2.4'/%3E%3Cpath d='M4.2 14.2h2.6v5.2H5.4a1.2 1.2 0 0 1-1.2-1.2z'/%3E%3Cpath d='M19.8 14.2h-2.6v5.2h1.4a1.2 1.2 0 0 0 1.2-1.2z'/%3E%3C/svg%3E");
}

#secondmenudiv #secondmenu li span.menu-item[data-nav="cache"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 12a8.8 8.8 0 1 1-2.6-6.2'/%3E%3Cpath d='M20.8 4.4V10h-5.6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 12a8.8 8.8 0 1 1-2.6-6.2'/%3E%3Cpath d='M20.8 4.4V10h-5.6'/%3E%3C/svg%3E");
}

#secondmenudiv #secondmenu li span.menu-item[data-nav="configuration"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M12 2.8v2.6M12 18.6v2.6M21.2 12h-2.6M5.4 12H2.8M18.5 5.5l-1.8 1.8M7.3 16.7l-1.8 1.8M18.5 18.5l-1.8-1.8M7.3 7.3 5.5 5.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M12 2.8v2.6M12 18.6v2.6M21.2 12h-2.6M5.4 12H2.8M18.5 5.5l-1.8 1.8M7.3 16.7l-1.8 1.8M18.5 18.5l-1.8-1.8M7.3 7.3 5.5 5.5'/%3E%3C/svg%3E");
}

#secondmenudiv #secondmenu li span.menu-item[data-nav="content"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3.2H7.4a2.2 2.2 0 0 0-2.2 2.2v13.2a2.2 2.2 0 0 0 2.2 2.2h9.2a2.2 2.2 0 0 0 2.2-2.2V8.2z'/%3E%3Cpath d='M14 3.2v5h4.8'/%3E%3Cpath d='M8.6 13h6.8M8.6 16.4h4.4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3.2H7.4a2.2 2.2 0 0 0-2.2 2.2v13.2a2.2 2.2 0 0 0 2.2 2.2h9.2a2.2 2.2 0 0 0 2.2-2.2V8.2z'/%3E%3Cpath d='M14 3.2v5h4.8'/%3E%3Cpath d='M8.6 13h6.8M8.6 16.4h4.4'/%3E%3C/svg%3E");
}

#secondmenudiv #secondmenu li span.menu-item[data-nav="enquiry"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.4 14.4a2.4 2.4 0 0 1-2.4 2.4H8.6L4 20.6V5.8a2.4 2.4 0 0 1 2.4-2.4h11.6a2.4 2.4 0 0 1 2.4 2.4z'/%3E%3Cpath d='M10.2 8.3a1.9 1.9 0 1 1 2.6 1.8c-.6.3-1 .8-1 1.5v.3'/%3E%3Cpath d='M11.8 14.2h.1'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.4 14.4a2.4 2.4 0 0 1-2.4 2.4H8.6L4 20.6V5.8a2.4 2.4 0 0 1 2.4-2.4h11.6a2.4 2.4 0 0 1 2.4 2.4z'/%3E%3Cpath d='M10.2 8.3a1.9 1.9 0 1 1 2.6 1.8c-.6.3-1 .8-1 1.5v.3'/%3E%3Cpath d='M11.8 14.2h.1'/%3E%3C/svg%3E");
}

#secondmenudiv #secondmenu li span.menu-item[data-nav="erp"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.4' y='3.4' width='7.2' height='7.2' rx='1.6'/%3E%3Crect x='13.4' y='3.4' width='7.2' height='7.2' rx='1.6'/%3E%3Crect x='3.4' y='13.4' width='7.2' height='7.2' rx='1.6'/%3E%3Crect x='13.4' y='13.4' width='7.2' height='7.2' rx='1.6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.4' y='3.4' width='7.2' height='7.2' rx='1.6'/%3E%3Crect x='13.4' y='3.4' width='7.2' height='7.2' rx='1.6'/%3E%3Crect x='3.4' y='13.4' width='7.2' height='7.2' rx='1.6'/%3E%3Crect x='13.4' y='13.4' width='7.2' height='7.2' rx='1.6'/%3E%3C/svg%3E");
}

#secondmenudiv #secondmenu li span.menu-item[data-nav="extras"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M12 8.2v7.6M8.2 12h7.6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M12 8.2v7.6M8.2 12h7.6'/%3E%3C/svg%3E");
}

#secondmenudiv #secondmenu li span.menu-item[data-nav="fares"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M14.6 9.3h-3.4a2.1 2.1 0 0 0 0 4.2h1.6a2.1 2.1 0 0 1 0 4.2H9.4'/%3E%3Cpath d='M12 7.2v2.1M12 17.7v1.9'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M14.6 9.3h-3.4a2.1 2.1 0 0 0 0 4.2h1.6a2.1 2.1 0 0 1 0 4.2H9.4'/%3E%3Cpath d='M12 7.2v2.1M12 17.7v1.9'/%3E%3C/svg%3E");
}

#secondmenudiv #secondmenu li span.menu-item[data-nav="inventory"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3.2 8.4 4.4-8.4 4.4-8.4-4.4z'/%3E%3Cpath d='m3.6 12 8.4 4.4 8.4-4.4'/%3E%3Cpath d='m3.6 16.4 8.4 4.4 8.4-4.4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3.2 8.4 4.4-8.4 4.4-8.4-4.4z'/%3E%3Cpath d='m3.6 12 8.4 4.4 8.4-4.4'/%3E%3Cpath d='m3.6 16.4 8.4 4.4 8.4-4.4'/%3E%3C/svg%3E");
}

#secondmenudiv #secondmenu li span.menu-item[data-nav="legacy-admin"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13.6v5a2.2 2.2 0 0 1-2.2 2.2H5.6a2.2 2.2 0 0 1-2.2-2.2V8.4a2.2 2.2 0 0 1 2.2-2.2h5'/%3E%3Cpath d='M14.6 3.4h6v6'/%3E%3Cpath d='M10.2 13.8 20.6 3.4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13.6v5a2.2 2.2 0 0 1-2.2 2.2H5.6a2.2 2.2 0 0 1-2.2-2.2V8.4a2.2 2.2 0 0 1 2.2-2.2h5'/%3E%3Cpath d='M14.6 3.4h6v6'/%3E%3Cpath d='M10.2 13.8 20.6 3.4'/%3E%3C/svg%3E");
}

#secondmenudiv #secondmenu li span.menu-item[data-nav="offers"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 12.4 12.4 20.6a2 2 0 0 1-2.8 0l-6.2-6.2a2 2 0 0 1-.6-1.6l.5-5.6A2 2 0 0 1 5.2 3.4l5.6-.5a2 2 0 0 1 1.6.6l6.2 6.2a2 2 0 0 1 0 2.7z'/%3E%3Ccircle cx='7.8' cy='7.8' r='1.4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 12.4 12.4 20.6a2 2 0 0 1-2.8 0l-6.2-6.2a2 2 0 0 1-.6-1.6l.5-5.6A2 2 0 0 1 5.2 3.4l5.6-.5a2 2 0 0 1 1.6.6l6.2 6.2a2 2 0 0 1 0 2.7z'/%3E%3Ccircle cx='7.8' cy='7.8' r='1.4'/%3E%3C/svg%3E");
}

#secondmenudiv #secondmenu li span.menu-item[data-nav="offline-booking"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.4 4.6H7.2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h9.6a2 2 0 0 0 2-2v-12a2 2 0 0 0-2-2h-2.2'/%3E%3Crect x='9.4' y='2.8' width='5.2' height='3.4' rx='1.2'/%3E%3Cpath d='M8.8 11.8h6.4M8.8 15.2h4.2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.4 4.6H7.2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h9.6a2 2 0 0 0 2-2v-12a2 2 0 0 0-2-2h-2.2'/%3E%3Crect x='9.4' y='2.8' width='5.2' height='3.4' rx='1.2'/%3E%3Cpath d='M8.8 11.8h6.4M8.8 15.2h4.2'/%3E%3C/svg%3E");
}

#secondmenudiv #secondmenu li span.menu-item[data-nav="online-booking"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.2' width='18' height='12.4' rx='2.2'/%3E%3Cpath d='M8.4 20.4h7.2M12 16.6v3.8'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.2' width='18' height='12.4' rx='2.2'/%3E%3Cpath d='M8.4 20.4h7.2M12 16.6v3.8'/%3E%3C/svg%3E");
}

#secondmenudiv #secondmenu li span.menu-item[data-nav="packages"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2.8 8.2 4.3v9.8L12 21.2 3.8 16.9V7.1z'/%3E%3Cpath d='m3.8 7.1 8.2 4.4 8.2-4.4M12 11.5v9.7'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2.8 8.2 4.3v9.8L12 21.2 3.8 16.9V7.1z'/%3E%3Cpath d='m3.8 7.1 8.2 4.4 8.2-4.4M12 11.5v9.7'/%3E%3C/svg%3E");
}

#secondmenudiv #secondmenu li span.menu-item[data-nav="pages"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.4' y='3.4' width='15.2' height='17.2' rx='2.2'/%3E%3Cpath d='M8.2 8.2h7.6M8.2 12h7.6M8.2 15.8h4.4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.4' y='3.4' width='15.2' height='17.2' rx='2.2'/%3E%3Cpath d='M8.2 8.2h7.6M8.2 12h7.6M8.2 15.8h4.4'/%3E%3C/svg%3E");
}

#secondmenudiv #secondmenu li span.menu-item[data-nav="payments"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.6' y='5' width='18.8' height='14' rx='2.4'/%3E%3Cpath d='M2.6 9.8h18.8'/%3E%3Cpath d='M6.4 14.8h3.6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.6' y='5' width='18.8' height='14' rx='2.4'/%3E%3Cpath d='M2.6 9.8h18.8'/%3E%3Cpath d='M6.4 14.8h3.6'/%3E%3C/svg%3E");
}

#secondmenudiv #secondmenu li span.menu-item[data-nav="property"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 20.4V7.4L12 3.2l7.8 4.2v13'/%3E%3Cpath d='M2.8 20.4h18.4'/%3E%3Cpath d='M9.6 20.4v-4.6h4.8v4.6'/%3E%3Cpath d='M8.4 11.4h2.2M13.4 11.4h2.2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 20.4V7.4L12 3.2l7.8 4.2v13'/%3E%3Cpath d='M2.8 20.4h18.4'/%3E%3Cpath d='M9.6 20.4v-4.6h4.8v4.6'/%3E%3Cpath d='M8.4 11.4h2.2M13.4 11.4h2.2'/%3E%3C/svg%3E");
}

#secondmenudiv #secondmenu li span.menu-item[data-nav="push"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 9.6a6 6 0 1 0-12 0c0 4.9-2.2 6.3-2.2 6.3h16.4S18 14.5 18 9.6z'/%3E%3Cpath d='M13.7 19.4a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 9.6a6 6 0 1 0-12 0c0 4.9-2.2 6.3-2.2 6.3h16.4S18 14.5 18 9.6z'/%3E%3Cpath d='M13.7 19.4a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E");
}

#secondmenudiv #secondmenu li span.menu-item[data-nav="referral"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.6' cy='8' r='3.4'/%3E%3Cpath d='M3.4 19.6c0-3.5 2.8-5.6 6.2-5.6 1 0 1.9.2 2.7.5'/%3E%3Cpath d='M17.8 13.8v5.4M15.1 16.5h5.4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.6' cy='8' r='3.4'/%3E%3Cpath d='M3.4 19.6c0-3.5 2.8-5.6 6.2-5.6 1 0 1.9.2 2.7.5'/%3E%3Cpath d='M17.8 13.8v5.4M15.1 16.5h5.4'/%3E%3C/svg%3E");
}

#secondmenudiv #secondmenu li span.menu-item[data-nav="reports"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 20.6h17.2'/%3E%3Cpath d='M7 20.6v-6.2M12 20.6V8.4M17 20.6v-9.2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 20.6h17.2'/%3E%3Cpath d='M7 20.6v-6.2M12 20.6V8.4M17 20.6v-9.2'/%3E%3C/svg%3E");
}

#secondmenudiv #secondmenu li span.menu-item[data-nav="static-data"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6' rx='7.4' ry='3'/%3E%3Cpath d='M4.6 6v12c0 1.7 3.3 3 7.4 3s7.4-1.3 7.4-3V6'/%3E%3Cpath d='M4.6 12c0 1.7 3.3 3 7.4 3s7.4-1.3 7.4-3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6' rx='7.4' ry='3'/%3E%3Cpath d='M4.6 6v12c0 1.7 3.3 3 7.4 3s7.4-1.3 7.4-3V6'/%3E%3Cpath d='M4.6 12c0 1.7 3.3 3 7.4 3s7.4-1.3 7.4-3'/%3E%3C/svg%3E");
}

#secondmenudiv #secondmenu li span.menu-item[data-nav="system"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7.2h8.4M17.6 7.2h2.4M4 12h2.4M11.6 12h8.4M4 16.8h6.4M15.6 16.8h4.4'/%3E%3Ccircle cx='15' cy='7.2' r='2.2'/%3E%3Ccircle cx='9' cy='12' r='2.2'/%3E%3Ccircle cx='13' cy='16.8' r='2.2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7.2h8.4M17.6 7.2h2.4M4 12h2.4M11.6 12h8.4M4 16.8h6.4M15.6 16.8h4.4'/%3E%3Ccircle cx='15' cy='7.2' r='2.2'/%3E%3Ccircle cx='9' cy='12' r='2.2'/%3E%3Ccircle cx='13' cy='16.8' r='2.2'/%3E%3C/svg%3E");
}

#secondmenudiv #secondmenu li span.menu-item[data-nav="system-details"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Cpath d='M12 11.2v5.4'/%3E%3Cpath d='M12 7.8h.1'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Cpath d='M12 11.2v5.4'/%3E%3Cpath d='M12 7.8h.1'/%3E%3C/svg%3E");
}

#secondmenudiv #secondmenu li span.menu-item[data-nav="visa"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5.2' y='2.8' width='13.6' height='18.4' rx='2.4'/%3E%3Ccircle cx='12' cy='9.8' r='2.6'/%3E%3Cpath d='M8.8 16.4h6.4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5.2' y='2.8' width='13.6' height='18.4' rx='2.4'/%3E%3Ccircle cx='12' cy='9.8' r='2.6'/%3E%3Cpath d='M8.8 16.4h6.4'/%3E%3C/svg%3E");
}

#secondmenudiv #secondmenu li span.menu-item[data-nav="xml-out"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8.6 8.2-4.2 3.8 4.2 3.8M15.4 8.2l4.2 3.8-4.2 3.8'/%3E%3Cpath d='M13.6 4.8 10.4 19.2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8.6 8.2-4.2 3.8 4.2 3.8M15.4 8.2l4.2 3.8-4.2 3.8'/%3E%3Cpath d='M13.6 4.8 10.4 19.2'/%3E%3C/svg%3E");
}


#secondmenudiv #secondmenu li span.menu-item:hover {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

/* Open state - scripts.js swaps downArrow3 for upArrow3 on the li */
#secondmenudiv #secondmenu > li.upArrow3 > span.menu-item {
    background: rgba(255, 255, 255, .18);
    color: #fff;
    box-shadow: inset 3px 0 0 #fff;
}

/* ---- Level 2 ---- */
#secondmenudiv #secondmenu li span.menu-item2 {
    border-radius: var(--bs-radius-sm);
    color: rgba(255, 255, 255, .88);
    font-size: 13px;
    font-weight: 500;
    padding: 8px 34px 8px 12px;
    position: relative;
    transition: background .15s ease, color .15s ease;
}

#secondmenudiv #secondmenu li span.menu-item2:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

#secondmenudiv #secondmenu li.upArrow4 > span.menu-item2 {
    background: rgba(255, 255, 255, .10);
    color: #fff;
}

/* ---- Level 3 (leaf links) ----
   The colour here must beat mystyleCalibri.css's
   `ul#secondmenu li ul li a {color:#333}` (0,1,0,6) or the leaves render
   near-black on the blue ground. Adding #secondmenudiv takes this to
   (0,2,0,6), which wins. */
#secondmenudiv #secondmenu li ul { padding-left: 10px !important; }

#secondmenudiv #secondmenu li ul li {
    padding: 0 !important;
    margin: 1px 0;
    border-left: 1px solid rgba(255, 255, 255, .22);
}

#secondmenudiv ul#secondmenu li ul li a {
    border-radius: 0 var(--bs-radius-sm) var(--bs-radius-sm) 0;
    color: rgba(255, 255, 255, .86);
    display: block;
    font-size: 12.5px;
    padding: 7px 10px 7px 14px;
    transition: background .15s ease, color .15s ease;
}

#secondmenudiv ul#secondmenu li ul li a:hover {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

/* Pink is this theme's established active signal (the HOME tab uses it) */
#secondmenudiv ul#secondmenu li ul li a.active_link {
    background: var(--bs-pink) !important;
    color: #fff !important;
    font-weight: 600;
    box-shadow: var(--bs-shadow);
}

/* ---- Chevrons: replace arrow-down.png / arrow-left.png with CSS marks ---- */
#secondmenudiv .iconSet3::before,
#secondmenudiv .upArrow3::before,
#secondmenudiv .downArrow3::before,
#secondmenudiv .iconSet5::before,
#secondmenudiv .upArrow4::before,
#secondmenudiv .downArrow4::before {
    background: none !important;
    background-color: transparent !important;
    border-right: 2px solid rgba(255, 255, 255, .70);
    border-bottom: 2px solid rgba(255, 255, 255, .70);
    content: "";
    height: 7px;
    left: auto;
    pointer-events: none;
    position: absolute;
    right: 14px;
    /* Measured off the row, not centred on the li: an OPEN section's li also
       holds the whole submenu, so centring would drop the chevron into it.
       17px puts the mark on the middle of a 41px row (12 + 17.5 + 12). */
    top: 17px;
    transform: rotate(45deg);
    transition: transform .18s ease, border-color .18s ease;
    width: 7px;
}

#secondmenudiv #secondmenu > li.upArrow3::before {
    border-color: #fff;
    transform: rotate(-135deg);
}

#secondmenudiv .iconSet5::before,
#secondmenudiv .downArrow4::before,
#secondmenudiv .upArrow4::before {
    right: 14px;
    top: 13px;
    height: 6px;
    width: 6px;
}

#secondmenudiv #secondmenu li.upArrow4::before {
    border-color: #fff;
    transform: rotate(-135deg);
}

/* ---- Scrollbar ---- */
#secondmenudiv::-webkit-scrollbar { width: 8px; }
#secondmenudiv::-webkit-scrollbar-track { background: transparent; }
#secondmenudiv::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .28);
    border-radius: 999px;
}
#secondmenudiv::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .42); }

/* ---- Mobile toggles ---- */
.control-panel,
.control-panel-right {
    border-radius: var(--bs-radius-sm);
    color: #fff;
    font-weight: 600;
}

/* ---------- Panels / accordion headers ---------- */
.hMdttlshead,
.hMAgsphead,
.hMSaleshead {
    background-color: #343a40 !important;
    background-image: none !important;
    border-radius: var(--bs-radius) var(--bs-radius) 0 0;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .01em;
    padding: 13px 44px 13px 16px;
    position: relative;
    box-shadow: var(--bs-shadow);
}

.main-head {
    background-color: #eef2f6 !important;
    background-image: none !important;
    color: var(--bs-ink) !important;
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-radius);
    font-family: var(--bs-font) !important;
    font-size: 15px;
    font-weight: 600;
    padding: 12px 44px 12px 16px;
    margin-top: 8px;
    position: relative;
    transition: background .15s ease, border-color .15s ease;
}

.main-head:hover { background-color: #e6edf4 !important; border-color: var(--bs-blue-soft); }

/* Chevron replaces the bitmap arrow these headers used */
.hMdttlshead::after,
.hMAgsphead::after,
.hMSaleshead::after,
.main-head::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 16px;
    width: 10px;
    height: 10px;
    margin-top: -6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: .85;
}

.hMbookingdetailsfull,
.hMAgencydetailsfull,
.hMchartdegraphfull {
    background: #fff;
    border: 1px solid var(--bs-line) !important;
    border-top: 0 !important;
    border-radius: 0 0 var(--bs-radius) var(--bs-radius);
    box-shadow: var(--bs-shadow);
}

.mobile_box_row {
    border: 1px solid var(--bs-line) !important;
    border-radius: var(--bs-radius);
    background: #fff;
}

.box_title,
.tab_common_heading,
.data_table_heading { font-weight: 600; }

/* ---------- Buttons ---------- */
.btn,
.sBtn, .vBtn, .eBtn, .dBtn, .uBtn, .genBtn, .dltBtn,
.save_btn, .searchBtn1, .addBtns, .action_btn, .resultBtn,
.payoutBtn, .commisnSetBtn, .manageSbtn, .exBtn, .pubBtn,
.resourceBtn1, .resourceBtn2, .resourceAdd, .qSearchBtn, .saveDbtn,
.default_blue_btns, .common_btn_light, .addament_btn, .proceedBtn {
    border-radius: var(--bs-radius-sm) !important;
    font-weight: 600;
    letter-spacing: .01em;
    transition: background-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.btn-primary {
    background-color: var(--bs-blue) !important;
    border-color: var(--bs-blue) !important;
    box-shadow: var(--bs-shadow);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--bs-blue-hover) !important;
    border-color: var(--bs-blue-hover) !important;
}

.vBtn:hover, .eBtn:hover, .dBtn:hover, .uBtn:hover, .genBtn:hover, .dltBtn:hover {
    background: var(--bs-pink-hover) !important;
}

.common_btn_light:hover { background: var(--bs-pink) !important; color: #fff !important; }

/* ---------- Form controls ---------- */
.form-control,
.textBox1, .textBox2, .textBox4, .textArea,
.inline_text_input, .new-row {
    border: 1px solid var(--bs-line) !important;
    border-radius: var(--bs-radius-sm) !important;
    box-shadow: none !important;
    color: var(--bs-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control:focus,
.textBox1:focus, .textBox2:focus, .textBox4:focus, .textArea:focus,
.inline_text_input:focus, .new-row:focus {
    border-color: var(--bs-blue) !important;
    box-shadow: 0 0 0 3px rgba(60, 128, 190, .15) !important;
    outline: none !important;
}

.has-error .form-control { box-shadow: 0 0 0 3px rgba(218, 56, 113, .12) !important; }

label { color: var(--bs-ink); font-weight: 600; }

.selectric {
    border: 1px solid var(--bs-line) !important;
    border-radius: var(--bs-radius-sm) !important;
    background: #fff !important;
}

.select2-container--default .select2-selection--single {
    border: 1px solid var(--bs-line) !important;
    border-radius: var(--bs-radius-sm) !important;
}

/* ---------- Tables ---------- */
table.dataTable thead th,
.table > thead > tr > th {
    background: var(--bs-blue-tint2) !important;
    color: var(--bs-ink) !important;
    border-bottom: 1px solid var(--bs-line) !important;
    font-weight: 600;
    letter-spacing: .01em;
}

.table > tbody > tr > td { border-top: 1px solid var(--bs-line-soft) !important; }

.table > tbody > tr:hover > td { background: var(--bs-blue-tint2) !important; }

.table-striped > tbody > tr:nth-of-type(odd) { background-color: #fafbfd; }

/* ---------- Pagination ---------- */
.pagination > li > a,
.pagination > li > span {
    border: 1px solid var(--bs-line) !important;
    border-radius: var(--bs-radius-sm) !important;
    margin: 0 2px;
    transition: background .15s ease;
}

.pagination > li > a:hover { background: var(--bs-blue-tint) !important; }

.pagination > .active > a,
.pagination > .active > a:hover {
    background-color: var(--bs-blue) !important;
    border-color: var(--bs-blue) !important;
}

a.paginate_button.current { border-radius: var(--bs-radius-sm) !important; }

/* ---------- Tabs ---------- */
.nav-tabs { border-bottom: 1px solid var(--bs-line); }

.nav-tabs > li > a {
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--bs-muted);
    font-weight: 600;
}

.nav-tabs > li > a:hover { background: var(--bs-blue-tint2) !important; color: var(--bs-blue); }

.tabbable-line > .nav-tabs { border-radius: var(--bs-radius) var(--bs-radius) 0 0; }

/* ---------- Modals ---------- */
.modal-content,
.meterial_modal .modal-content {
    border: 0 !important;
    border-radius: var(--bs-radius) !important;
    box-shadow: var(--bs-shadow-md) !important;
    overflow: hidden;
}

.modal-header {
    background: var(--bs-blue-tint2);
    border-bottom: 1px solid var(--bs-line) !important;
    padding: 14px 18px;
}

.meterial_modal .modal-title,
.modal-title {
    color: var(--bs-ink) !important;
    font-weight: 600;
    font-size: 17px;
}

.modal-body { padding: 18px; }

.modal-footer {
    background: #fafbfd;
    border-top: 1px solid var(--bs-line) !important;
    padding: 12px 18px;
}

.modal-backdrop.in { opacity: .45; }

#popup_container {
    border: 0 !important;
    border-radius: var(--bs-radius) !important;
    box-shadow: var(--bs-shadow-md) !important;
    overflow: hidden;
}

#popup_title {
    border: 0 !important;
    font-weight: 600;
}

.popup_common_heading { font-weight: 600; }

/* ---------- Alerts, badges, misc ---------- */
.alert {
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-radius-sm);
    box-shadow: var(--bs-shadow);
}

.badge_label,
.badge {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .02em;
}

.material-scrolltop,
.material-scrolltop:hover { border-radius: 50%; }

.panel, .well {
    border: 1px solid var(--bs-line) !important;
    border-radius: var(--bs-radius) !important;
    box-shadow: var(--bs-shadow) !important;
}

hr { border-top-color: var(--bs-line-soft); }

/* ==========================================================================
   END BOOKSULTAN ADMIN REVAMP
   ========================================================================== */

/* ---------- Transactions section (home dashboard) ----------
   Rows on Areas/AdminWeb/Views/Home/Index.cshtml look like:
     <h1 class="main-head toggler" data-targeter="hMFlightdtls">
       <img src="hMFicon.png"/> Transactions - Flight
       <span class="help_hover_btn ModalFlight"></span></h1>
     <div class="mobile_box_row slider hMFlightdtls" style="display:none;">...</div>

   The eight icons (hMFicon, hMHicon, hMSicon, hMTficon, hMAicon, hMTricon,
   hm_offlinepackagesicon, hMCrdticon) are 29x29 WHITE glyphs drawn for the old
   dark grey header, so they washed out once these rows went light. Each now
   sits on a brand-blue disc, which restores contrast without editing any image.

   Scoped to .main-head.toggler so the plain .main-head headings on
   ChangePassword.cshtml and AgencyProfilePartial.cshtml keep their styling.
   .help_hover_btn is deliberately left alone - it is absolutely positioned
   outside the row and drives the help tooltip. */

.transaction { margin-top: 10px; }

.main-head.toggler {
    align-items: center;
    background-color: #fff !important;
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-radius);
    color: var(--bs-ink) !important;
    display: flex;
    font-size: 15px;
    font-weight: 600;
    gap: 12px;
    letter-spacing: .01em;
    padding: 12px 46px 12px 14px;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.main-head.toggler:hover {
    background-color: var(--bs-blue-tint2) !important;
    border-color: var(--bs-blue-soft);
    box-shadow: var(--bs-shadow);
}

.main-head.toggler::after { right: 18px; }

/* White glyph on a brand-blue disc */
.main-head.toggler > img {
    background: var(--bs-blue);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(35, 35, 35, .18);
    flex: 0 0 auto;
    height: 34px;
    padding: 6px;
    width: 34px;
    transition: background-color .15s ease, transform .15s ease;
}

.main-head.toggler:hover > img {
    background: var(--bs-blue-dark);
    transform: scale(1.04);
}

/* Open state. index.cshtml's .toggler handler only slideToggles the panel and
   sets no class, so this reads the inline display jQuery leaves behind.
   :has() is Chrome/Edge/Safari; elsewhere it simply stays in the closed look. */
.main-head.toggler:has(+ .mobile_box_row[style*="display: block"]),
.main-head.toggler:has(+ .mobile_box_row[style*="display:block"]) {
    background-color: var(--bs-blue-tint) !important;
    border-color: var(--bs-blue-soft);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.main-head.toggler:has(+ .mobile_box_row[style*="display: block"])::after,
.main-head.toggler:has(+ .mobile_box_row[style*="display:block"])::after {
    transform: rotate(-135deg);
}

.main-head.toggler:has(+ .mobile_box_row[style*="display: block"]) > img,
.main-head.toggler:has(+ .mobile_box_row[style*="display:block"]) > img {
    background: var(--bs-pink);
}

/* Panel reads as one card with the row above it */
.mobile_box_row.slider {
    border-radius: 0 0 var(--bs-radius) var(--bs-radius);
    border-top: 0 !important;
    margin-top: -1px;
}

/* Breathing room between the Booking Details card and the first Transactions
   row. Set on the panel rather than on .transaction: .hMbookingdetailsfull is
   floated, so its bottom margin applies without collapsing, and the inter-row
   rhythm below is left exactly as it was. */
#TransactionCounts .hMbookingdetailsfull { margin-bottom: 20px; }

/* ==========================================================================
   END BOOKSULTAN TRANSACTIONS SECTION
   ========================================================================== */

/* ---------- Transaction status tiles ----------
   ALL / TICKETED / BOOKED / PAYMENT DONE / FAILED / CANCELLED / REFUNDED /
   CANCEL REQUEST / VOID / CASH ON DELIVERY inside each Transactions panel.

   Markup (Areas/AdminWeb/Views/Home/Index.cshtml):
     .mobile-box > .ticket-box
       > a > figure > img.img-responsive  + h1.font-14      (icon + label)
       > .iconSet.locationIcon > .locationIcon-inner > p
           > span.countloader (spinner) + span.txt          (the count)

   The float grid and its breakpoints (.mobile-box is 12.5% / 18% / 25%) are
   deliberately left alone - only the card, icon, label and count badge change.
   Each <a> still points at the same TransactionQueueReport action. */

.ticket-box {
    background: #fff;
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-radius);
    box-shadow: var(--bs-shadow);
    height: 116px;
    overflow: visible;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.ticket-box:hover {
    border-color: var(--bs-blue-soft);
    box-shadow: var(--bs-shadow-md);
    transform: translateY(-2px);
}

.ticket-box > a {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 9px;
    height: 100%;
    justify-content: center;
    padding: 14px 8px 12px;
    text-decoration: none !important;
}

/* The clip-art icons vary in aspect; mystyleCalibri.css:580 forced them to
   41x65 with a 25px top padding, which stretched them. Normalised to a square
   with object-fit so each one keeps its own proportions. */
.ticket-box figure {
    align-items: center;
    background: var(--bs-blue-tint2);
    border-radius: 50%;
    display: flex;
    flex: 0 0 auto;
    height: 46px;
    justify-content: center;
    margin: 0 !important;
    width: 46px;
    transition: background-color .15s ease;
}

.ticket-box:hover figure { background: var(--bs-blue-tint); }

.ticket-box figure img {
    height: 26px !important;
    margin: 0 !important;
    object-fit: contain;
    padding: 0 !important;
    width: 26px !important;
}

.ticket-box h1.font-14,
.ticket-box h1 {
    color: var(--bs-ink);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.25;
    margin: 0 !important;
    padding: 0;
    text-align: center;
    text-transform: uppercase;
}

.ticket-box:hover h1 { color: var(--bs-blue-dark); }

/* Count badge: was a dark grey square with shape1/shape2.png ribbon art */
.ticket-box .locationIcon {
    background-color: var(--bs-blue) !important;
    border-radius: 999px !important;
    box-shadow: var(--bs-shadow);
    height: auto;
    left: auto;
    min-height: 21px;
    min-width: 21px;
    padding: 3px 8px !important;
    right: 7px;
    top: 7px;
}

/* Retire the ribbon decorations that framed the old square badge */
.ticket-box .locationIcon-inner::before,
.ticket-box .locationIcon-inner::after {
    background: none !important;
    content: none !important;
    display: none !important;
}

.ticket-box .locationIcon-inner {
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
}

.ticket-box .locationIcon-inner p {
    margin: 0;
    line-height: 1.25;
}

/* ==========================================================================
   END BOOKSULTAN TRANSACTION TILES
   ========================================================================== */

/* ---------- Top header ----------
   Views/Shared/_Layout.cshtml:
     #header
       .moblogo            - floated grid column, holds a.rel=home > img.logo-fluid
       .col-md-30.pull-right > .menu-bar > ul > li
           Welcome<span>user</span> | mapped agency | language | a#logout

   #header's children are floated 50-column grid cells, so #header itself is
   NOT made a flex container - that would collapse the grid. Styling is applied
   inside the cells instead. */

/* Full-bleed header.
   _Layout.cshtml:276 wraps ONLY the header in .col-xs-48.col-xs-offset-1,
   which the 50-column grid renders as width:96% + margin-left:2% - that 2% on
   each side is the grey the page background shows through. #navmenu and
   everything below are siblings of this wrapper, so they are already
   full-width. Scoped with :first-child because that wrapper is the first
   element child of .all_page and is the only one in the layout; any
   col-xs-48 a content view renders inside RenderBody is untouched. */
.all_page > .col-xs-48.col-xs-offset-1:first-child {
    margin-left: 0;
    width: 100%;
}

#header {
    background: #fff;
    border-bottom: 1px solid var(--bs-line);
    box-shadow: var(--bs-shadow);
    padding-left: 18px;
    padding-right: 18px;
}

/* Logo slot.
   NOTE: the logo 404s in this environment. _Layout.cshtml builds
   weblogo = B2BSiteUrl + B2BImagePath + "logo.png", B2BImagePath is not set in
   Web.config, and neither logo.png nor favicon.png exists in the project, so
   the agency logo and the fnAgencyImageError fallback both miss. This sizing
   keeps the broken glyph contained and fits a real logo once one is supplied. */
/* Both header columns are pinned to one height so they share a centre line.
   .moblogo carries mt-10 mb-10 in the markup, which made its column ~78px
   against the menu bar's 58px and floated the menu ~10px high. */
.moblogo {
    align-items: center;
    display: flex;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    min-height: 64px;
}

.logo-fluid {
    color: transparent;
    font-size: 0;
    height: auto;
    max-height: 44px;
    max-width: 210px;
    object-fit: contain;
    width: auto;
}

/* Right-hand utility bar */
.menu-bar {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    min-height: 64px;
}

.menu-bar > ul {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* mystyleCalibri.css gives these an asymmetric 20px/10px vertical padding
   (and 10px/10px inside a media query), which knocks the row off its centre.
   !important covers both definitions. */
.menu-bar ul li {
    align-items: center;
    color: var(--bs-muted);
    display: inline-flex;
    font-size: 13px;
    line-height: 1.2;
    margin: 0 !important;
    padding: 0 2px !important;
}

.menu-bar ul li span {
    font-weight: 700;
    margin-left: 5px;
}

.menu-bar ul li > a {
    align-items: center;
    border-radius: var(--bs-radius-sm);
    color: var(--bs-ink);
    display: inline-flex;
    font-size: 13px;
    font-weight: 600;
    gap: 7px;
    padding: 7px 11px;
    text-decoration: none !important;
    transition: background-color .15s ease, color .15s ease;
}

.menu-bar ul li > a:hover,
.menu-bar ul li > a:focus {
    background: var(--bs-blue-tint);
    color: var(--bs-blue-dark);
}

.menu-bar .icons {
    font-size: 15px;
    line-height: 1;
}

/* Language toggle reads as a quiet pill */
.menu-bar .langChange > a.changelang {
    border: 1px solid var(--bs-line);
    cursor: pointer;
}

.menu-bar .langChange > a.changelang:hover {
    border-color: var(--bs-blue-soft);
}

/* ---------- Who is signed in ----------
   A label, not an action, so it is a quiet bordered pill: the greeting stays
   muted and small and the name carries the weight. The avatar disc is drawn
   here rather than added to the markup - the view has no element to put it
   in, and a decorative mark does not belong in the document anyway. */
.menu-bar ul li.user-chip {
    background: var(--bs-bg);
    border: 1px solid var(--bs-line);
    border-radius: 999px;
    color: var(--bs-muted);
    font-size: 12px;
    gap: 7px;
    letter-spacing: .01em;
    padding: 4px 13px 4px 5px !important;
}

.menu-bar ul li.user-chip::before {
    background-color: var(--bs-blue);
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 15px 15px;
    border-radius: 50%;
    content: "";
    flex: 0 0 26px;
    height: 26px;
}

/* The name. `.menu-bar ul li span` above already bolds it; here it takes the
   ink colour and drops the 5px gap, which the flex row now provides. */
.menu-bar ul li.user-chip span {
    color: var(--bs-ink);
    font-size: 13px;
    margin-left: 0;
    max-width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Change password ----------
   The li IS the glyph - <li class="icon-user icons" id="changePassword"> -
   and it carried no affordance at all, just a person mark floating between
   the name and Logout. A round ghost button, sized against the chip beside
   it. The click handler is untouched. */
.menu-bar ul li#changePassword {
    background: #fff;
    border: 1px solid var(--bs-line);
    border-radius: 50%;
    color: var(--bs-muted);
    cursor: pointer;
    font-size: 15px;
    height: 34px;
    justify-content: center;
    margin-left: 4px !important;
    padding: 0 !important;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    width: 34px;
}

.menu-bar ul li#changePassword:hover {
    background: var(--bs-blue-tint);
    border-color: var(--bs-blue-soft);
    color: var(--bs-blue-dark);
}

/* ---------- Logout ----------
   The one destructive action up here, so it reads as a button rather than as
   red text. Outlined at rest, filled on hover. */
.menu-bar ul li > a#logout {
    background: #fff;
    border: 1px solid var(--bs-pink);
    border-radius: 999px;
    color: var(--bs-pink) !important;
    font-weight: 700;
    margin-left: 6px;
    padding: 7px 15px;
}

.menu-bar ul li > a#logout:hover,
.menu-bar ul li > a#logout:focus {
    background: var(--bs-pink) !important;
    border-color: var(--bs-pink);
    box-shadow: var(--bs-shadow);
    color: #fff !important;
}

/* Narrow screens: the address is the first thing that can give way. */
@media (max-width: 991px) {
    .menu-bar ul li.user-chip span { max-width: 120px; }
}

/* Mapped-agency picker, when the user has one */
#mappedAgency {
    border: 1px solid var(--bs-line) !important;
    border-radius: var(--bs-radius-sm) !important;
    box-shadow: none !important;
    height: 34px;
    max-width: 220px;
}

#mappedAgencyTitle {
    color: var(--bs-muted);
    font-size: 12px;
    font-weight: 600;
}

/* ==========================================================================
   END BOOKSULTAN TOP HEADER
   ========================================================================== */

/* ---------- Page title bars ----------
   Report and settings views open with a plain .main-head heading, e.g.
   TransactionQueueReport.cshtml:112
     <h1 class="font-16 pb-3 pt-10 main-head">Transaction Queue Report</h1>
   with no .toggler and no panel after it.

   The shared .main-head rule earlier in this file draws a chevron, which on
   these implied a collapsible section that does not exist. The chevron is
   removed here and the bar is restyled as a page title. .main-head.toggler
   (the Transactions rows) is unaffected and keeps its chevron. */

.main-head:not(.toggler) {
    background: #fff !important;
    background-image: none !important;
    border: 1px solid var(--bs-line);
    border-left: 4px solid var(--bs-blue);
    border-radius: var(--bs-radius);
    box-shadow: var(--bs-shadow);
    color: var(--bs-ink) !important;
    font-family: var(--bs-font) !important;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.3;
    margin-bottom: 14px;
    padding: 14px 18px;
}

.main-head:not(.toggler):hover {
    background: #fff !important;
    border-color: var(--bs-line);
    border-left-color: var(--bs-blue);
}

.main-head:not(.toggler)::after {
    content: none !important;
}

/* Sub-section headings inside a panel: "Generate ...", "Report Data", "Visual".
   Markup is .formSubTitle > h3 > span.meterial_options > i.icons */
.formSubTitle h3,
.formSubTitle h5 {
    align-items: center;
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.formSubTitle h3 .meterial_options,
.formSubTitle h5 .meterial_options {
    align-items: center;
    background: var(--bs-blue-tint2);
    border-radius: 50%;
    color: var(--bs-blue);
    display: inline-flex;
    flex: 0 0 auto;
    height: 30px;
    justify-content: center;
    order: -1;
    width: 30px;
}

.formSubTitle h3 .meterial_options i,
.formSubTitle h5 .meterial_options i {
    font-size: 15px;
    line-height: 1;
}

/* ==========================================================================
   END BOOKSULTAN PAGE TITLES
   ========================================================================== */

/* ---------- Help question mark ----------
   <span class="qstn-icon FlightModal"></span> sits beside the Booking Details
   Submit button. mystyleCalibri.css:605 draws it with an orange
   ../images/qstn.png; only the artwork is replaced here with an inline SVG in
   the brand blue. Size, absolute position and z-index stay as the legacy rule
   sets them, and the span keeps its .FlightModal class, so the modal still
   opens exactly as before. */

.qstn-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23ff5a00'/%3E%3Cpath d='M9.2 9.3a2.85 2.85 0 1 1 3.65 2.75c-.72.26-1.08.82-1.08 1.53v.45' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='11.78' cy='16.75' r='1.08' fill='%23ffffff'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    cursor: help;
    filter: drop-shadow(0 1px 2px rgba(35, 35, 35, .22));
    transition: transform .15s ease;
}

.qstn-icon:hover {
    transform: scale(1.08);
}

/* ==========================================================================
   END BOOKSULTAN HELP ICON
   ========================================================================== */

/* ---------- Modal dialogs ----------
   Markup (e.g. ManageFlightBookings.cshtml:1286, the Resend email dialog):
     .modal.meterial_modal > .modal-dialog > .modal-content
       .modal-header  > button.close + h4.modal-title   (close comes FIRST)
       .modal-body    > .form-group > label.control-label (often empty) + input
       .modal-footer  > button.btn.btn-default.meterial_modal_close
                      + button.btn.btn-primary.meterial_modal_save

   These need .meterial_modal-prefixed selectors: mystyleCalibri.css:987-1001
   sets .meterial_modal .modal-content{border-radius:0} at (0,2,0,0), which
   outranked the plain .modal-content rule earlier in this file, and
   .meterial_modal_close/.meterial_modal_save force uppercase, no border and
   square corners - which is why Close read as bare text next to Send.

   Presentation only: data-dismiss, ids and handlers are untouched. */

.meterial_modal .modal-content,
.modal .modal-content {
    border: 0 !important;
    border-radius: var(--bs-radius) !important;
    box-shadow: 0 18px 50px rgba(35, 35, 35, .22) !important;
    overflow: hidden;
}

/* Header. The close button precedes the title in the markup, so the title is
   pulled first with order:-1 and the close lands on the trailing edge. */
.meterial_modal .modal-header,
.modal .modal-header {
    align-items: center;
    background: #fff;
    border-bottom: 1px solid var(--bs-line) !important;
    display: flex;
    gap: 12px;
    padding: 16px 20px !important;
}

.meterial_modal .modal-title,
.modal .modal-title {
    color: var(--bs-ink) !important;
    flex: 1 1 auto;
    font-family: var(--bs-font) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: .01em;
    margin: 0;
    order: -1;
}

.meterial_modal button.close,
.modal button.close {
    align-items: center;
    background: transparent !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: var(--bs-muted) !important;
    display: inline-flex !important;
    flex: 0 0 auto;
    font-family: var(--bs-font) !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    height: 32px;
    justify-content: center;
    margin: 0 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    width: 32px;
    transition: background-color .15s ease, color .15s ease;
}

.meterial_modal button.close:hover,
.modal button.close:hover {
    background: var(--bs-blue-tint) !important;
    color: var(--bs-ink) !important;
}

/* Body */
.modal .modal-body { padding: 20px !important; }

/* Many of these dialogs ship an empty <label class="control-label"> ahead of
   the field, which left a blank line between the header and the input. */
.modal .modal-body .control-label:empty { display: none !important; }

.modal .modal-body .form-group { margin-bottom: 0; }

.modal_input_text,
.modal .modal-body .form-control {
    border: 1px solid var(--bs-line) !important;
    border-radius: var(--bs-radius-sm) !important;
    box-shadow: none !important;
    color: var(--bs-ink) !important;
    font-family: var(--bs-font);
    font-size: 14px;
    height: 42px !important;
    padding: 9px 12px !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.modal_input_text:focus,
.modal .modal-body .form-control:focus {
    border-color: var(--bs-blue) !important;
    box-shadow: 0 0 0 3px rgba(60, 128, 190, .15) !important;
    outline: none !important;
}

/* Footer */
.modal .modal-footer {
    align-items: center;
    background: #fafbfd;
    border-top: 1px solid var(--bs-line) !important;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 14px 20px !important;
}

.meterial_modal_close,
.meterial_modal_save,
.modal .modal-footer .btn {
    border-radius: var(--bs-radius-sm) !important;
    font-family: var(--bs-font) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: .01em;
    margin: 0 !important;
    min-width: 96px;
    padding: 10px 18px !important;
    text-transform: none !important;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.meterial_modal_close,
.modal .modal-footer .btn-default {
    background: #fff !important;
    border: 1px solid var(--bs-line) !important;
    color: var(--bs-ink) !important;
}

.meterial_modal_close:hover,
.modal .modal-footer .btn-default:hover {
    background: var(--bs-blue-tint2) !important;
    border-color: var(--bs-blue-soft) !important;
}

.meterial_modal_save,
.modal .modal-footer .btn-primary {
    background: var(--bs-blue) !important;
    border: 1px solid var(--bs-blue) !important;
    color: #fff !important;
}

.meterial_modal_save:hover,
.modal .modal-footer .btn-primary:hover {
    background: var(--bs-blue-hover) !important;
    border-color: var(--bs-blue-hover) !important;
    box-shadow: var(--bs-shadow);
}

.modal-backdrop.in { opacity: .45 !important; }

/* ==========================================================================
   END BOOKSULTAN MODALS
   ========================================================================== */

/* ---------- Loaders ----------
   Every spinner in the admin points at loader_grid.gif (and a few at
   loader_TQR.gif). Neither file is in the repo, and B2BImagePath is not set in
   Web.config, so the markup resolves to http://<site>/loader_grid.gif -> 404
   and renders a broken-image icon. 207 views are affected.

   Rather than add binaries or touch 207 views, the <img> itself is swapped for
   an inline SVG spinner via `content:`. The surrounding show/hide JS is
   untouched - it still toggles .salesloader / .countloader / .cls_tileLoader. */

img[src*="loader_grid.gif"],
img[src*="loader_TQR.gif"] {
    content: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='18' fill='none' stroke='%23d9e3ed' stroke-width='6'/%3E%3Cpath d='M22 4a18 18 0 0 1 18 18' fill='none' stroke='%23ff5a00' stroke-width='6' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 22 22' to='360 22 22' dur='0.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") !important;
    width: 30px !important;
    height: 30px !important;
    max-width: none !important;
}

/* Inline count loaders sit next to small numbers, so they stay small */
.countloader img[src*="loader_grid.gif"] {
    width: 15px !important;
    height: 15px !important;
}

/* Centre the spinner in its container. Visibility is left entirely to the
   existing inline styles and jQuery show/hide - no display rule here, or an
   instance that relies on its default display would be hidden for good. */
.salesloader,
.cls_tileLoader {
    text-align: center;
    padding: 10px 0;
}

/* ---------- Booking Details section ----------
   Areas/AdminWeb/Views/Home/CommonSearchPartial.cshtml:
     .hMdttlshead            - blue header with a white 29x29 glyph
     .hMbookingdetailsfull   - the panel
     #SearchText             - PNR / reference search (no class, id only)
     .searchBtn1             - Submit
     #ddl_StatusForGrid      - status filter (.textBox1 inside .selectBoxArrow)
   Presentation only; the form still posts to RetrieveBookingDetails. */

.hMdttlshead {
    align-items: center;
    display: flex;
    gap: 12px;
}

/* Same disc treatment as the Transactions rows, inverted for the blue header */
.hMdttlshead > img {
    background: rgba(255, 255, 255, .18);
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
    flex: 0 0 auto;
    height: 34px;
    padding: 6px;
    width: 34px;
}

.hMbookingdetailsfull {
    padding: 22px 18px 18px !important;
}

/* The same box as Booking Details above it. The source sheet gives this one
   10px at the sides against the other's 18px, which left the two panels'
   contents starting 8px apart down the same column. */
.hMAgencydetailsfull {
    padding: 22px 18px 18px !important;
}

/* Submit sits in a column of its own and starts level with the filters
   beside it. It used to be pushed down 22px to clear a .bd-caption over each
   filter; that class exists in this stylesheet and in no view or script, so
   there are no captions to clear and the offset only left the button low. */

/* The dates are the one control in this row that mystyleCalibri.css:693 pins
   to 40px with !important, which the shared "one control height" rule cannot
   outrank - so the row ran 42/42/40/40. Lifted here only: that rule governs
   text inputs on well over a hundred screens. */
.hMAgencydetailsfull .form-group2 .textBox1 {
    height: 42px !important;
}

/* ---- Captions, and the rules between blocks ----
   Both dashboard panels put several unlabelled controls in one white box.
   CommonSearchPartial.cshtml stacks a lookup by PNR, reference, name or phone
   on top of a browse by transaction type - separate searches, each filling its
   own grid, but reading as one form, the second control looking like a
   leftover field of the first. AgentStatusSearchPartial.cshtml lines up a
   type, an agency and two dates with nothing to say which date is which.

   A caption over each control and a rule between blocks is what separates
   them. No control moves: one sitting directly above the grid it fills is
   what makes the results legible. Every caption is an existing resource
   string, so both languages were already written.

   Unscoped because the class is this sheet's own and is used in those two
   partials only. */
.bd-caption {
    color: var(--bs-muted);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .07em;
    line-height: 1.2;
    margin: 0 0 8px;
    text-transform: uppercase;
}

.bd-split {
    background: var(--bs-line);
    height: 1px;
    margin: 20px 0 16px;
    width: 100%;
}

/* The caption is the panel's own child while the field sits a column deep, but
   the row's negative margin and the column's padding cancel out, so the two
   line up at the same edge with nothing to correct - measured at 0px. Under
   ar the caption still has to turn round with the rest of the panel. */
[dir="rtl"] .bd-caption {
    text-align: right;
}

/* The two date fields sit one box deeper than the selects beside them -
   .field_container carries 5px of its own - so their captions have to pay the
   same 5px or they hang left of the box they label while the selects sit
   flush. Measured: 5.0px before, 0.0 after. */
.bd-caption:has(+ .field_container) {
    padding-left: 5px;
}

[dir="rtl"] .bd-caption:has(+ .field_container) {
    padding-left: 0;
    padding-right: 5px;
}

/* mystyleCalibri.css:605 pins .qstn-icon absolutely at right:-23px/top:-20px,
   against whatever ancestor happens to be positioned - which left the help
   mark adrift near the panel's top corner rather than beside the control it
   explains, and meant margin or vertical-align could not move it. The Submit's
   own form-group becomes the reference instead, and the mark centres on it.
   :has() is Chrome/Edge/Safari, as it is elsewhere in this sheet; anywhere it
   is not understood the mark simply keeps the position it had. */
/* A row, not a positioning context. Offsetting the mark against this box was
   right until the viewport got narrow: .searchBtn1 carries min-width:130px
   while col-md-5 is a tenth of the container, so at around 1366 the button is
   WIDER than the column it sits in and overflows to the right - and anything
   measured from the column's edge, as mystyleCalibri pins this at
   right:-23px, then lands on top of the button.

   Laying the two out as flex items takes the question out of it: the mark
   follows the button at whatever width the button ends up, and the button is
   free to shrink to its min-width before the mark is pushed anywhere. */
.hMbookingdetailsfull .form-group:has(> .searchBtn1),
.hMAgencydetailsfull .form-group:has(> .searchBtn1) {
    align-items: center;
    display: flex;
    gap: 10px;
}

.hMbookingdetailsfull .form-group:has(> .searchBtn1) > .searchBtn1,
.hMAgencydetailsfull .form-group:has(> .searchBtn1) > .searchBtn1 {
    /* width:100% from mystyleCalibri would claim the whole row and push the
       mark out; min-width still holds the floor. */
    flex: 0 1 auto;
}

.hMbookingdetailsfull .form-group:has(> .searchBtn1) > .qstn-icon,
.hMAgencydetailsfull .form-group:has(> .searchBtn1) > .qstn-icon {
    flex: 0 0 22px;
    position: static;
    transform: none;
}

/* .qstn-icon:hover is a bare scale(), and there is no longer a translate for
   it to drop, so it is left to do exactly that. */

/* Search field + Submit pair */
.hmpnrtraction #SearchText {
    background: #fff;
    border: 1px solid var(--bs-line) !important;
    border-radius: var(--bs-radius-sm) !important;
    box-shadow: none !important;
    color: var(--bs-ink);
    font-size: 14px;
    height: 44px;
    padding: 10px 14px 10px 40px;
    width: 100%;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5463' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.2-3.2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 16px 16px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.hmpnrtraction #SearchText:focus {
    border-color: var(--bs-blue) !important;
    box-shadow: 0 0 0 3px rgba(60, 128, 190, .15) !important;
    outline: none !important;
}

.hmpnrtraction #SearchText::placeholder { color: #8b9aa6; }

.searchBtn1 {
    background: var(--bs-blue) !important;
    border: 0 !important;
    border-radius: var(--bs-radius-sm) !important;
    box-shadow: var(--bs-shadow);
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    height: 44px;
    letter-spacing: .01em;
    min-width: 130px;
    transition: background-color .15s ease, box-shadow .15s ease;
}

.searchBtn1:hover,
.searchBtn1:focus {
    background: var(--bs-blue-hover) !important;
    box-shadow: var(--bs-shadow-md);
}

/* Status filter matches the search field */
#ddl_StatusForGrid.textBox1 {
    border: 1px solid var(--bs-line) !important;
    border-radius: var(--bs-radius-sm) !important;
    box-shadow: none !important;
    color: var(--bs-ink);
    height: 42px;
    padding: 8px 12px;
}

#ddl_StatusForGrid.textBox1:focus {
    border-color: var(--bs-blue) !important;
    box-shadow: 0 0 0 3px rgba(60, 128, 190, .15) !important;
}

.hMbookingdetailsfull .table_home {
    border: 1px solid var(--bs-line-soft);
    border-radius: var(--bs-radius-sm);
    overflow: hidden;
}

/* Collapse a grid that has not been filled yet.
   Before a status is picked, #tablebindStatusSpecific is still an empty
   <table>, but it keeps Bootstrap's 20px .table margin plus the border above,
   and the select's .form-group2 adds another 15px - roughly 50px of dead
   space below the filter. Collapsed only while the table is genuinely empty,
   so a populated grid keeps its normal spacing and border.

   Not scoped to Booking Details: the same pattern repeats in the Credit And
   Deposit Agents panel (AgentStatusSearchPartial.cshtml) and anywhere else a
   .table_home grid is rendered empty. */
.table_home:empty {
    border: 0 !important;
    margin: 0 !important;
}

.hMbookingdetailsfull .row1 > .form-group2 {
    margin-bottom: 8px;
}

.hMbookingdetailsfull .table-responsive,
.hMAgencydetailsfull .table-responsive {
    margin-bottom: 0;
}

/* The wrapper row around an empty grid should not hold space either */
.table-responsive:has(> .table_home:empty) {
    margin: 0 !important;
    min-height: 0;
}

/* ==========================================================================
   END BOOKSULTAN LOADERS + BOOKING DETAILS
   ========================================================================== */

/* ---------- Report form fields and date picker ----------
   Report views (e.g. Areas/AdminWeb/Views/Reports/TransactionQueueReport.cshtml)
   build fields as .form-group2 > .fieldTitle + input/select, inside
   .col-md-12.col-sm-12.col-xs-25.pad-8 grid cells.

   Two ordering notes:
   - mystyleCalibri.css:593 sets `.form-group2 input { border-radius:0 !important }`.
     theme.css loads after it, so an equally specific !important here wins.
   - jquery-ui-datepicker.css loads AFTER theme.css (_Layout.cshtml:120 vs 117),
     so every .ui-* rule below needs !important regardless of specificity.

   Presentation only - the picker is still jQuery UI, same instances, same
   onSelect handlers, and the grid cells keep their widths. */

/* ---- Labels ---- */
.fieldTitle,
.fieldTitlePassenger {
    color: var(--bs-muted);
    font-family: var(--bs-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.3;
    padding-bottom: 7px;
}

/* ---- Inputs and selects ---- */
.form-group2 input,
.form-group2 select,
.form-group2 textarea {
    border: 1px solid var(--bs-line) !important;
    border-radius: var(--bs-radius-sm) !important;
    box-shadow: none !important;
    color: var(--bs-ink) !important;
    font-family: var(--bs-font);
    font-size: 13px !important;
    height: 42px;
    padding: 9px 12px !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-group2 input:focus,
.form-group2 select:focus,
.form-group2 textarea:focus {
    border-color: var(--bs-blue) !important;
    box-shadow: 0 0 0 3px rgba(60, 128, 190, .15) !important;
    outline: none !important;
}

.form-group2 input:disabled,
.form-group2 select:disabled {
    background: #f4f7fa !important;
    color: #8b9aa6 !important;
}

/* Section headings above each block of fields */
.formSubTitle h3,
.formSubTitle h5 {
    color: var(--bs-ink);
    font-family: var(--bs-font);
    font-size: 16px;
    font-weight: 600;
}

/* ---- Action buttons ---- */
.save_btn,
.reset_btn,
.search_btn_big {
    border: 0 !important;
    border-radius: var(--bs-radius-sm) !important;
    font-family: var(--bs-font);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .01em;
    min-width: 110px;
    padding: 10px 22px;
    transition: background-color .15s ease, box-shadow .15s ease;
}

.save_btn:hover,
.search_btn_big:hover {
    background-color: var(--bs-blue-hover) !important;
    box-shadow: var(--bs-shadow-md);
}

/* ---- jQuery UI date picker ---- */
.ui-datepicker {
    background: #fff !important;
    border: 1px solid var(--bs-line) !important;
    border-radius: var(--bs-radius) !important;
    box-shadow: var(--bs-shadow-md) !important;
    font-family: var(--bs-font) !important;
    padding: 10px !important;
    width: 268px !important;
    z-index: 1200 !important;
}

/* Header laid out as a real flex row: prev / title / next.
   jQuery UI absolutely positions the two nav anchors and lets the title float
   between them, which left the arrows sitting slightly above the month label
   and the title off its true centre. They are taken out of absolute
   positioning and ordered as flex items instead; position:relative is kept on
   the anchors so the ::after chevrons still have a containing block. */
.ui-datepicker .ui-datepicker-header {
    align-items: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    gap: 6px !important;
    justify-content: space-between !important;
    padding: 2px 0 12px !important;
    position: relative !important;
}

.ui-datepicker .ui-datepicker-title {
    align-items: center !important;
    display: flex !important;
    flex: 1 1 auto !important;
    gap: 8px !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    order: 1;
}

.ui-datepicker .ui-datepicker-month,
.ui-datepicker .ui-datepicker-year {
    color: var(--bs-ink) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

.ui-datepicker .ui-datepicker-title select {
    background: #fff !important;
    border: 1px solid var(--bs-line) !important;
    border-radius: var(--bs-radius-sm) !important;
    color: var(--bs-ink) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    height: 32px !important;
    padding: 4px 8px !important;
}

/* Nav buttons: the jQuery UI sprite is replaced with CSS chevrons */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    background: transparent !important;
    border: 1px solid var(--bs-line) !important;
    border-radius: var(--bs-radius-sm) !important;
    cursor: pointer !important;
    flex: 0 0 auto !important;
    font-size: 0 !important;
    height: 32px !important;
    left: auto !important;
    overflow: hidden !important;
    position: relative !important;
    right: auto !important;
    text-indent: 0 !important;
    top: auto !important;
    width: 32px !important;
    transition: background-color .15s ease, border-color .15s ease;
}

.ui-datepicker .ui-datepicker-prev { order: 0; }
.ui-datepicker .ui-datepicker-next { order: 2; }

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
    background: var(--bs-blue-tint) !important;
    border-color: var(--bs-blue-soft) !important;
}

/* jQuery UI renders <a class="ui-datepicker-prev"><span class="ui-icon">Prev</span></a>
   and hides that label with text-indent:-99999px while the sprite supplies the
   arrow. The span is removed outright here so neither the sprite nor the word
   shows - the chevron comes from ::after on the anchor. font-size:0 on the
   anchor catches any stray text node. */
.ui-datepicker .ui-datepicker-prev .ui-icon,
.ui-datepicker .ui-datepicker-next .ui-icon {
    display: none !important;
}

.ui-datepicker .ui-datepicker-prev::after,
.ui-datepicker .ui-datepicker-next::after {
    border-bottom: 2px solid var(--bs-muted);
    border-right: 2px solid var(--bs-muted);
    content: "";
    height: 7px;
    left: 50%;
    position: absolute;
    top: 50%;
    width: 7px;
}

.ui-datepicker .ui-datepicker-prev::after { transform: translate(-30%, -50%) rotate(135deg); }
.ui-datepicker .ui-datepicker-next::after { transform: translate(-70%, -50%) rotate(-45deg); }

.ui-datepicker .ui-datepicker-calendar {
    border-collapse: separate !important;
    border-spacing: 2px !important;
    margin: 0 !important;
    width: 100% !important;
}

.ui-datepicker .ui-datepicker-calendar th {
    background: transparent !important;
    border: 0 !important;
    color: var(--bs-muted) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    padding: 6px 0 !important;
    text-transform: uppercase !important;
}

.ui-datepicker .ui-datepicker-calendar td {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

.ui-datepicker .ui-datepicker-calendar td a,
.ui-datepicker .ui-datepicker-calendar td span {
    background: transparent !important;
    border: 0 !important;
    border-radius: var(--bs-radius-sm) !important;
    color: var(--bs-ink) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 32px !important;
    padding: 0 !important;
    text-align: center !important;
    transition: background-color .12s ease, color .12s ease;
}

.ui-datepicker .ui-datepicker-calendar td a:hover {
    background: var(--bs-blue-tint) !important;
    color: var(--bs-blue-dark) !important;
}

/* Today */
.ui-datepicker .ui-datepicker-today a,
.ui-datepicker .ui-datepicker-today span {
    background: var(--bs-blue-tint) !important;
    box-shadow: inset 0 0 0 1px var(--bs-blue-soft) !important;
    color: var(--bs-blue-dark) !important;
    font-weight: 700 !important;
}

/* Selected */
.ui-datepicker .ui-datepicker-calendar td a.ui-state-active,
.ui-datepicker .ui-datepicker-calendar td .ui-state-active {
    background: var(--bs-blue) !important;
    box-shadow: var(--bs-shadow) !important;
    color: #fff !important;
    font-weight: 700 !important;
}

.ui-datepicker .ui-datepicker-other-month a,
.ui-datepicker .ui-datepicker-other-month span { color: #b6c2cd !important; }

.ui-datepicker .ui-state-disabled,
.ui-datepicker .ui-state-disabled span {
    color: #c3ccd5 !important;
    opacity: 1 !important;
}

.ui-datepicker .ui-datepicker-buttonpane {
    border-top: 1px solid var(--bs-line-soft) !important;
    margin: 8px 0 0 !important;
    padding: 8px 0 0 !important;
}

.ui-datepicker .ui-datepicker-buttonpane button {
    border-radius: var(--bs-radius-sm) !important;
    font-weight: 600 !important;
}

/* ---- .selectBox1 dropdowns ----
   The Credit And Deposit Agents filters (AgentStatusSearchPartial.cshtml) use
   .selectBox1 rather than .form-group2 select, so they never picked up the
   field styling above and stayed as raw browser selects. Matched to the other
   controls here, with a CSS caret in place of the native arrow. */
.selectBox1 {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5463' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-position: calc(100% - 12px) center !important;
    background-repeat: no-repeat !important;
    background-size: 14px 14px !important;
    border: 1px solid var(--bs-line) !important;
    border-radius: var(--bs-radius-sm) !important;
    box-shadow: none !important;
    color: var(--bs-ink) !important;
    font-family: var(--bs-font);
    font-size: 13px !important;
    height: 42px !important;
    padding: 9px 36px 9px 12px !important;
    width: 100%;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.selectBox1:focus {
    border-color: var(--bs-blue) !important;
    box-shadow: 0 0 0 3px rgba(60, 128, 190, .15) !important;
    outline: none !important;
}

/* The .iconSet wrapper around these selects draws its own arrow glyph at
   right:5px, which would sit on top of the caret above. */
.form-group.iconSet.downArrow::before { content: none !important; }

/* ==========================================================================
   END BOOKSULTAN FORMS AND DATEPICKER
   ========================================================================== */

/* ---------- Submit loading state ----------
   Paired with a small handler added at the end of Views/Shared/_Layout.cshtml.

   The existing .salesloader / #loaderdiv markup is never shown on submit:
   autobindmanager.js makes its ajax calls without any beforeSend/ajaxStart
   hook and never references those elements, so they are effectively dead
   markup. Rather than revive them per view, the clicked action button itself
   reports progress.

   The label is hidden with transparent text (not display) so the button keeps
   its exact width and the row does not reflow while loading. */

.is-loading {
    color: transparent !important;
    pointer-events: none;
    position: relative;
}

.is-loading::after {
    animation: bs-btn-spin .7s linear infinite;
    border: 2px solid rgba(255, 255, 255, .45);
    border-radius: 50%;
    border-top-color: #fff;
    content: "";
    height: 16px;
    left: 50%;
    margin: -8px 0 0 -8px;
    position: absolute;
    top: 50%;
    width: 16px;
}

/* Light buttons need a dark spinner to stay visible */
.btn-default.is-loading::after,
.common_btn_light.is-loading::after,
.meterial_modal_close.is-loading::after {
    border-color: rgba(60, 128, 190, .30);
    border-top-color: var(--bs-blue);
}

@keyframes bs-btn-spin {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   END BOOKSULTAN SUBMIT LOADING
   ========================================================================== */

/* ---------- Action button alignment ----------
   .searchBtn1 is shared by two very different places:
     - the Booking Details Submit, which wants to be wide, and
     - the small Edit / Add / Save / Cancel actions in report views, which sit
       in <div class="row searcRow"><div class="col-md-4 ... pull-right">
       <div class="form-group mobile-top"><button class="searchBtn1">.

   mystyleCalibri.css:635 gives .searchBtn1 `width:100%`, so each action button
   stretches to fill its column rather than its label, and .pull-right is
   redefined here (padding-right:15px + a 5px right border) rather than being
   Bootstrap's float - between them the buttons rendered oversized and spilled
   past the right edge of the panel they sit in.

   Buttons are now sized to their label, and the action column shrinks to fit
   so nothing can overhang the panel. */

.searchBtn1 {
    font-size: 13px !important;
    height: 36px !important;
    min-width: 0 !important;
    padding: 8px 16px !important;
    width: auto !important;
}

/* Booking Details Submit keeps the larger pairing with its 44px search field */
.hmpnrtraction .searchBtn1,
#searchBtnCommonSearch {
    height: 44px !important;
    min-width: 130px !important;
    width: auto !important;
}

/* Credit And Deposit Agents' Submit is a panel Submit too, not one of the
   small report actions the 36px above is for. 42px, which is what the selects
   and the dates in its row come to. */
#searchBtn1 {
    height: 42px !important;
    min-width: 130px !important;
    width: auto !important;
}

/* Shrink-wrap only the columns that hold an action button, so multi-field
   .searcRow rows keep their grid widths. :has() is Chrome/Edge/Safari; where
   it is unsupported the button sizing above still applies. */
.searcRow > [class*="col-"]:has(.searchBtn1),
.searcRow > [class*="col-"]:has(.save_edit) {
    border-right: 0 !important;
    float: right;
    max-width: 100%;
    padding-left: 0 !important;
    /* Keep a right gutter. Zeroing this (as an earlier pass did) dropped
       .pull-right's own padding-right:15px and pushed Save / Edit / Cancel
       past the right edge of the panel they sit in. */
    padding-right: 14px !important;
    width: auto !important;
}

/* Save / Edit / Cancel on one line.
   In IteneryDetailsPartial.cshtml the Save button sits in .row.searcRow.apibutton
   (inside the <form>) while Edit and Cancel sit in a separate sibling
   .row.searcRow.editButton after the form closes - two block-level rows, so
   they stacked. Floating the rows lets them share a line without moving any
   button between forms. The ::after below contains those floats so the
   following content (Remarks, the next table) still starts on a new line. */
.searcRow.apibutton,
.searcRow.apieditButton,
.searcRow.editButton {
    clear: none !important;
    float: right !important;
    margin-left: 10px !important;
    /* Clear of whatever follows. On the float itself rather than on the
       clearfix: ::after is a zero-height display:table and gives nothing. */
    margin-bottom: 18px !important;
    width: auto !important;
}

:has(> .searcRow.apieditButton)::after,
:has(> .searcRow.editButton)::after {
    clear: both;
    content: "";
    display: table;
}

.searcRow .searchBtn1,
.searcRow .save_edit {
    min-width: 84px !important;
}

.searcRow .form-group,
.searcRow .form-group2 {
    margin-bottom: 0;
    text-align: right;
}

/* The inline edit/save toggles used around booking details tables */
.save_edit {
    border-radius: var(--bs-radius-sm) !important;
    font-family: var(--bs-font);
    font-size: 13px !important;
    font-weight: 600;
    height: 36px !important;
    min-width: 0 !important;
    padding: 8px 16px !important;
    transition: background-color .15s ease, box-shadow .15s ease;
    width: auto !important;
}

.save_edit:hover {
    background: var(--bs-blue-hover) !important;
    box-shadow: var(--bs-shadow);
}

/* Table-level add buttons */
.addBtns {
    border-radius: var(--bs-radius-sm) !important;
    font-size: 13px !important;
    font-weight: 600;
    height: 36px !important;
    padding: 8px 16px !important;
}

/* Page-level Save / Go actions */
.save_btn,
.search_btn_big {
    font-size: 13px !important;
    height: 38px !important;
    min-width: 96px !important;
    padding: 9px 20px !important;
    width: auto !important;
}

/* ==========================================================================
   END BOOKSULTAN BUTTON ALIGNMENT
   ========================================================================== */

/* ---------- Offer form: checkboxes, uploads, editor ----------
   Areas/AdminWeb/Views/Offer/SpecialOffersAdvanced.cshtml (and the Normal
   variant) build fields from the same .form-group2 / .fieldTitle markup the
   report forms use, so the text inputs and selects are already covered.
   What was left unstyled:

     <div class="filterCheck checkCol">
       <input type="checkbox" id="..."><label class="checkTitle"><span>..</span></label>
     <input type="file" class="file1 ...">
     <div class="image_mini_viewer"><image class="img_mini_viewer" src=""></div>

   The preview image ships with an EMPTY src and is only filled in once a file
   is chosen, and an empty src renders as a broken-image icon - that is what
   the torn thumbnails beside Home Image and Bulk Upload were. It is hidden
   until it has a real source, and the wrapper becomes the placeholder slot. */

/* ---- Checkboxes ---- */
.filterCheck.checkCol {
    align-items: center;
    display: flex;
    gap: 9px;
    min-height: 42px;
}

.filterCheck.checkCol input[type="checkbox"] {
    accent-color: var(--bs-blue);
    cursor: pointer;
    flex: 0 0 auto;
    height: 17px;
    margin: 0;
    width: 17px;
}

.filterCheck.checkCol .checkTitle,
.checkTitle {
    color: var(--bs-ink);
    cursor: pointer;
    font-family: var(--bs-font);
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    padding: 0;
}

/* ---- File inputs ---- */
.form-group2 input[type="file"],
input.file1 {
    background: #fff;
    border: 1px solid var(--bs-line) !important;
    border-radius: var(--bs-radius-sm) !important;
    box-shadow: none !important;
    color: var(--bs-muted) !important;
    font-family: var(--bs-font);
    font-size: 13px !important;
    height: 42px;
    line-height: 1.5;
    padding: 7px 10px !important;
    width: 100%;
}

input[type="file"]::file-selector-button {
    background: var(--bs-blue-tint2);
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-radius-sm);
    color: var(--bs-blue-dark);
    cursor: pointer;
    font-family: var(--bs-font);
    font-size: 12.5px;
    font-weight: 600;
    margin-inline-end: 10px;
    padding: 6px 13px;
    transition: background-color .15s ease, border-color .15s ease;
}

input[type="file"]::file-selector-button:hover {
    background: var(--bs-blue-tint);
    border-color: var(--bs-blue-soft);
}

/* ---- Image preview slot ---- */
.image_mini_viewer {
    align-items: center;
    background: var(--bs-blue-tint2);
    border: 1px dashed var(--bs-blue-soft);
    border-radius: var(--bs-radius-sm);
    display: flex;
    height: 74px;
    justify-content: center;
    max-width: 120px;
    overflow: hidden;
    width: 100%;
}

.img_mini_viewer {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

/* An empty src is a broken image, so keep it out of the layout until filled */
.img_mini_viewer[src=""],
.img_mini_viewer:not([src]) {
    display: none !important;
}

/* ---- Add-row control ---- */
.multi_plus {
    align-items: center;
    border-radius: var(--bs-radius-sm) !important;
    display: inline-flex !important;
    height: 34px;
    justify-content: center;
    width: 34px;
}

/* ---- TinyMCE shell ---- */
.mce-panel,
.mce-tinymce,
.tox-tinymce {
    border-color: var(--bs-line) !important;
    border-radius: var(--bs-radius-sm) !important;
}

.mce-toolbar,
.mce-menubar,
.tox .tox-toolbar,
.tox .tox-toolbar__primary {
    background: var(--bs-blue-tint2) !important;
    border-bottom: 1px solid var(--bs-line) !important;
}

.mce-btn button,
.tox .tox-tbtn {
    border-radius: var(--bs-radius-sm) !important;
    color: var(--bs-ink) !important;
}

.mce-btn:hover,
.tox .tox-tbtn:hover {
    background: var(--bs-blue-tint) !important;
}

/* ==========================================================================
   END BOOKSULTAN OFFER FORM
   ========================================================================== */

/* ---------- Mixed field labels ----------
   Package Management (and several other Offer views) label their fields two
   different ways in the same form:

     <label class="fieldTitle">Package Name</label>
     <h3 class="search_box_label">Valid From</h3>

   mystyleCalibri.css:1232 only resets the h3's margin-TOP and sets it to 15px,
   so it keeps the browser's default heading margin-bottom and a larger size.
   That makes the label block a different height per column, which is why
   controls in the same row started at slightly different heights - Language
   against Package Name, Room against Number Of Days, Room 1 against Adult.

   Both label styles are normalised to one here so every column in a row has an
   identical label block, and every control in a field shares one height. */

.search_box_label {
    color: var(--bs-muted);
    font-family: var(--bs-font) !important;
    font-size: 12px !important;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.3;
    margin: 0 !important;
    padding: 0 0 7px !important;
    text-align: left;
}

/* One control height across text inputs, selects and the date fields, so the
   rows stay on a common baseline. */
.form-group2 .textBox1,
.form-group2 select.textBox1,
.form-group2 .input-group.dateIcon .textBox1 {
    height: 42px;
}

.form-group2 .field_container,
.field_container {
    width: 100%;
}

/* "Room 1" and similar inline group captions sit beside a labelled control,
   so they need the same label block height to line up with it. */
.form-group2 > .room_count_label,
.room_count_label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    padding: 0 0 7px;
}

/* ==========================================================================
   END BOOKSULTAN FIELD LABELS
   ========================================================================== */

/* ---------- Nested form sections and the upload widget ----------
   mystyleCalibri.css:724 makes .formSubDiv a card in its own right - white
   fill plus a Material double shadow (0 1px 3px/0 1px 2px) and a 15px bottom
   margin. It almost always sits INSIDE .formBlock, which is also a card, so
   the two stack and you get the extra shadowed box. Flattened when nested;
   left as a card when it stands alone.

   The upload control (.upFile > .uploadText + .uploadBtn, mystyleCalibri.css
   :1737-1745) is built from two floats at 75%/25% and a fixed 40px height,
   which left it a touch shorter than the 42px fields beside it and squared off
   against their rounded corners. */

/* Standalone: still a card */
.formSubDiv {
    background: #fff;
    border-radius: var(--bs-radius);
    box-shadow: var(--bs-shadow);
}

/* Nested in a form card: no second frame */
.formBlock .formSubDiv {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 0;
    padding: 0 !important;
}

/* ---- Upload control ---- */
.fileUpload1 {
    margin: 0 !important;
}

.form-group2.upFile,
.upFile {
    width: 100%;
}

.upFile .uploadText,
.textBox1.uploadText {
    background: #fff !important;
    border: 1px solid var(--bs-line) !important;
    border-inline-end: 0 !important;
    border-radius: var(--bs-radius-sm) 0 0 var(--bs-radius-sm) !important;
    color: var(--bs-muted) !important;
    height: 42px;
    width: 72% !important;
}

.upFile .uploadBtn,
.fileUpload1.uploadBtn {
    border: 0 !important;
    border-radius: 0 var(--bs-radius-sm) var(--bs-radius-sm) 0 !important;
    font-size: 13px;
    font-weight: 600;
    height: 42px;
    line-height: 42px;
    width: 28%;
}

/* ==========================================================================
   END BOOKSULTAN NESTED FORM SECTIONS
   ========================================================================== */

/* ---------- Form card ----------
   .formBlock is the standard form container across the admin - 417 views use
   it - so it is restyled as a card rather than removed.

   mystyleCalibri.css:682 gives it a flat grey #F4F3F3 fill, a near-invisible
   #f7f6f6 border and a grey 0 0 3px #C6C6C6 halo, which is the dull extra box
   that showed through inside the page panel. Two further definitions at :285
   and :944 reset its padding inside media queries, so the padding below is
   marked important to hold across breakpoints.

   float:left and width:100% are deliberately left alone - the grid relies on
   them. */

.formBlock {
    background: #fff !important;
    border: 1px solid var(--bs-line) !important;
    border-radius: var(--bs-radius) !important;
    box-shadow: var(--bs-shadow) !important;
    margin-bottom: 16px;
    padding: 18px 16px 4px !important;
}

/* Nested blocks inside a form card should not restate the frame */
.formBlock .formBlock {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin-bottom: 0;
    padding: 0 !important;
}

/* ==========================================================================
   END BOOKSULTAN FORM CARD
   ========================================================================== */

/* ---------- Primary nav bar and HOME tab ----------
   mystyleCalibri.css:539 gives #main_cat_menu li a `line-height:3.3` plus
   15px/16px vertical padding, so the tab renders about 74px tall - far taller
   than the bar needs - and because the anchor is only as tall as its own box,
   bar colour showed above and below the active tab instead of it filling the
   strip.

   The bar is pinned to one height and its parts are stretched to fill it, so
   the active tab runs the full height of the strip with no blue showing past
   its top edge. */

#navmenu {
    min-height: 44px;
}

#navmenu .control-mob {
    align-items: center;
    display: flex;
    min-height: 44px;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

#cpanel {
    padding: 0 0 0 20px !important;
}

#navmenu .nav-part,
#navmenu #mainmenu {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

#navmenu #main_cat_menu {
    align-items: stretch;
    display: flex;
    justify-content: flex-start;
    margin: 0;
    min-height: 44px;
}

#navmenu #main_cat_menu li {
    display: flex;
}

/* line-height is reset from 3.3 to 1 and the height comes from the flex row,
   so the tab matches the bar exactly top and bottom */
#navmenu #main_cat_menu li a {
    align-items: center;
    display: flex;
    font-size: 13px;
    line-height: 1 !important;
    min-height: 44px;
    padding: 0 20px !important;
}

/* ==========================================================================
   END BOOKSULTAN NAV BAR
   ========================================================================== */

/* ---------- Sticky sidebar ----------
   mystyleCalibri.css:1767 sets .all_page{overflow-x:hidden}. Any ancestor with
   overflow:hidden turns into a scroll container and silently kills
   position:sticky, so the rail would never stick. overflow-x:clip gives the
   same horizontal containment WITHOUT creating that scroll container, which
   leaves sticky working. */

.all_page {
    overflow-x: clip !important;
}

#secondmenudiv {
    align-self: flex-start;
    position: sticky;
    top: 108px;
}

/* ==========================================================================
   END BOOKSULTAN STICKY SIDEBAR
   ========================================================================== */

/* ---------- Fixed header and nav bar ----------
   _Layout.cshtml puts #header (line 277) and #navmenu (line 657) above a
   separate wrapper that holds the sidebar partial and @RenderBody(), so both
   bars can be taken out of flow without clipping the rail below them.

   .all_page gains top padding equal to the two bars (64 + 44) to replace the
   space they no longer occupy. The page itself still scrolls - the chrome
   stays put and only the content moves, which is the same result as an inner
   scroll container without re-plumbing the float grid. */

#header {
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1030;
}

#navmenu {
    left: 0;
    position: fixed;
    right: 0;
    top: 64px;
    z-index: 1029;
}

.all_page {
    padding-top: 108px;
    /* mystyleCalibri.css:1007 reserves 50px at the foot of every page. Zeroed
       here because page-level padding also shows under the sidebar rail. */
    padding-bottom: 0 !important;
}

/* Breathing room under the content only. The rail (#secondmenudiv) and the
   content column are siblings inside the wrapper below #navmenu, so the
   padding is put on whatever column follows the rail - never on the rail. */
#secondmenudiv ~ [class*="col-"] {
    padding-bottom: 24px;
}

/* ==========================================================================
   END BOOKSULTAN FIXED HEADER
   ========================================================================== */

/* ---------- Required markers, bare selects and inline checkboxes ----------
   Three separate causes of ragged rows, all visible on Offer/TopRoutes.cshtml
   but shared by other views:

   1. A required field's marker is <span class='req_field' style='font-size:15px'>
      inside a 12px label, so that one label's line box is taller than its
      neighbours' and its control starts a few px lower. The inline style can't
      be overridden by specificity, hence !important on font-size.

   2. The Journey Type column (.desti_wice) has no pad-8 and its select sits
      OUTSIDE .form-group2, so it missed both the gutter and the field styling
      every other control gets.

   3. "Is Active" puts the checkbox and its caption in two separate blocks -
      .filterCheck holds the input plus an empty label, then a sibling
      .fieldTitle.msearch holds the text - so the caption dropped below the
      box instead of sitting beside it. */

/* 1. Keep the asterisk from growing the label line */
.fieldTitle .req_field,
.search_box_label .req_field,
.req_field {
    font-size: inherit !important;
    line-height: 1;
    vertical-align: baseline;
}

/* 2. Give the stray column its gutter and its select the standard treatment */
.desti_wice {
    padding-left: 8px;
    padding-right: 8px;
}

.desti_wice > .textBox1 {
    border: 1px solid var(--bs-line) !important;
    border-radius: var(--bs-radius-sm) !important;
    box-shadow: none !important;
    color: var(--bs-ink) !important;
    font-size: 13px !important;
    height: 42px;
    padding: 9px 12px !important;
    width: 100%;
}

.desti_wice > .textBox1:focus {
    border-color: var(--bs-blue) !important;
    box-shadow: 0 0 0 3px rgba(60, 128, 190, .15) !important;
    outline: none !important;
}

/* 3. Put the checkbox and its caption on one line */
.metaCheck .form-group2 {
    align-items: center;
    display: flex;
    gap: 8px;
    min-height: 42px;
}

.metaCheck .filterCheck.checkCol {
    min-height: 0;
}

.fieldTitle.msearch {
    margin: 0;
    padding: 0 !important;
}

/* Do NOT hide .long_label_span when empty. The custom checkbox is drawn by
   input[type=checkbox] + label::before, and on these views that label holds
   nothing but this span - hiding it leaves the label with no box and the
   checkbox vanishes. It must keep its inline box. */
.long_label_span {
    display: inline-block;
    min-width: 1px;
}

/* ==========================================================================
   END BOOKSULTAN FIELD MARKERS
   ========================================================================== */

/* ---------- "show more" filter toggle ----------
   TransactionQueueReport.cshtml:201 is a bare <a id="showmorefilters">show more</a>
   with no class and no rule anywhere in the stylesheets, so it fell into the
   row's flow at the label line instead of lining up with the controls beside
   it. The 19px top margin clears the label block (12px text + 7px padding) and
   the 42px flex box centres it against the fields on the same row. */

#showmorefilters {
    align-items: center;
    color: var(--bs-blue-dark);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--bs-font);
    font-size: 13px;
    font-weight: 600;
    gap: 6px;
    height: 42px;
    margin-top: 19px;
    padding: 0 2px;
    text-decoration: none;
}

#showmorefilters:hover,
#showmorefilters:focus {
    color: var(--bs-blue);
    text-decoration: underline;
}

/* ==========================================================================
   END BOOKSULTAN SHOW MORE
   ========================================================================== */

/* ---------- Sidebar focus ring ----------
   The base layer sets `:focus-visible { outline: 2px solid var(--bs-blue) }`,
   which on the blue rail reads as a dark box around whatever link was last
   clicked. The ring is dropped here, but not the focus cue itself - a
   background wash replaces it so keyboard users can still see where they are
   rather than losing the indicator entirely. */

#secondmenudiv a:focus,
#secondmenudiv a:active,
#secondmenudiv span:focus,
#secondmenudiv span:active,
#secondmenudiv .menu-item:focus,
#secondmenudiv .menu-item2:focus {
    outline: none !important;
}

#secondmenudiv a:focus-visible,
#secondmenudiv .menu-item:focus-visible,
#secondmenudiv .menu-item2:focus-visible {
    background: rgba(255, 255, 255, .20);
    outline: none !important;
}

/* ==========================================================================
   END BOOKSULTAN SIDEBAR FOCUS
   ========================================================================== */

/* ---------- Radio / checkbox rows and payment logos ----------
   AgencyTopUp.cshtml builds every option as
     <div class="filterCheck radioCol check inline_block_check_radio cc_ave">
       <input type="radio"><label class="checkTitle ccavn-new-card"><span><img></span>
   The control and its label were on separate baselines, and the card artwork
   comes in at whatever size each image happens to be, so the rows did not line
   up with each other. Rows are laid out on one line and the logos are capped
   to a common height. */

.filterCheck.radioCol {
    align-items: center;
    display: flex;
    gap: 9px;
    min-height: 38px;
}

.filterCheck.inline_block_check_radio {
    display: inline-flex;
    margin-right: 20px;
    vertical-align: middle;
}

.filterCheck.radioCol input[type="radio"] {
    accent-color: var(--bs-blue);
    cursor: pointer;
    flex: 0 0 auto;
    height: 16px;
    margin: 0;
    width: 16px;
}

.filterCheck.radioCol .checkTitle {
    cursor: pointer;
    margin: 0;
    padding: 0;
}

/* Card artwork: one height so Visa and K-net rows match */
.checkTitle.ccavn-new-card img,
.cc_ave .checkTitle img {
    display: block;
    height: 26px;
    object-fit: contain;
    width: auto;
}

.checkTitle.ccavn-new-card > span,
.cc_ave .checkTitle > span {
    align-items: center;
    display: inline-flex;
}

/* ==========================================================================
   END BOOKSULTAN RADIO ROWS
   ========================================================================== */

/* ---------- Service charge readout ----------
   AgencyTopUp.cshtml:656 is <div id="dv_serviceCharge"></div>, filled by the
   script at line 559 (Resources.Service_Charge + ': ' + total). It shares a
   column with the Currency field, whose label and .form-group2 are both
   display:none in Online mode - so with nothing above it, the readout rose to
   the label line of TopUp Amount instead of sitting level with its input.

   The 19px top margin clears a label block (12px text + 7px padding) and the
   42px flex box centres it against the field beside it, matching how
   #showmorefilters is aligned on the report forms. */

#dv_serviceCharge {
    align-items: center;
    color: var(--bs-ink);
    display: flex;
    font-family: var(--bs-font);
    font-size: 13px;
    font-weight: 600;
    margin-top: 19px;
    min-height: 42px;
}

#dv_serviceCharge:empty {
    display: none;
}

/* ==========================================================================
   END BOOKSULTAN SERVICE CHARGE
   ========================================================================== */

/* ---------- BeHalf checkbox row ----------
   AgencyTopUp.cshtml:591 wraps a single checkbox in
   .row1 > #chkwithagencyid.pad-8 > .form-group2 > .filterCheck.checkCol.
   That stacks pad-8's padding, .form-group2's 15px bottom margin and the 42px
   minimum height the shared checkbox rule gives every row - well over 70px of
   space above one checkbox. Trimmed here only for this block, so other
   checkbox rows keep their normal rhythm. */

#chkwithagencyid {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

#chkwithagencyid .form-group2 {
    margin-bottom: 0;
}

#chkwithagencyid .filterCheck.checkCol {
    min-height: 0;
}

/* ==========================================================================
   END BOOKSULTAN BEHALF ROW
   ========================================================================== */

/* ---------- List table gutter ----------
   List cards put the grid in a bare <div class="row table-responsive"> inside
   .formSubDiv, e.g. TransportCompanyMaster.cshtml:59. bootstrap-plus zeroes
   .row's side margins, so the table sat hard against the card's inner edge
   while the heading row above it (.row1, which carries -8px side margins) read
   as inset - the table looked like it was escaping the card.

   A small side gutter puts the grid back in line with the heading. */

.formSubDiv > .row.table-responsive,
.formBlock > .row.table-responsive {
    padding-left: 8px;
    padding-right: 8px;
}

/* ==========================================================================
   END BOOKSULTAN LIST GUTTER
   ========================================================================== */

/* ---------- List card alignment ----------
   On master/list pages the form card sits inside
   <div class="transaction pl-20 mt-10 padR0"> while the list card is a sibling
   AFTER that wrapper closes (TransportCompanyMaster.cshtml:52-53), so it never
   picks up the wrapper's left inset and its white box starts further left than
   the form card above it.

   .pl-20 is declared four times (0 !important, 0, 0, then 20px) across media
   queries, so rather than try to mirror whichever one wins, the list card is
   simply given the 20px the layout intends. */

.transaction ~ .formBlock {
    margin-left: 20px;
}

/* ==========================================================================
   END BOOKSULTAN LIST CARD
   ========================================================================== */

/* ---------- Booking Details section and tab strip ----------
   ManageFlightBookings.cshtml:258
     .tabbable-panel > .tabbable-line > ul.nav.nav-tabs > li > a
     .tabbable-panel > .tab-content > .tab-pane

   mystyleCalibri.css:1082-1088 gives .tabbable-panel a flat 1px #CCC border
   and the strip a square #F68B1F bar (recoloured blue by the brand file), with
   each li locked to height:44px. The panel and strip now share the same 10px
   radius as every other card in the theme.

   Note the first tab carries class "actives", not Bootstrap's "active" - both
   are styled so the selected tab is correct on load and after a click.

   No overflow:hidden on the panel: anything rendered inline inside a tab pane
   (autocomplete lists, inline pickers) would be clipped by it. */

.tabbable-panel {
    background: #fff;
    border: 1px solid var(--bs-line) !important;
    border-radius: var(--bs-radius) !important;
    box-shadow: var(--bs-shadow);
    padding: 0 !important;
}

.tabbable-line > .nav-tabs {
    background-color: var(--bs-blue) !important;
    background-image: linear-gradient(180deg, #ff7a33 0%, #ff5a00 100%) !important;
    border: 0 !important;
    border-radius: 0 !important;
    align-items: stretch;
    display: flex;
    /* One row that scrolls sideways rather than wrapping onto a second line
       when the viewport is narrow (or DevTools is open). */
    flex-wrap: nowrap;
    margin: 0 !important;
    min-height: 44px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 6px 2px !important;
    /* No scrollbar-color or scrollbar-width here on purpose: Chrome 121+
       ignores every ::-webkit-scrollbar rule as soon as either is set to a
       non-initial value, and scrollbar-width only takes auto | thin | none,
       so it cannot express a specific height. Chrome is driven by the
       -webkit block below; Firefox picks the standard properties up from the
       @supports block after it. */
    -webkit-overflow-scrolling: touch;
}

/* The actual bar in Chrome and Edge. 10px rather than the 6px this started
   at - big enough to grab without crowding a 44px strip. */
.tabbable-line > .nav-tabs::-webkit-scrollbar {
    height: 10px;
}

.tabbable-line > .nav-tabs::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .20);
    border-radius: 999px;
}

.tabbable-line > .nav-tabs::-webkit-scrollbar-thumb {
    background: var(--bs-blue-dark);
    border: 2px solid transparent;
    background-clip: padding-box;   /* the border shows the track through */
    border-radius: 999px;
    min-width: 40px;                /* a grabbable thumb on a long strip */
}

.tabbable-line > .nav-tabs::-webkit-scrollbar-thumb:hover {
    background: var(--bs-blue);
    background-clip: padding-box;
}

.tabbable-line > .nav-tabs::-webkit-scrollbar-button {
    display: none;
    height: 0;
    width: 0;
}

/* Firefox has no ::-webkit-scrollbar, so it lands here and takes the
   standard properties. Chrome supports that selector, skips this block, and
   is left free to honour the -webkit rules above. */
@supports not selector(::-webkit-scrollbar) {
    .tabbable-line > .nav-tabs {
        scrollbar-color: var(--bs-blue-dark) rgba(255, 255, 255, .20);
        scrollbar-width: auto;
    }
}

.tabbable-line > .nav-tabs > li {
    display: flex;
    flex: 0 0 auto;
    float: none;
    height: auto !important;
    margin: 0 2px !important;
    padding-bottom: 0 !important;
}

.tabbable-line > .nav-tabs > li > a {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #fff !important;
    font-family: var(--bs-font);
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: .01em;
    align-items: center;
    display: flex;
    line-height: 1 !important;
    margin: 0 !important;
    min-height: 44px;
    padding: 0 16px !important;
    white-space: nowrap;
    transition: background-color .15s ease;
}

.tabbable-line > .nav-tabs > li > a:hover {
    background: rgba(255, 255, 255, .16) !important;
}

/* Bootstrap's .active is the only selected-state class here.
   .actives / .active1 / .active2 / .active3 in the markup are GROUP markers
   that manageflightbookings.js uses for enabling tabs ($('.actives')
   .removeClass('disabled')), not selection - styling .actives as selected lit
   the first tab permanently alongside whichever tab was really open. */
.tabbable-line > .nav-tabs > li.active > a,
.tabbable-line > .nav-tabs > li.active > a:hover,
.tabbable-line > .nav-tabs > li.active > a:focus {
    background: var(--bs-pink) !important;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18);
    color: #fff !important;
}

/* Until a tab is clicked no li carries .active, so highlight the first one */
.tabbable-line > .nav-tabs:not(:has(> li.active)) > li:first-child > a {
    background: var(--bs-pink) !important;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18);
    color: #fff !important;
}

.tabbable-panel .tab-content {
    background: #fff;
    border: 0;
    border-radius: 0 0 var(--bs-radius) var(--bs-radius);
    padding: 18px !important;
}

/* ---- Booking detail grids ----
   These tables are ragged: a row carrying an inline Edit button has 5 cells
   while its neighbours have 4, and no colspan makes up the difference. A row
   that runs out of cells simply stops, so with borders drawn only on the cells
   the table's right edge came and went down the column.

   Giving the TABLE its own border closes the rectangle regardless of how many
   cells a row has, so short rows now end in empty space inside a continuous
   frame instead of a broken edge. Cell counts are a markup matter and are left
   alone. */
.table_data {
    border: 1px solid var(--bs-line) !important;
    border-collapse: separate;
    border-radius: var(--bs-radius-sm);
    border-spacing: 0;
    width: 100%;
}

.table_data > tbody > tr > td,
.table_data > tr > td {
    border-bottom: 1px solid var(--bs-line-soft);
    font-size: 13px;
    padding: 11px 14px;
    vertical-align: middle;
}

.table_data > tbody > tr:last-child > td {
    border-bottom: 0;
}

.table_data > tbody > tr:hover > td {
    background: var(--bs-blue-tint2);
}

/* Section headings - "Trip Summary", "API Details", "Itinerary Details" - are
   <td colspan="5"><label class="table_head">, so they are styled as banded
   header rows rather than looking like another data row. */
.table_data .table_head {
    color: var(--bs-ink);
    display: block;
    font-family: var(--bs-font);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .01em;
    margin: 0;
}

.table_data > tbody > tr > td:has(> .table_head),
.table_data > tr > td:has(> .table_head) {
    background: var(--bs-blue-tint2) !important;
    border-bottom: 1px solid var(--bs-line);
    padding: 12px 14px;
}

/* No vertical dividers. These tables are ragged - Passenger Details has a
   six-cell first row then two-cell rows, with no colspan to make up the
   difference - so column rules stopped mid-row and the grid looked broken.
   Horizontal row lines plus the table frame read cleanly whether a row is
   full width or not. Equalising the columns properly needs colspan in the
   views, which is a markup change. */

/* The table's own border supplies the outer edge, so the trailing cell and the
   full-width heading cells do not draw one of their own. */
.table_data > tbody > tr > td:last-child,
.table_data > tr > td:last-child,
.table_data > tbody > tr > td:has(> .table_head),
.table_data > tr > td:has(> .table_head) {
    border-right: 0;
}

/* Same for the closing row, so the frame is not doubled along the bottom */
.table_data > tbody > tr:last-child > td,
.table_data > tbody > tr:last-child > th {
    border-bottom: 0;
}

/* Empty cells still need to hold their column open, or a short row collapses
   and drags the dividers out of line with the rows above it. */
.table_data > tbody > tr > td:empty,
.table_data > tr > td:empty {
    min-height: 1px;
}

.table_data > tbody > tr > th,
.table_data > tr > th {
    background: var(--bs-blue-tint2);
    border-bottom: 1px solid var(--bs-line);
    color: var(--bs-ink);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 10px 14px;
    text-align: left;
}

/* The result grids keep Bootstrap's collapsed borders - only the colour is
   brought in line. Changing their border-collapse would reflow every data
   table in the admin, which is not worth the risk for a colour match.
   .table_home:empty (declared earlier) still wins and stays borderless. */
.table1 {
    border-color: var(--bs-line) !important;
}

/* ---------- Itinerary Details, and the nested detail tables ----------
   Areas/AdminWeb/Views/Reports/IteneryDetailsPartial.cshtml lays a segment out
   as eight rows of "Label&nbsp;:&nbsp;<span class="... editable">value</span>"
   inside .inner_level_table. Everything in it - the labels, the values, the
   airline, the times - arrives in one weight and one colour, so a segment
   reads as a paragraph of fragments rather than as a table.

   PRESENTATION ONLY. The markup is left exactly as it is: bindmanager fills
   these cells by CLASS (AirlineName, Start_Time, StartTerminal and the rest),
   and the row and cell arrangement is what it binds against, so none of it can
   be rearranged. What CSS can do is separate label from value, and .editable -
   which every bound value carries and no label does - is the hook for that. */
.inner_level_table > tbody > tr > td,
.inner_level_table > tr > td {
    color: var(--bs-muted);
    font-size: 12.5px;
    line-height: 19px;
    padding: 7px 14px;
    vertical-align: top;
}

/* The value, against the label that introduces it */
.inner_level_table .editable,
.inner_level_table .MoreContent,
.inner_level_table .MoreContentSpan {
    color: var(--bs-ink);
    font-weight: 600;
}

/* The header strip - Airline / Departure / Arrival / Details. The .table_data
   header rule cannot reach it: that one is a child combinator and this table
   is nested a level deeper. */
.inner_level_table .normal_table_struct > th,
.inner_level_table .normal_table_struct > td {
    background: var(--bs-blue-tint2);
    border-bottom: 1px solid var(--bs-line);
    color: var(--bs-ink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
    padding: 9px 14px;
    text-transform: uppercase;
}

/* A rule under each segment's block of rows, so two segments stacked on one
   page do not run together. Scoped to the row that opens a segment. */
.inner_level_table > tbody > tr.normal_table_struct > th {
    border-top: 1px solid var(--bs-line);
}

/* The closing row of a segment - FlightCode, Meals, Is Refundable, Refund
   Type - sat hard against the bottom edge of the table. It cannot be reached
   with :last-child, because it is NOT the last row: an empty .transittime row
   and one more empty row follow it in the view, so :last-child points at
   something with nothing in it. The row is identified by what comes after it
   instead, which is stable as long as .transittime keeps closing a segment. */
.inner_level_table > tbody > tr:has(+ tr.transittime) > td,
.inner_level_table > tr:has(+ tr.transittime) > td {
    padding-bottom: 20px;
}

/* Those trailing empty rows should not add height of their own on top of it */
.inner_level_table > tbody > tr.transittime > td:empty,
.inner_level_table > tr.transittime > td:empty {
    padding: 0;
}

/* "showmore" is a control, not a value */
.inner_level_table .MoreContentSpan + a,
.inner_level_table a.showmore,
.inner_level_table .showmore {
    color: var(--bs-blue);
    font-weight: 600;
    text-decoration: underline;
}

/* ---- Send Ticket / Print Ticket ---- */
.common_btn_light {
    align-items: center;
    border-radius: var(--bs-radius-sm) !important;
    display: inline-flex !important;
    font-family: var(--bs-font);
    font-size: 13px;
    font-weight: 600;
    gap: 8px;
    padding: 9px 16px;
    transition: background-color .15s ease, color .15s ease;
}

/* ---- Reference / type / status strip above the tabs ---- */
.tab_common_heading {
    font-size: 13px;
    font-weight: 600;
}

/* ==========================================================================
   END BOOKSULTAN TABS
   ========================================================================== */

/* ---------- Page Creation screen ----------
   Areas/AdminWeb/Views/Page/PageCreation.cshtml predates the admin's form
   conventions: no .formBlock, no .fieldTitle, no .form-group2, no .main-head.
   It is a <table class="table"> of <td>label</td><td>input</td> pairs, bare
   <b>Form Field</b> section headings, three .table_data grids, and its own
   table picker (#Tablemenuul) sitting where the sidebar would be - the view
   hides #secondmenudiv in its own customstyles block to make room.

   Everything here is scoped to #pageCreationForm or those ids, so no other
   screen is touched. Presentation only - field names, ids, the drag-and-drop
   handlers and the submit target are untouched. */

/* ---- Two-column layout ----
   The grid gives #tablemenudiv col-md-12 (24% ~ 445px) and the form col-xs-30
   (60%), which left the rail oversized. Sizing the pair with calc() on the
   floats overflowed the content area, so the form is laid out with flex
   instead: a fixed rail and a form column that takes exactly what is left.
   align-items:flex-start is what lets the rail stay sticky as a flex item. */
#pageCreationForm {
    align-items: flex-start;
    display: flex;
    gap: 16px;
}

#tablemenudiv {
    flex: 0 0 268px;
    float: none !important;
    padding: 0 !important;
    position: sticky;
    top: 108px;
    width: 268px !important;
}

#pageCreationForm > .col-xs-30 {
    flex: 1 1 auto;
    float: none !important;
    /* min-width:0 stops a wide inner table from blowing the column out */
    min-width: 0;
    padding: 0 !important;
    width: auto !important;
}

#tablemenudiv::before {
    color: var(--bs-muted);
    content: "Tables";
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    padding: 0 0 8px 2px;
    text-transform: uppercase;
}

#tablemenudiv > .col-xs-50 {
    background: #fff;
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-radius);
    box-shadow: var(--bs-shadow);
    float: none !important;
    height: calc(100vh - 142px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 6px !important;
    scrollbar-color: var(--bs-blue-soft) transparent;
    scrollbar-width: thin;
    width: 100% !important;
}

#Tablemenuul {
    list-style: none;
    margin: 0;
    padding: 0 !important;
}

#Tablemenuul li { margin: 0; }

#Tablemenuul li + li { border-top: 1px solid var(--bs-line-soft); }

#Tablemenuul li a,
#Tablemenuul a {
    border-radius: var(--bs-radius-sm);
    color: var(--bs-ink);
    cursor: pointer;
    display: block;
    font-size: 12.5px;
    overflow: hidden;
    padding: 8px 10px;
    text-decoration: none !important;
    text-overflow: ellipsis;
    transition: background-color .12s ease, color .12s ease, padding-left .12s ease;
    white-space: nowrap;
}

#Tablemenuul li a:active,
#Tablemenuul a:active {
    background: var(--bs-blue);
    color: #fff;
}

#Tablemenuul li a:hover,
#Tablemenuul a:hover {
    background: var(--bs-blue-tint);
    color: var(--bs-blue-dark);
    padding-left: 14px;
}

#tablemenudiv > .col-xs-50::-webkit-scrollbar { width: 8px; }
#tablemenudiv > .col-xs-50::-webkit-scrollbar-thumb {
    background: var(--bs-blue-soft);
    border-radius: 999px;
}

/* ---- Form card ---- */
#tableFields {
    margin: 18px 0 28px;
    background: #fff;
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-radius);
    box-shadow: var(--bs-shadow);
    padding: 18px 18px 20px;
}

/* The field table: cell 1 is the caption, cell 2 the control, repeated.
   A stray <div class="form-group"> wraps the first pair in the markup, which
   the browser hoists out of the row - the rule below keeps the hoisted div
   from adding a stray line of its own. */
#tableFields > .table > .form-group,
#tableFields .table > tbody > .form-group {
    display: contents;
}

#tableFields > table.table {
    border: 0;
    margin-bottom: 18px;
    width: 100%;
}

#tableFields > table.table > tbody > tr,
#tableFields > table.table > tr {
    background: transparent !important;
}

#tableFields > table.table td {
    border: 0 !important;
    padding: 7px 10px 7px 0 !important;
    vertical-align: middle;
}

/* captions: 1st and 3rd cell of each row */
#tableFields > table.table td:nth-child(odd) {
    color: var(--bs-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
    width: 1%;
}

#tableFields .form-control {
    background: #fff;
    border: 1px solid var(--bs-line) !important;
    border-radius: var(--bs-radius-sm) !important;
    box-shadow: none !important;
    color: var(--bs-ink);
    font-size: 13px;
    height: 40px;
    padding: 8px 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
    width: 100%;
}

#tableFields .form-control:focus {
    border-color: var(--bs-blue) !important;
    box-shadow: 0 0 0 3px rgba(60, 128, 190, .15) !important;
    outline: none !important;
}

/* ---- Section headings: bare <b> in the markup ---- */
#tableFields > b,
#pageCreationForm #tableFields b {
    border-top: 1px solid var(--bs-line-soft);
    color: var(--bs-ink);
    display: block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .01em;
    margin: 18px 0 10px;
    padding-top: 16px;
}

#tableFields > b:first-of-type {
    border-top: 0;
    margin-top: 4px;
    padding-top: 0;
}

/* ---- The three .table_data grids ---- */
#tableFields .table_data {
    margin-bottom: 4px;
    width: 100%;
}

#tableFields .table_data > thead > tr > td {
    background: var(--bs-blue-tint2) !important;
    border-bottom: 1px solid var(--bs-line) !important;
    color: var(--bs-ink);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 10px 14px !important;
}

#tableFields .table_data > tbody > tr > td {
    font-size: 13px;
    padding: 10px 14px !important;
}

/* Empty-state row ("NoData") reads as a hint, not data */
#tableFields .table_data > tbody > tr:only-child > td {
    color: var(--bs-muted);
    font-style: normal;
}

/* ---- Advanced settings toggle ---- */
.advancedSettings,
.advancedSettingsSpan {
    color: var(--bs-blue-dark);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}

.advancedSettings:hover,
.advancedSettingsSpan:hover {
    text-decoration: underline;
}

/* ---- Submit ---- */
#pageCreationForm .search_btn,
#pageCreationForm .default_blue_btns {
    background: var(--bs-blue) !important;
    border: 0 !important;
    border-radius: var(--bs-radius-sm) !important;
    box-shadow: var(--bs-shadow);
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    height: 38px;
    margin-top: 14px;
    min-width: 110px;
    padding: 0 22px;
    transition: background-color .15s ease, box-shadow .15s ease;
}

#pageCreationForm .search_btn:hover,
#pageCreationForm .default_blue_btns:hover {
    background: var(--bs-blue-hover) !important;
    box-shadow: var(--bs-shadow-md);
}

/* ---- Validation text ---- */
#pageCreationForm .alertmsgs {
    display: block;
    font-size: 12.5px;
    margin-top: 5px;
}

/* ---- Filter Head / Table Head ----
   Both are a bare TEXT NODE followed by an input (lines 113 and 191), with no
   label element to style, so the caption cannot be targeted directly. The
   inputs are spaced off the text above them and capped to a sensible width
   instead of spanning the whole card like the grids below them. */
#pageNameFilter,
#pageNameTableFilter {
    display: block;
    margin: 6px 0 20px;
    max-width: 420px;
}

/* ---- Gaps around the three grids ---- */
#tableFields .table_data {
    margin: 4px 0 22px;
}

#tableFields .table_data:last-of-type {
    margin-bottom: 8px;
}

/* ---- Advanced settings ---- */
.advancedSettings {
    display: block;
    margin: 4px 0 0;
}

.advancedSettingsSpan {
    display: inline-block;
    margin-bottom: 12px;
}

/* Its inputs carry no class at all, only placeholders */
#pcTable input {
    background: #fff;
    border: 1px solid var(--bs-line) !important;
    border-radius: var(--bs-radius-sm) !important;
    box-shadow: none !important;
    color: var(--bs-ink);
    font-size: 12.5px;
    height: 36px;
    padding: 7px 10px;
    width: 100%;
}

#pcTable input:focus {
    border-color: var(--bs-blue) !important;
    box-shadow: 0 0 0 3px rgba(60, 128, 190, .15) !important;
    outline: none !important;
}

#pcTable > tr > td,
#pcTable td {
    padding: 5px !important;
    vertical-align: middle;
}

.advancedSettingsTable {
    background: var(--bs-blue-tint2);
    border: 1px solid var(--bs-line) !important;
    border-radius: var(--bs-radius-sm);
    margin-bottom: 20px !important;
    padding: 8px;
}

/* ---- Dropdowns inside the three grids ----
   pagecreation.js injects raw <select> elements (12 of them) into
   #tableBodyForm / #tableBodyFilter / #tableBodyTableFilter with no class, so
   they rendered as unstyled browser controls inside an otherwise themed grid.
   Styled here by position rather than by class, with the native arrow replaced
   by a CSS caret so they match the selects elsewhere in the admin. */
#tableFields .table_data select,
#tableBodyForm select,
#tableBodyFilter select,
#tableBodyTableFilter select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5463' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-position: calc(100% - 9px) center;
    background-repeat: no-repeat;
    background-size: 13px 13px;
    border: 1px solid var(--bs-line) !important;
    border-radius: var(--bs-radius-sm) !important;
    box-shadow: none !important;
    color: var(--bs-ink);
    cursor: pointer;
    font-family: var(--bs-font);
    font-size: 12.5px;
    height: 34px;
    min-width: 128px;
    padding: 6px 30px 6px 10px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

#tableFields .table_data select:focus,
#tableBodyForm select:focus,
#tableBodyFilter select:focus,
#tableBodyTableFilter select:focus {
    border-color: var(--bs-blue) !important;
    box-shadow: 0 0 0 3px rgba(60, 128, 190, .15) !important;
    outline: none !important;
}

/* Text inputs the same script injects alongside them */
#tableBodyForm input[type="text"],
#tableBodyFilter input[type="text"],
#tableBodyTableFilter input[type="text"] {
    background: #fff;
    border: 1px solid var(--bs-line) !important;
    border-radius: var(--bs-radius-sm) !important;
    box-shadow: none !important;
    color: var(--bs-ink);
    font-size: 12.5px;
    height: 34px;
    padding: 6px 10px;
}

/* Column-meta cell reads as a definition list, not body copy */
#tableBodyForm > tr > td:first-child,
#tableBodyFilter > tr > td:first-child,
#tableBodyTableFilter > tr > td:first-child {
    color: var(--bs-muted);
    font-size: 12px;
    line-height: 1.7;
}

/* ==========================================================================
   END BOOKSULTAN PAGE CREATION
   ========================================================================== */

/* ---------- Itinerary amend buttons ----------
   Hotel, Car and Sports itinerary partials each hard-code an Edit and a Cancel
   button with the legacy orange as an INLINE style, e.g.
   HotelIteneryDetailsPartial.cshtml:79
     style="background-color:#F68B1F; color:#fff; padding:5px 10px;
            border:none; font-size:15px;"
   Inline styles outrank any selector, so every property restyled here needs
   !important. `display` is deliberately NOT touched - the Cancel buttons are
   inline display:none and toggled by script. */

#editHotelDetails,
#editCarDetails,
#editSportsDetails,
#cancelEditHotelDetails,
#cancelEditCarDetails,
#cancelEditSportsDetails {
    border-radius: var(--bs-radius-sm) !important;
    font-family: var(--bs-font);
    font-size: 13px !important;
    font-weight: 600 !important;
    height: 34px;
    letter-spacing: .01em;
    padding: 0 16px !important;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* Edit is the primary action */
#editHotelDetails,
#editCarDetails,
#editSportsDetails {
    background-color: var(--bs-blue) !important;
    border: 0 !important;
    box-shadow: var(--bs-shadow);
    color: #fff !important;
}

#editHotelDetails:hover,
#editCarDetails:hover,
#editSportsDetails:hover {
    background-color: var(--bs-blue-hover) !important;
    box-shadow: var(--bs-shadow-md);
}

/* Cancel reads as secondary beside it */
#cancelEditHotelDetails,
#cancelEditCarDetails,
#cancelEditSportsDetails {
    background-color: #fff !important;
    border: 1px solid var(--bs-line) !important;
    color: var(--bs-ink) !important;
}

#cancelEditHotelDetails:hover,
#cancelEditCarDetails:hover,
#cancelEditSportsDetails:hover {
    background-color: var(--bs-blue-tint2) !important;
    border-color: var(--bs-blue-soft) !important;
}

/* ==========================================================================
   END BOOKSULTAN AMEND BUTTONS
   ========================================================================== */

/* ---------- Visual Indicators gauges ----------
   SystemDetails.cshtml:33-47 renders each gauge as
     .col-md-10 > .graph_indcations.text-center
       > .graph_label > span.grp_indicator_block + caption
       > svg#fillgauge2 / #fillgauge3   (filled by loadLiquidFillGauge)

   The percentage inside each gauge is an SVG <text> node, and SVG text falls
   back to SERIF unless a font is set - that is why 8.63% and 91.37% did not
   match the rest of the admin. The legend caption had no font set either. */

.graph_indcations {
    padding: 4px 0 10px;
}

.graph_label {
    align-items: center;
    color: var(--bs-ink);
    display: inline-flex;
    font-family: var(--bs-font);
    font-size: 12px;
    font-weight: 700;
    gap: 8px;
    justify-content: center;
    letter-spacing: .04em;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.grp_indicator_block {
    border-radius: 3px;
    display: inline-block;
    flex: 0 0 auto;
    height: 11px;
    width: 11px;
}

.grp_indicator_block.orange_color {
    background: var(--bs-blue);
}

/* SVG text defaults to serif - give it the admin's face */
#fillgauge1 text,
#fillgauge2 text,
#fillgauge3 text,
.graph_indcations svg text {
    font-family: var(--bs-font) !important;
    font-weight: 700;
}

/* Equal columns so the pair reads as a set rather than two loose charts */
.col-md-10:has(> .graph_indcations) {
    width: 25%;
}

/* ==========================================================================
   END BOOKSULTAN GAUGES
   ========================================================================== */

/* ---------- select2 multi-selects ----------
   Fields marked typingdropdown="true" (Agency on the Sales Report, and others)
   are turned into select2 by autolistdropdown.js:189. _Layout.cshtml loads
   select2.min.css at line 130 - AFTER the theme at 117 - so every rule here
   needs !important regardless of specificity.

   Both the chip box and the <select multiple> beside it are allowed to size to
   their content. Capping them at 42px lined the row up but clipped the values
   and produced an internal scrollbar, so the row is allowed to be taller than
   its neighbours instead - showing the data matters more than a flush row. */

.select2-container--default .select2-selection--single {
    background: #fff !important;
    border: 1px solid var(--bs-line) !important;
    border-radius: var(--bs-radius-sm) !important;
    min-height: 42px !important;
    padding: 0 6px !important;
}

.select2-container--default .select2-selection--multiple {
    background: #fff !important;
    border: 1px solid var(--bs-line) !important;
    border-radius: var(--bs-radius-sm) !important;
    /* grows with the chips - no max-height, no inner scrollbar */
    height: auto !important;
    max-height: none !important;
    min-height: 42px !important;
    overflow: visible !important;
    padding: 0 6px 4px !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--bs-blue) !important;
    box-shadow: 0 0 0 3px var(--bs-blue-tint) !important;
}

/* Chips */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--bs-blue-tint) !important;
    border: 1px solid var(--bs-blue-soft) !important;
    border-radius: 999px !important;
    color: var(--bs-blue-dark) !important;
    font-family: var(--bs-font) !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    margin: 6px 4px 0 0 !important;
    padding: 2px 10px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--bs-blue-dark) !important;
    font-weight: 700 !important;
    margin-right: 6px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--bs-pink) !important;
}

/* Dropdown panel */
.select2-dropdown {
    border: 1px solid var(--bs-line) !important;
    border-radius: var(--bs-radius-sm) !important;
    box-shadow: var(--bs-shadow-md) !important;
    overflow: hidden !important;
}

.select2-results__option {
    font-family: var(--bs-font) !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
}

.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--bs-blue) !important;
    color: #fff !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--bs-blue-tint) !important;
    color: var(--bs-blue-dark) !important;
}

/* The results list keeps scrolling - wheel, trackpad, touch and the arrow
   keys all still move it, and the search field above narrows it to a few rows
   in a couple of keystrokes - but the bar itself is hidden. It was a grey
   stripe down the side of a panel that is otherwise all white and rule lines.
   Hidden the same way .txn-strip's is, and for the same reason. */
.select2-results__options {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.select2-results__options::-webkit-scrollbar {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
}

/* select2 focuses this field the moment the list opens, so it was wearing the
   admin's focus ring - a heavy blue box - permanently, inside a panel that
   already has its own border a few pixels away. Boxing a field that is always
   focused says nothing, so the box goes and a hairline divides the search row
   from the results instead. The focus state is restated because the generic
   input rules would otherwise put the ring straight back. */
.select2-container--default .select2-search--dropdown .select2-search__field,
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border: 0 !important;
    border-bottom: 1px solid var(--bs-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: var(--bs-font) !important;
    font-size: 13px !important;
    outline: none !important;
    padding: 8px 10px !important;
}

/* A <select multiple> is a list box: let it use its natural size so every
   option is readable. Forcing it to 42px showed barely two rows and added a
   scrollbar. To remove the scrollbar entirely the view has to set size= to the
   option count - CSS cannot change how many rows a list box renders. */
.form-group2 select[multiple],
.form-group2 select[size] {
    height: auto !important;
    min-height: 42px !important;
    padding: 6px 8px !important;
}

/* ---------- select2 single selects ----------
   index.js turns the Booking Details status filter (#ddl_StatusForGrid) into
   one of these, for the search box: the list runs to twenty-odd statuses on a
   full permission set, and a native dropdown can only be typed at one letter
   at a time.

   select2 sizes the value and the caret for its own 28px control, so in the
   42px box the rest of the admin uses they both sat high. The rules above
   already cover the box, the dropdown, the results and the search field. */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--bs-ink) !important;
    font-family: var(--bs-font) !important;
    font-size: 13px !important;
    /* 40 + the 1px borders = the 42px the neighbouring fields stand at */
    line-height: 40px !important;
    padding-left: 6px !important;
    /* clear of the caret */
    padding-right: 28px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    /* The same caret the plain selects carry, at the same size, in the same
       grey and the same 12px off the border - select2's own mark is a solid
       triangle built out of border-colour, which read as a heavier, darker
       thing than every other field in the row. */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555659' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 14px 14px !important;
    /* Pinned to both edges rather than given a height, so it stays centred
       whatever the control grows to. */
    bottom: 0 !important;
    height: auto !important;
    right: 12px !important;
    top: 0 !important;
    transition: transform .15s ease;
    width: 14px !important;
}

[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__arrow {
    left: 12px !important;
    right: auto !important;
}

/* Turned over while the list is open, as the caret on a plain select is not */
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow {
    transform: rotate(180deg);
}

/* The triangle itself: three borders on a zero-sized box. */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none !important;
}

[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 28px !important;
    padding-right: 6px !important;
}

/* The placeholder-ish first option reads as a prompt, not as a value */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--bs-ink-soft, #6b7a85) !important;
}

/* ==========================================================================
   END BOOKSULTAN SELECT2
   ========================================================================== */

/* ---------- The hold-time select inside a results row ----------
   index.js, CreateExpectedCancellationdate(), drops a bare
   <select class='drp_cancelationLimit'> straight into a grid cell - no
   wrapper, no field class - so it drew as the browser's own control in the
   middle of an otherwise styled table.

   Restyled and nothing else: it stays a real <select> with its option values
   and texts exactly as they were, because the change handler reads both - the
   value for the minutes it posts, and the selected option's TEXT for the
   label that goes with it.

   Sized for a table row rather than for a form. The 42px box the form fields
   use would add ten pixels to every row of the grid, and this control sits in
   every one of them. */
select.drp_cancelationLimit {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555659' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-position: calc(100% - 9px) center;
    background-repeat: no-repeat;
    background-size: 13px 13px;
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-radius-sm);
    box-shadow: none;
    color: var(--bs-ink);
    cursor: pointer;
    font-family: var(--bs-font);
    font-size: 12.5px;
    height: 32px;
    /* Wide enough for the longest option, so the control keeps its width as
       the row's value changes - "60 Mins" and "3 Days" are not the same
       length, and a box that resizes under the pointer is hard to aim at. */
    min-width: 104px;
    padding: 5px 28px 5px 10px;
    transition: border-color .15s ease, box-shadow .15s ease;
    vertical-align: middle;
}

select.drp_cancelationLimit:hover {
    border-color: var(--bs-blue-soft);
}

select.drp_cancelationLimit:focus {
    border-color: var(--bs-blue);
    box-shadow: 0 0 0 3px var(--bs-blue-tint);
    outline: none;
}

[dir="rtl"] select.drp_cancelationLimit {
    background-position: 9px center;
    padding: 5px 10px 5px 28px;
}

/* ---------- Plain selects ----------
   Most report fields are .textBox1.autolist, which autolistdropdown.js swaps
   for selectric or select2 - so they show no native arrow. A few are left as
   ordinary selects with their own class, e.g. Booking Through on the Sales
   Report (#ddlSourceInfo, class "main_txtfield_1"), and those kept the browser
   arrow and their own height, which is why that one looked unlike its row.

   Every single-value select in a field block is brought to the same 42px box
   with the theme's caret. List boxes are excluded - :not([multiple]):not([size])
   - because those are meant to size to their content. */

.form-group2 select:not([multiple]):not([size]),
select.main_txtfield_1:not([multiple]),
.field_container select:not([multiple]):not([size]) {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5463' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-position: calc(100% - 12px) center !important;
    background-repeat: no-repeat !important;
    background-size: 14px 14px !important;
    border: 1px solid var(--bs-line) !important;
    border-radius: var(--bs-radius-sm) !important;
    box-shadow: none !important;
    color: var(--bs-ink) !important;
    font-family: var(--bs-font);
    font-size: 13px !important;
    height: 42px !important;
    padding: 9px 36px 9px 12px !important;
    width: 100%;
}

.form-group2 select:not([multiple]):not([size]):focus,
select.main_txtfield_1:not([multiple]):focus {
    border-color: var(--bs-blue) !important;
    box-shadow: 0 0 0 3px var(--bs-blue-tint) !important;
    outline: none !important;
}

/* mystyleCalibri.css:715 already draws an arrow for these fields -
   .selectBoxArrow::before paints selectArrow.png at right:0 - so a select
   inside that wrapper ended up with two. The bitmap one is dropped and the CSS
   caret above is kept, so every select carries the same mark. Scoped with
   :has() so a .selectBoxArrow wrapping anything else keeps its arrow. */
.form-group2.selectBoxArrow::before,
.selectBoxArrow:has(> select:not([multiple]):not([size]))::before,
.selectBoxArrow:has(select:not([multiple]):not([size]))::before {
    background-image: none !important;
    content: none !important;
}

/* ==========================================================================
   END BOOKSULTAN PLAIN SELECTS
   ========================================================================== */

/* ---------- Direct Payment buttons ----------
   Areas/AdminWeb/Views/Transaction/DirectPayment.cshtml ships three submit
   buttons in one .form-group2, all carrying .generate_code_btn. That class is
   width:100% with margin-bottom:15px in the legacy sheets, so they rendered as
   three heavy blocks stacked down a third-width column, each as loud as the
   next - nothing said which one you were meant to press.

   Scoped to the three ids rather than to .generate_code_btn, because five
   other screens share that class (Coupon generation, API Access, Application
   Download, API Balance Check) and they are not being restyled here.

   Presentation only. They stay type=submit with their name="command" values
   (tinyURL / ENGLISH / link), and their ids are untouched - directpayment.js
   keys off all three by id, and toggles #senttocustomer's disabled attribute. */

/* Two generate buttons share a row, Send takes its own underneath: that is the
   order the screen actually works in - generate a link, then send it. :has()
   is used so the wrapper is matched without adding a class to the markup; the
   button rules below stand on their own where it is unsupported. */
.form-group2:has(> #GenerateLink) {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#GenerateTinyURL,
#GenerateLink,
#senttocustomer {
    align-items: center;
    border: 1px solid transparent !important;
    border-radius: var(--bs-radius-sm) !important;
    box-shadow: none !important;
    display: inline-flex;
    font-family: var(--bs-font);
    font-size: 13px;
    font-weight: 600;
    gap: 8px;
    height: 40px;
    justify-content: center;
    letter-spacing: .01em;
    line-height: 1;
    margin: 0 !important;
    padding: 0 16px !important;
    text-transform: none !important;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    width: auto !important;
}

#GenerateTinyURL,
#GenerateLink {
    flex: 1 1 calc(50% - 5px);
    min-width: 150px;
}

#senttocustomer {
    flex: 1 1 100%;
}

/* A glyph each, as masks so they take the button's own text colour and no
   image files are added. */
#GenerateTinyURL::before,
#GenerateLink::before,
#senttocustomer::before {
    background: currentColor;
    content: "";
    flex: 0 0 15px;
    height: 15px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 15px;
    mask-size: 15px;
    width: 15px;
}

/* chain link */
#GenerateLink::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E");
}

/* scissors - the tiny URL is the shortened one */
#GenerateTinyURL::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='2.6'/%3E%3Ccircle cx='6' cy='18' r='2.6'/%3E%3Cpath d='M20 4 8.1 16.1M14.5 14.5 20 20M8.1 7.9 11 10.8'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='2.6'/%3E%3Ccircle cx='6' cy='18' r='2.6'/%3E%3Cpath d='M20 4 8.1 16.1M14.5 14.5 20 20M8.1 7.9 11 10.8'/%3E%3C/svg%3E");
}

/* paper plane */
#senttocustomer::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.5 2.5 10.5 13.5M21.5 2.5l-7 19-4-8-8-4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.5 2.5 10.5 13.5M21.5 2.5l-7 19-4-8-8-4z'/%3E%3C/svg%3E");
}

/* ---- Which one to press ----
   Generate Link is the ordinary path, so it is the filled primary. Generate
   Tiny URL does the same job in a different format, so it is the quieter
   outline of the same colour rather than a second filled block. */
#GenerateLink {
    background: var(--bs-blue) !important;
    background-color: var(--bs-blue) !important;
    border-color: var(--bs-blue) !important;
    color: #fff !important;
}

#GenerateLink:hover,
#GenerateLink:focus {
    background: var(--bs-blue-hover) !important;
    background-color: var(--bs-blue-hover) !important;
    border-color: var(--bs-blue-hover) !important;
    box-shadow: var(--bs-shadow-md) !important;
    color: #fff !important;
}

#GenerateTinyURL {
    background: #fff !important;
    background-color: #fff !important;
    border-color: var(--bs-line) !important;
    color: var(--bs-blue-dark) !important;
}

#GenerateTinyURL:hover,
#GenerateTinyURL:focus {
    background: var(--bs-blue-tint) !important;
    background-color: var(--bs-blue-tint) !important;
    border-color: var(--bs-blue) !important;
    color: var(--bs-blue-dark) !important;
}

/* Send carries the accent: it is the only one of the three that leaves the
   building, so it should not look like the two that just produce a string. */
#senttocustomer {
    background: var(--bs-pink) !important;
    background-color: var(--bs-pink) !important;
    border-color: var(--bs-pink) !important;
    color: #fff !important;
}

#senttocustomer:hover:not([disabled]),
#senttocustomer:focus:not([disabled]) {
    background: var(--bs-pink-hover) !important;
    background-color: var(--bs-pink-hover) !important;
    border-color: var(--bs-pink-hover) !important;
    box-shadow: var(--bs-shadow-md) !important;
    color: #fff !important;
}

/* directpayment.js keeps Send disabled until a link exists, which is most of
   the time - so the disabled state is a real state here, not an edge case. */
#senttocustomer[disabled],
#senttocustomer:disabled {
    background: var(--bs-bg) !important;
    background-color: var(--bs-bg) !important;
    border-color: var(--bs-line) !important;
    box-shadow: none !important;
    color: var(--bs-muted) !important;
    cursor: not-allowed;
    opacity: 1;              /* the muted palette already reads as disabled */
    transform: none !important;
}

#GenerateTinyURL:active,
#GenerateLink:active,
#senttocustomer:active:not([disabled]) {
    transform: translateY(1px);
}

#GenerateTinyURL:focus-visible,
#GenerateLink:focus-visible,
#senttocustomer:focus-visible {
    box-shadow: 0 0 0 3px var(--bs-blue-soft) !important;
    outline: none !important;
}

/* The generated link sits in a readonly textarea beside the buttons; it only
   appears once there is something in it, so it reads as output, not a field. */
#sendlink {
    background: var(--bs-blue-tint2) !important;
    border: 1px solid var(--bs-line) !important;
    border-radius: var(--bs-radius-sm) !important;
    color: var(--bs-ink) !important;
    font-size: 12.5px;
    padding: 9px 12px !important;
    resize: vertical;
}

@media (max-width: 991px) {
    /* Stacked on a narrow screen, but still sized and spaced rather than the
       full-width blocks this started as. */
    #GenerateTinyURL,
    #GenerateLink { flex: 1 1 100%; }
}

/* ==========================================================================
   END BOOKSULTAN DIRECT PAYMENT BUTTONS
   ========================================================================== */

/* ---------- Checkbox block spacing ----------
   mystyleCalibri.css:1729 gives .metaCheck margin:22px 0, so an IsOnline /
   Is Active pair sat 22px clear of the field above it and 22px clear of the
   Save row below - a gap wide enough to read as a section break. The inner
   contributors were already handled (min-height on .filterCheck.checkCol,
   margins on .fieldTitle.msearch); this is the outer one. */
.metaCheck {
    margin: 4px 0 !important;
}

/* The column wrapper adds its own 8px; between the two, a checkbox row now
   sits on the same rhythm as the inputs beside it. */
.metaCheck > .form-group2 {
    margin-bottom: 0 !important;
}

/* ==========================================================================
   END BOOKSULTAN CHECKBOX GAP
   ========================================================================== */

/* ---------- Supplier AirPort List table ----------
   mystyleCalibri.css:4013 sets, for this table alone:

       table#supplierAirport_tablebind td.td.bindtabledivtd {
           white-space: nowrap; width: 200px; display: inline-block;
           text-overflow: ellipsis; overflow: hidden; }

   display:inline-block takes the cells out of table layout, so they flow
   inline and wrap once the row runs out of width. At 1366px the Delete cell
   dropped onto its own line in the header and in every row; at ~1920px six
   cells at a fixed 200px left ~250px of slack that read as a seventh,
   header-less column; and an empty value left an empty 200px box inside the
   cell borders. All three were that one declaration.

   The cells go back to table-cell. The original goal - stopping a long
   DXB,MCT,KWI,... list from stretching the table - is kept with a max-width
   that WRAPS rather than an ellipsis that hides: a clipped airport list is
   data the admin cannot read, and the column is there to be read. */
table#supplierAirport_tablebind td.td.bindtabledivtd,
table#supplierAirport_tablebind th.th.bindtabledivtd {
    display: table-cell !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    width: auto !important;
}

/* The airport list and route columns hold comma-joined codes with no spaces,
   which will not break on their own - hence overflow-wrap, or one long list
   would widen the table instead of wrapping inside its cell. */
table#supplierAirport_tablebind td.td.bindtabledivtd {
    max-width: 320px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Edit and Delete sit side by side on one line again, and their buttons stop
   stretching now the cells are no longer a fixed 200px. */
table#supplierAirport_tablebind td.td.bindtabledivtd .vBtn,
table#supplierAirport_tablebind td.td.bindtabledivtd .eBtn,
table#supplierAirport_tablebind td.td.bindtabledivtd .dltBtn {
    white-space: nowrap;
}

/* ==========================================================================
   END BOOKSULTAN SUPPLIER AIRPORT TABLE
   ========================================================================== */

/* ---------- Bound report grids ----------
   #bindmanagerdiv is the container autobindmanager.js renders every bound
   grid into - 136 views use it - so these rules reach the reports, the CMS
   lists and the settings lists alike. */

/* Bootstrap 3 only makes .table-responsive scroll below 768px, so on a
   desktop a sixteen-column report ran off the right edge and its View
   column was unreachable. This scrolls at every width. */
#bindmanagerdiv,
#bindmanagerdiv.table-responsive {
    -webkit-overflow-scrolling: touch;
    border: 0;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-color: var(--bs-blue-soft) transparent;
    scrollbar-width: thin;
}

#bindmanagerdiv::-webkit-scrollbar { height: 10px; }
#bindmanagerdiv::-webkit-scrollbar-thumb {
    background: var(--bs-blue-soft);
    background-clip: padding-box;
    border: 2px solid transparent;
    border-radius: 999px;
}

/* ---- Header band ----
   The binder emits header cells as <td> inside <thead>, so both are
   matched. Labels keep wrapping - 'Trabacus Invoice Number' has to go
   somewhere - but the data below them does not. */
#bindmanagerdiv .table_data > thead > tr > td,
#bindmanagerdiv .table_data > thead > tr > th {
    background: var(--bs-blue-tint) !important;
    border: 0 !important;
    border-bottom: 2px solid var(--bs-blue-soft) !important;
    color: var(--bs-ink) !important;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.35;
    padding: 10px 12px !important;
    text-transform: uppercase;
    vertical-align: bottom;
    white-space: normal;
}

/* ---- Body rows ----
   Horizontal rules only. The vertical grid did no work: a reader follows a
   row across, and sixteen columns of boxes only added noise. */
#bindmanagerdiv .table_data > tbody > tr > td {
    border: 0 !important;
    border-bottom: 1px solid var(--bs-line-soft) !important;
    color: var(--bs-ink);
    font-size: 12.5px;
    padding: 9px 12px !important;
    vertical-align: middle;
    /* A timestamp broke onto three lines and tripled the row height */
    white-space: nowrap;
}

/* Free text has to be allowed to wrap, or a long customer name or remark
   would push the table wider than the screen can scroll comfortably.

   white-space:normal alone only breaks at spaces, and User holds email
   addresses - one unbreakable token - so the text overflowed the 190px box
   and drew over the Customer cell beside it. overflow-wrap lets the browser
   break mid-token when there is nothing else to break at.

   break-word rather than anywhere: `anywhere` also lowers the cell's
   min-content width, and measured at a 1100px viewport that collapsed the
   column to 54px and stacked the address four lines deep. `break-word`
   leaves the column asking for its full width, so the 190px cap is what
   sizes it and a long address simply takes a second line. Nothing is
   clipped either way. */
#bindmanagerdiv .table_data > tbody > tr > td.Customer,
#bindmanagerdiv .table_data > tbody > tr > td.Remarks,
#bindmanagerdiv .table_data > tbody > tr > td.AirlineName,
#bindmanagerdiv .table_data > tbody > tr > td.BranchName {
    max-width: 190px;
    overflow-wrap: break-word;
    white-space: normal;
}

/* User is the exception: it holds email addresses, and an address is not
   prose. It is one token, read left to right and copied whole, so breaking
   it mid-word costs more than the width it saves - and with no break point
   of its own it used to overflow the 190px cap and draw over the Customer
   cell beside it. No cap, no wrap: the column takes the width of the
   longest address and .table-responsive scrolls the grid if that pushes it
   past the viewport. */
#bindmanagerdiv .table_data > tbody > tr > td.User {
    max-width: none;
    white-space: nowrap;
}

#bindmanagerdiv .table_data > tbody > tr:nth-child(even) > td {
    background: var(--bs-blue-tint2);
}

#bindmanagerdiv .table_data > tbody > tr:hover > td {
    background: var(--bs-blue-tint) !important;
}

#bindmanagerdiv .table_data > tbody > tr:last-child > td {
    border-bottom: 0 !important;
}

/* Money and reference columns line up on the decimal point */
#bindmanagerdiv .table_data > tbody > tr > td.Total,
#bindmanagerdiv .table_data > tbody > tr > td.TotalAmount,
#bindmanagerdiv .table_data > tbody > tr > td.Amount {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

#bindmanagerdiv .table_data > thead > tr > td.Total,
#bindmanagerdiv .table_data > thead > tr > td.TotalAmount,
#bindmanagerdiv .table_data > thead > tr > td.Amount {
    text-align: right;
}

/* The booking reference is the column people scan for, so it carries the
   weight rather than sitting level with everything beside it. */
#bindmanagerdiv .table_data > tbody > tr > td.BookingReference,
#bindmanagerdiv .table_data > tbody > tr > td.ReferenceNumber {
    font-weight: 700;
}

/* ---- The column-toggle row ----
   The binder puts the show/hide checkboxes in the thead's first row. Loose
   on the white they read as part of the data; boxed and tinted they read
   as the control they are. */
#bindmanagerdiv .table_data > thead > tr > td.filterbycheckboxclass {
    background: var(--bs-bg) !important;
    border-bottom: 1px solid var(--bs-line) !important;
    padding: 12px !important;
    text-transform: none;
}

#bindmanagerdiv .tablefiltercheckbox,
#bindmanagerdiv .table_data > thead .filterCheck {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    margin: 0 14px 6px 0 !important;
    white-space: nowrap;
}

/* ---- Row actions ----
   The View column's buttons were clipped at the table's edge. */
#bindmanagerdiv .table_data > tbody > tr > td .vBtn,
#bindmanagerdiv .table_data > tbody > tr > td .eBtn,
#bindmanagerdiv .table_data > tbody > tr > td .dltBtn,
#bindmanagerdiv .table_data > tbody > tr > td .genBtn {
    white-space: nowrap;
}

/* An empty grid should not draw a frame around nothing */
#bindmanagerdiv .table_data:empty {
    border: 0 !important;
}

/* ==========================================================================
   END BOOKSULTAN REPORT GRID
   ========================================================================== */

/* ---------- Row action button icons ----------
   .vBtn/.eBtn/.dBtn/.uBtn/.genBtn/.dltBtn are declared color:#fff twice,
   which was written for a coloured button; the glyph fonts then set a colour
   of their own and ignore it. Inherit, so the icon is whatever the button
   says its LABEL is - white on the red and blue fills, and the dark ink on
   1_5's gold, where white would disappear. Pinning it to either one was what
   left a near-black eye sitting beside a white "Select". */
#bindmanagerdiv .table_data a.vBtn i,
#bindmanagerdiv .table_data a.eBtn i,
#bindmanagerdiv .table_data a.dBtn i,
#bindmanagerdiv .table_data a.uBtn i,
#bindmanagerdiv .table_data a.genBtn i,
#bindmanagerdiv .table_data a.dltBtn i,
#bindmanagerdiv .table_data a.vBtn .glyphicon,
#bindmanagerdiv .table_data a.eBtn .glyphicon {
    color: inherit !important;
    opacity: 1;
}

/* ---------- Booking Management toolbar ----------
   ManageFlightBookings.cshtml:189-198 - the With Price toggle and the Send /
   Print Ticket actions. All three are .common_btn_light, which is
   color:#ffce00 on a 1px #ffce00 border over white: gold on white is about
   1.6:1, so the labels were barely legible.

   The two that DO something are filled instead, where white on the primary
   is 8.7:1. With Price stays an outline because it is a toggle, not an
   action, and should not look like one. Scoped to the three ids - 20 views
   share .common_btn_light and the rest are not in front of us. */
#with_price_check.common_btn_light,
#EmailTicket.common_btn_light,
#showTicket.common_btn_light {
    align-items: center;
    border-radius: var(--bs-radius-sm) !important;
    display: inline-flex !important;
    float: none !important;
    font-size: 13px;
    font-weight: 600;
    gap: 8px;
    height: 38px;
    line-height: 1;
    margin: 0 0 0 8px !important;
    padding: 0 16px !important;
    vertical-align: middle;
    white-space: nowrap;
}

#EmailTicket.common_btn_light,
#showTicket.common_btn_light {
    background: var(--bs-blue) !important;
    border: 1px solid var(--bs-blue) !important;
    color: #ffffff !important;
}

#EmailTicket.common_btn_light:hover,
#showTicket.common_btn_light:hover {
    background: var(--bs-blue-hover) !important;
    border-color: var(--bs-blue-hover) !important;
    color: #ffffff !important;
}

#EmailTicket.common_btn_light .glyphicon,
#showTicket.common_btn_light .glyphicon {
    color: #ffffff !important;
    font-size: 13px;
    top: 0;
}

/* The toggle: neutral, so it reads as a setting beside the two actions */
#with_price_check.common_btn_light {
    background: #ffffff !important;
    border: 1px solid var(--bs-line) !important;
    color: var(--bs-ink) !important;
    cursor: pointer;
}

#with_price_check.common_btn_light:hover {
    background: var(--bs-blue-tint) !important;
    border-color: var(--bs-blue) !important;
    color: var(--bs-ink) !important;
}

/* Its checkbox sat flush against the label */
#with_price_check .strCount {
    font-weight: 600;
}

#with_price_check input[type="checkbox"] {
    accent-color: var(--bs-blue);
    cursor: pointer;
    height: 15px;
    margin: 0 !important;
    width: 15px;
}

/* The three sit on one row with even spacing rather than floated apart */
#with_price_check.common_btn_light { margin-left: 0 !important; }

/* ==========================================================================
   END BOOKSULTAN BOOKING TOOLBAR
   ========================================================================== */

/* ---------- Booking detail tabs ----------
   Eleven tabs - Booking Details through Edit History - were set in a solid
   --bs-blue ribbon with white labels and a --bs-pink active fill. Two
   problems with that:

     * a saturated full-width band competes with the record underneath it,
       which is the thing being read;
     * the active tab put color:#fff on var(--bs-pink), and where that token
       is a gold (Jazeera: #ffce00) white on it is about 1.5:1.

   So the strip becomes a quiet surface and the active tab becomes a white
   card that joins the panel below it, marked by a 3px accent bar on top.
   No label sits on the accent colour any more, so the contrast question
   does not arise whatever the palette. */
.tabbable-line > .nav-tabs {
    background: var(--bs-blue-tint) !important;
    background-color: var(--bs-blue-tint) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--bs-line) !important;
    /* !important, or this loses. The blue-ribbon rule earlier in this sheet
       sets border-radius:0 !important on the same selector, and an important
       declaration beats a plain one however much later it is written - so the
       strip kept square top corners while the panel under it was rounded. */
    border-radius: var(--bs-radius) var(--bs-radius) 0 0 !important;
    gap: 2px;
    padding: 6px 6px 0 !important;
}

/* The scrollbar was tuned for the blue band; on a pale strip it needs the
   contrast the other way round. */
.tabbable-line > .nav-tabs::-webkit-scrollbar-track {
    background: var(--bs-line-soft);
}

.tabbable-line > .nav-tabs::-webkit-scrollbar-thumb {
    background: var(--bs-blue-soft);
}

.tabbable-line > .nav-tabs::-webkit-scrollbar-thumb:hover {
    background: var(--bs-blue);
}

.tabbable-line > .nav-tabs {
    scrollbar-color: var(--bs-blue-soft) var(--bs-line-soft);
}

/* ---- Inactive tabs ---- */
.tabbable-line > .nav-tabs > li > a {
    background: transparent !important;
    border: 0 !important;
    border-radius: var(--bs-radius-sm) var(--bs-radius-sm) 0 0 !important;
    box-shadow: none !important;
    color: var(--bs-muted) !important;
    font-size: 13px;
    font-weight: 600;
    margin: 0 !important;
    padding: 11px 16px !important;
    transition: background-color .15s ease, color .15s ease;
}

.tabbable-line > .nav-tabs > li > a:hover {
    background: rgba(255, 255, 255, .72) !important;
    color: var(--bs-ink) !important;
}

/* ---- Active tab ----
   White, so it reads as the front of the panel below rather than a chip
   floating on a band. The 3px bar carries the brand colour instead of the
   label sitting on it. */
.tabbable-line > .nav-tabs > li.active > a,
.tabbable-line > .nav-tabs > li.active > a:hover,
.tabbable-line > .nav-tabs > li.active > a:focus,
.tabbable-line > .nav-tabs:not(:has(> li.active)) > li:first-child > a {
    background: #ffffff !important;
    box-shadow: inset 0 3px 0 0 var(--bs-pink) !important;
    color: var(--bs-ink) !important;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

/* It should sit flush on the panel, with no 1px line between them */
.tabbable-line > .nav-tabs > li.active,
.tabbable-line > .nav-tabs:not(:has(> li.active)) > li:first-child {
    margin-bottom: -1px !important;
}

.tabbable-line > .nav-tabs > li.active > a {
    padding-bottom: 12px !important;
}

/* ==========================================================================
   END BOOKSULTAN BOOKING TABS
   ========================================================================== */

/* ---------- Transaction modules: one strip, tiles, drawn glyphs ----------
   Content/js/transaction-tiles.js groups the fourteen headers into
   .txn-strip and their panels into .txn-panels, which is what lets the
   strip be a single scrolling line while a panel still takes the full width
   below it. CSS alone could not do both: one line needs flex-wrap:nowrap,
   and the full-width panel only breaks because wrapping is on, so the two
   cannot both hold while headers and panels share a parent. */
.txn-strip {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    /* Room for the hover state, taken back out of the layout again.
       overflow-x:auto cannot leave the other axis visible - the spec computes
       it to auto as well - so the strip clips vertically whether it is asked
       to or not, and a tile that rises 3px on hover had its top border sliced
       off against 2px of padding, its shadow with it. The padding gives that
       room and the matching negative margin cancels it, so nothing above or
       below the strip moves: the tiles sit where they did and the space under
       them is the 4px it was (26 of padding less 22 of margin). */
    margin: -12px 0 -22px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 12px 2px 26px;
    /* mandatory, not proximity: a trackpad flick has to come to rest on a
       tile edge, the same as an arrow click does. */
    scroll-snap-type: x mandatory;
    /* The arrows replace the bar. It is hidden, not disabled: the strip still
       scrolls by trackpad, shift+wheel, touch and keyboard, so reaching the far
       tiles never depends on the buttons. */
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
}

.txn-strip::-webkit-scrollbar {
    display: none;
    height: 0;
    width: 0;
}

/* ---- The tile ---- */
.txn-strip .main-head.toggler {
    align-items: center;
    /* background-COLOR, not the shorthand: each module sets its own
       background-image below and the shorthand would wipe it. */
    background-color: #ffffff !important;
    border: 1px solid var(--bs-line) !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05) !important;
    color: var(--bs-ink) !important;
    display: flex !important;
    flex-direction: row;
    font-size: 13px !important;
    font-weight: 700 !important;
    gap: 0;
    justify-content: flex-start;
    letter-spacing: .005em;
    line-height: 1.3;
    margin: 0 !important;
    min-height: 74px;
    /* Clips the colour block's square corners to the card's radius, so the
       block needs no radius of its own and stays correct under RTL. */
    overflow: hidden;
    padding: 12px 16px 12px 74px !important;
    position: relative;
    scroll-snap-align: start;
    text-align: start;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    /* ONE width for every tile. transaction-tiles.js sizes the strip to a
       whole number of them, which is what stops the right-hand tile being
       sliced down the middle, and that sum only holds while the pitch is
       uniform. A long label wraps to a second line rather than widening its
       tile; a flex row stretches every item to the tallest, so they stay
       level. */
    flex: 0 0 212px;
    white-space: normal;
    width: 212px;
}

.txn-strip .main-head.toggler:hover {
    border-color: var(--bs-blue) !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .10) !important;
    transform: translateY(-3px);
}

/* ---- The plate behind the glyph ----
   It cannot be a box-shadow on ::before. A mask clips everything its element
   paints, the shadow included, so the plate was being masked away along with
   it and only the glyph ever showed - and on hover, where the glyph turns
   white to be knocked out of the plate, that left white on white and the icon
   disappeared. ::after carries the plate instead: unmasked, so it paints, and
   the two swap colour together. */
.txn-strip .main-head.toggler::after {
    /* The leading colour block. Each module paints it below; this is the
       fallback for one this sheet does not name. */
    background: var(--bs-blue);
    border: 0 !important;
    bottom: 0;
    content: "" !important;
    display: block !important;
    /* Physical, not inset-inline-start: the chevron rule this pseudo-element
       inherits from sets `right` with !important, and an important physical
       offset beats a logical one however it is ordered - which left the block
       unpinned and floating as a stub. RTL is handled by its own rule below. */
    left: 0 !important;
    margin: 0 !important;
    opacity: 1;
    position: absolute;
    right: auto !important;
    top: 0;
    /* top and bottom only stretch a box whose height is auto, and the chevron
       rule this pseudo-element inherits from sets height:10px - which left the
       block as a stub in the corner however it was pinned. */
    height: auto !important;
    transform: none !important;
    transition: background-color .18s ease;
    width: 58px;
    z-index: 0;
}

/* The glyph is white on the block at rest, so hover has nothing to knock out -
   the card lifts and its border takes the brand colour instead. */

/* The shipped PNGs are low-resolution and read as grey smudges at this
   size, so each module gets a drawn glyph instead. Keyed on data-targeter:
   two of the fourteen headers carry no class of their own, and every one of
   them has that attribute. Each glyph is drawn for THIS size: shapes that
   only separate under a magnifier are no use, so the van is boxed against
   the car's sloped roof, the train runs on a rail against the bus's wheels,
   and Flight+Hotel shows both symbols rather than a suitcase standing in
   for the pair. */
.txn-strip .main-head.toggler > img { display: none !important; }

.txn-strip .main-head.toggler::before {
    /* White, and centred on the colour block behind it. */
    background: #ffffff;
    content: "";
    height: 26px;
    left: 29px;
    margin: 0;
    position: absolute;
    right: auto;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 26px;
    mask-size: 26px;
    transition: background-color .18s ease;
    width: 26px;
}

.txn-strip .main-head.toggler[data-targeter="hMFHdtls"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 7.8h14.8a1.8 1.8 0 0 1 1.8 1.8v8.6a1.8 1.8 0 0 1-1.8 1.8H4.6a1.8 1.8 0 0 1-1.8-1.8V9.6a1.8 1.8 0 0 1 1.8-1.8z'/%3E%3Cpath d='M8.8 7.8V5.4a1.6 1.6 0 0 1 1.6-1.6h3.2a1.6 1.6 0 0 1 1.6 1.6v2.4'/%3E%3Cpath d='M12 7.8V20'/%3E%3Cpath d='M6.6 20v1.5M17.4 20v1.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 7.8h14.8a1.8 1.8 0 0 1 1.8 1.8v8.6a1.8 1.8 0 0 1-1.8 1.8H4.6a1.8 1.8 0 0 1-1.8-1.8V9.6a1.8 1.8 0 0 1 1.8-1.8z'/%3E%3Cpath d='M8.8 7.8V5.4a1.6 1.6 0 0 1 1.6-1.6h3.2a1.6 1.6 0 0 1 1.6 1.6v2.4'/%3E%3Cpath d='M12 7.8V20'/%3E%3Cpath d='M6.6 20v1.5M17.4 20v1.5'/%3E%3C/svg%3E");
}

.txn-strip .main-head.toggler[data-targeter="hMFlightdtls"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.2c-.9 0-1.6.7-1.6 1.6V8.9L3 13.4v1.9l7.4-2.2v4.2L8.4 19v1.4L12 19.4l3.6 1v-1.4l-2-1.7v-4.2l7.4 2.2v-1.9L13.6 8.9V3.8c0-.9-.7-1.6-1.6-1.6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.2c-.9 0-1.6.7-1.6 1.6V8.9L3 13.4v1.9l7.4-2.2v4.2L8.4 19v1.4L12 19.4l3.6 1v-1.4l-2-1.7v-4.2l7.4 2.2v-1.9L13.6 8.9V3.8c0-.9-.7-1.6-1.6-1.6z'/%3E%3C/svg%3E");
}

.txn-strip .main-head.toggler[data-targeter="hMhotelHdetls"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20v-5.6A2.4 2.4 0 0 1 5.4 12h13.2a2.4 2.4 0 0 1 2.4 2.4V20'/%3E%3Cpath d='M3 16.8h18'/%3E%3Cpath d='M6.4 12V9.6A1.6 1.6 0 0 1 8 8h8a1.6 1.6 0 0 1 1.6 1.6V12'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20v-5.6A2.4 2.4 0 0 1 5.4 12h13.2a2.4 2.4 0 0 1 2.4 2.4V20'/%3E%3Cpath d='M3 16.8h18'/%3E%3Cpath d='M6.4 12V9.6A1.6 1.6 0 0 1 8 8h8a1.6 1.6 0 0 1 1.6 1.6V12'/%3E%3C/svg%3E");
}

.txn-strip .main-head.toggler[data-targeter="hMsActdtls"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.6' y='6.4' width='18.8' height='11.2' rx='2.2'/%3E%3Cpath d='M15.4 6.4v11.2' stroke-dasharray='2 2.3'/%3E%3Cpath d='M6 10.6h5.6M6 13.6h3.6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.6' y='6.4' width='18.8' height='11.2' rx='2.2'/%3E%3Cpath d='M15.4 6.4v11.2' stroke-dasharray='2 2.3'/%3E%3Cpath d='M6 10.6h5.6M6 13.6h3.6'/%3E%3C/svg%3E");
}

.txn-strip .main-head.toggler[data-targeter="hMsB2CAgencydtls"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 20.4V8.1L12 3.6l7.8 4.5v12.3'/%3E%3Cpath d='M2.8 20.4h18.4'/%3E%3Cpath d='M9.6 20.4v-4.8h4.8v4.8'/%3E%3Cpath d='M8.4 11.6h2.2M13.4 11.6h2.2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 20.4V8.1L12 3.6l7.8 4.5v12.3'/%3E%3Cpath d='M2.8 20.4h18.4'/%3E%3Cpath d='M9.6 20.4v-4.8h4.8v4.8'/%3E%3Cpath d='M8.4 11.6h2.2M13.4 11.6h2.2'/%3E%3C/svg%3E");
}

.txn-strip .main-head.toggler[data-targeter="hMsBusdtls"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.3 4.6h15.4a1.8 1.8 0 0 1 1.8 1.8v8.2a1.8 1.8 0 0 1-1.8 1.8H4.3a1.8 1.8 0 0 1-1.8-1.8V6.4a1.8 1.8 0 0 1 1.8-1.8z'/%3E%3Cpath d='M2.5 10.1h19M12 4.6v5.5'/%3E%3Ccircle cx='6.8' cy='17.8' r='1.8'/%3E%3Ccircle cx='17.2' cy='17.8' r='1.8'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.3 4.6h15.4a1.8 1.8 0 0 1 1.8 1.8v8.2a1.8 1.8 0 0 1-1.8 1.8H4.3a1.8 1.8 0 0 1-1.8-1.8V6.4a1.8 1.8 0 0 1 1.8-1.8z'/%3E%3Cpath d='M2.5 10.1h19M12 4.6v5.5'/%3E%3Ccircle cx='6.8' cy='17.8' r='1.8'/%3E%3Ccircle cx='17.2' cy='17.8' r='1.8'/%3E%3C/svg%3E");
}

.txn-strip .main-head.toggler[data-targeter="hMsCardtls"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.4 16.9v-4.1l2.1-4.7A1.8 1.8 0 0 1 8.2 7h7.6a1.8 1.8 0 0 1 1.7 1.1l2.1 4.7v4.1'/%3E%3Cpath d='M4.4 12.8h15.2'/%3E%3Ccircle cx='7.6' cy='17.9' r='1.8'/%3E%3Ccircle cx='16.4' cy='17.9' r='1.8'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.4 16.9v-4.1l2.1-4.7A1.8 1.8 0 0 1 8.2 7h7.6a1.8 1.8 0 0 1 1.7 1.1l2.1 4.7v4.1'/%3E%3Cpath d='M4.4 12.8h15.2'/%3E%3Ccircle cx='7.6' cy='17.9' r='1.8'/%3E%3Ccircle cx='16.4' cy='17.9' r='1.8'/%3E%3C/svg%3E");
}

.txn-strip .main-head.toggler[data-targeter="hMsInsdtls"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.6 4.8 5.7v5.7c0 4.4 3 7.9 7.2 9.9 4.2-2 7.2-5.5 7.2-9.9V5.7z'/%3E%3Cpath d='m8.7 11.8 2.3 2.3 4.3-4.3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.6 4.8 5.7v5.7c0 4.4 3 7.9 7.2 9.9 4.2-2 7.2-5.5 7.2-9.9V5.7z'/%3E%3Cpath d='m8.7 11.8 2.3 2.3 4.3-4.3'/%3E%3C/svg%3E");
}

.txn-strip .main-head.toggler[data-targeter="hMsOfflinedtls"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2.8 8.2 4.3v9.8L12 21.2 3.8 16.9V7.1z'/%3E%3Cpath d='m3.8 7.1 8.2 4.4 8.2-4.4M12 11.5v9.7'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2.8 8.2 4.3v9.8L12 21.2 3.8 16.9V7.1z'/%3E%3Cpath d='m3.8 7.1 8.2 4.4 8.2-4.4M12 11.5v9.7'/%3E%3C/svg%3E");
}

.txn-strip .main-head.toggler[data-targeter="hMsPaidGuestdtls"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='7.9' r='3.4'/%3E%3Cpath d='M3.7 19.4c0-3.5 2.9-5.6 6.3-5.6h.7'/%3E%3Cpath d='m14 16.5 2.4 2.4 4.3-4.4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='7.9' r='3.4'/%3E%3Cpath d='M3.7 19.4c0-3.5 2.9-5.6 6.3-5.6h.7'/%3E%3Cpath d='m14 16.5 2.4 2.4 4.3-4.4'/%3E%3C/svg%3E");
}

.txn-strip .main-head.toggler[data-targeter="hMsPassdtls"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.2' y='4.6' width='17.6' height='14.8' rx='2.6'/%3E%3Ccircle cx='12' cy='10.4' r='2.5'/%3E%3Cpath d='M8 16.9c0-2.1 1.8-3.3 4-3.3s4 1.2 4 3.3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.2' y='4.6' width='17.6' height='14.8' rx='2.6'/%3E%3Ccircle cx='12' cy='10.4' r='2.5'/%3E%3Cpath d='M8 16.9c0-2.1 1.8-3.3 4-3.3s4 1.2 4 3.3'/%3E%3C/svg%3E");
}

.txn-strip .main-head.toggler[data-targeter="hMsTraindtls"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3.5h8a2.6 2.6 0 0 1 2.6 2.6v8.2a2.6 2.6 0 0 1-2.6 2.6H8a2.6 2.6 0 0 1-2.6-2.6V6.1A2.6 2.6 0 0 1 8 3.5z'/%3E%3Cpath d='M5.4 10.1h13.2'/%3E%3Cpath d='M9.2 16.9 6.6 20.6M14.8 16.9l2.6 3.7'/%3E%3Cpath d='M4.6 20.6h14.8'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3.5h8a2.6 2.6 0 0 1 2.6 2.6v8.2a2.6 2.6 0 0 1-2.6 2.6H8a2.6 2.6 0 0 1-2.6-2.6V6.1A2.6 2.6 0 0 1 8 3.5z'/%3E%3Cpath d='M5.4 10.1h13.2'/%3E%3Cpath d='M9.2 16.9 6.6 20.6M14.8 16.9l2.6 3.7'/%3E%3Cpath d='M4.6 20.6h14.8'/%3E%3C/svg%3E");
}

.txn-strip .main-head.toggler[data-targeter="hMsTransdtls"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 15.4V8.4a1.9 1.9 0 0 1 1.9-1.9h8.8l4.9 3.9h.9a1.9 1.9 0 0 1 1.9 1.9v3.1'/%3E%3Cpath d='M2.8 11.6h15.6M9.4 6.5v5.1'/%3E%3Ccircle cx='7' cy='16.8' r='2.1'/%3E%3Ccircle cx='16.5' cy='16.8' r='2.1'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 15.4V8.4a1.9 1.9 0 0 1 1.9-1.9h8.8l4.9 3.9h.9a1.9 1.9 0 0 1 1.9 1.9v3.1'/%3E%3Cpath d='M2.8 11.6h15.6M9.4 6.5v5.1'/%3E%3Ccircle cx='7' cy='16.8' r='2.1'/%3E%3Ccircle cx='16.5' cy='16.8' r='2.1'/%3E%3C/svg%3E");
}

.txn-strip .main-head.toggler[data-targeter="hMsportdtls"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.6 3.6h8.8v5.2a4.4 4.4 0 0 1-8.8 0z'/%3E%3Cpath d='M7.6 5.6H5.1a2.5 2.5 0 0 0 2.5 2.5M16.4 5.6h2.5a2.5 2.5 0 0 1-2.5 2.5'/%3E%3Cpath d='M12 13.2v3.4'/%3E%3Cpath d='M8.4 20.6h7.2l-.7-2.2a1.6 1.6 0 0 0-1.5-1.1h-2.8a1.6 1.6 0 0 0-1.5 1.1z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.6 3.6h8.8v5.2a4.4 4.4 0 0 1-8.8 0z'/%3E%3Cpath d='M7.6 5.6H5.1a2.5 2.5 0 0 0 2.5 2.5M16.4 5.6h2.5a2.5 2.5 0 0 1-2.5 2.5'/%3E%3Cpath d='M12 13.2v3.4'/%3E%3Cpath d='M8.4 20.6h7.2l-.7-2.2a1.6 1.6 0 0 0-1.5-1.1h-2.8a1.6 1.6 0 0 0-1.5 1.1z'/%3E%3C/svg%3E");
}


/* ---- One colour per module ----
   The Farekey dashboard gives each tile its own colour: a solid block on the
   leading edge and the card washed from a tint of it out to white. Keyed on
   data-targeter for the same reason the glyphs are - two of the fourteen
   headers carry no class of their own, and every one has that attribute. */
.txn-strip .main-head.toggler[data-targeter="hMFlightdtls"] {
    background-image: linear-gradient(90deg, #fbeef4 0%, #ffffff 62%) !important;
}

.txn-strip .main-head.toggler[data-targeter="hMFlightdtls"]::after {
    background: #d6447a;
}

.txn-strip .main-head.toggler[data-targeter="hMhotelHdetls"] {
    background-image: linear-gradient(90deg, #eaf1fc 0%, #ffffff 62%) !important;
}

.txn-strip .main-head.toggler[data-targeter="hMhotelHdetls"]::after {
    background: #2f6fd0;
}

.txn-strip .main-head.toggler[data-targeter="hMFHdtls"] {
    background-image: linear-gradient(90deg, #fdf4e3 0%, #ffffff 62%) !important;
}

.txn-strip .main-head.toggler[data-targeter="hMFHdtls"]::after {
    background: #e09400;
}

.txn-strip .main-head.toggler[data-targeter="hMsportdtls"] {
    background-image: linear-gradient(90deg, #e9f6ee 0%, #ffffff 62%) !important;
}

.txn-strip .main-head.toggler[data-targeter="hMsportdtls"]::after {
    background: #2e9e5b;
}

.txn-strip .main-head.toggler[data-targeter="hMsTransdtls"] {
    background-image: linear-gradient(90deg, #fdefe7 0%, #ffffff 62%) !important;
}

.txn-strip .main-head.toggler[data-targeter="hMsTransdtls"]::after {
    background: #e2641d;
}

.txn-strip .main-head.toggler[data-targeter="hMsInsdtls"] {
    background-image: linear-gradient(90deg, #f3f5e5 0%, #ffffff 62%) !important;
}

.txn-strip .main-head.toggler[data-targeter="hMsInsdtls"]::after {
    background: #7c8327;
}

.txn-strip .main-head.toggler[data-targeter="hMsCardtls"] {
    background-image: linear-gradient(90deg, #e6f3f3 0%, #ffffff 62%) !important;
}

.txn-strip .main-head.toggler[data-targeter="hMsCardtls"]::after {
    background: #0f7f81;
}

.txn-strip .main-head.toggler[data-targeter="hMsActdtls"] {
    background-image: linear-gradient(90deg, #efebfa 0%, #ffffff 62%) !important;
}

.txn-strip .main-head.toggler[data-targeter="hMsActdtls"]::after {
    background: #6a4fc0;
}

.txn-strip .main-head.toggler[data-targeter="hMsTraindtls"] {
    background-image: linear-gradient(90deg, #e8f2f4 0%, #ffffff 62%) !important;
}

.txn-strip .main-head.toggler[data-targeter="hMsTraindtls"]::after {
    background: #1f7a8c;
}

.txn-strip .main-head.toggler[data-targeter="hMsBusdtls"] {
    background-image: linear-gradient(90deg, #fbecea 0%, #ffffff 62%) !important;
}

.txn-strip .main-head.toggler[data-targeter="hMsBusdtls"]::after {
    background: #b8402f;
}

.txn-strip .main-head.toggler[data-targeter="hMsOfflinedtls"] {
    background-image: linear-gradient(90deg, #ecf1f8 0%, #ffffff 62%) !important;
}

.txn-strip .main-head.toggler[data-targeter="hMsOfflinedtls"]::after {
    background: #3d6ea8;
}

.txn-strip .main-head.toggler[data-targeter="hMsPaidGuestdtls"] {
    background-image: linear-gradient(90deg, #f8efe6 0%, #ffffff 62%) !important;
}

.txn-strip .main-head.toggler[data-targeter="hMsPaidGuestdtls"]::after {
    background: #a1612a;
}

.txn-strip .main-head.toggler[data-targeter="hMsPassdtls"] {
    background-image: linear-gradient(90deg, #eef1f7 0%, #ffffff 62%) !important;
}

.txn-strip .main-head.toggler[data-targeter="hMsPassdtls"]::after {
    background: #4b5f8a;
}

.txn-strip .main-head.toggler[data-targeter="hMsB2CAgencydtls"] {
    background-image: linear-gradient(90deg, #f5ecf8 0%, #ffffff 62%) !important;
}

.txn-strip .main-head.toggler[data-targeter="hMsB2CAgencydtls"]::after {
    background: #8a4b9c;
}

/* Under RTL the gradient has to run the other way; the block and the glyph
   follow inset-inline-start on their own. */
[dir="rtl"] .txn-strip .main-head.toggler {
    padding: 12px 74px 12px 16px !important;
}

[dir="rtl"] .txn-strip .main-head.toggler::after {
    left: auto !important;
    right: 0 !important;
}

[dir="rtl"] .txn-strip .main-head.toggler::before {
    left: auto;
    right: 29px;
    transform: translate(50%, -50%);
}

[dir="rtl"] .txn-strip .main-head.toggler[data-targeter="hMFlightdtls"] {
    background-image: linear-gradient(270deg, #fbeef4 0%, #ffffff 62%) !important;
}

[dir="rtl"] .txn-strip .main-head.toggler[data-targeter="hMhotelHdetls"] {
    background-image: linear-gradient(270deg, #eaf1fc 0%, #ffffff 62%) !important;
}

[dir="rtl"] .txn-strip .main-head.toggler[data-targeter="hMFHdtls"] {
    background-image: linear-gradient(270deg, #fdf4e3 0%, #ffffff 62%) !important;
}

[dir="rtl"] .txn-strip .main-head.toggler[data-targeter="hMsportdtls"] {
    background-image: linear-gradient(270deg, #e9f6ee 0%, #ffffff 62%) !important;
}

[dir="rtl"] .txn-strip .main-head.toggler[data-targeter="hMsTransdtls"] {
    background-image: linear-gradient(270deg, #fdefe7 0%, #ffffff 62%) !important;
}

[dir="rtl"] .txn-strip .main-head.toggler[data-targeter="hMsInsdtls"] {
    background-image: linear-gradient(270deg, #f3f5e5 0%, #ffffff 62%) !important;
}

[dir="rtl"] .txn-strip .main-head.toggler[data-targeter="hMsCardtls"] {
    background-image: linear-gradient(270deg, #e6f3f3 0%, #ffffff 62%) !important;
}

[dir="rtl"] .txn-strip .main-head.toggler[data-targeter="hMsActdtls"] {
    background-image: linear-gradient(270deg, #efebfa 0%, #ffffff 62%) !important;
}

[dir="rtl"] .txn-strip .main-head.toggler[data-targeter="hMsTraindtls"] {
    background-image: linear-gradient(270deg, #e8f2f4 0%, #ffffff 62%) !important;
}

[dir="rtl"] .txn-strip .main-head.toggler[data-targeter="hMsBusdtls"] {
    background-image: linear-gradient(270deg, #fbecea 0%, #ffffff 62%) !important;
}

[dir="rtl"] .txn-strip .main-head.toggler[data-targeter="hMsOfflinedtls"] {
    background-image: linear-gradient(270deg, #ecf1f8 0%, #ffffff 62%) !important;
}

[dir="rtl"] .txn-strip .main-head.toggler[data-targeter="hMsPaidGuestdtls"] {
    background-image: linear-gradient(270deg, #f8efe6 0%, #ffffff 62%) !important;
}

[dir="rtl"] .txn-strip .main-head.toggler[data-targeter="hMsPassdtls"] {
    background-image: linear-gradient(270deg, #eef1f7 0%, #ffffff 62%) !important;
}

[dir="rtl"] .txn-strip .main-head.toggler[data-targeter="hMsB2CAgencydtls"] {
    background-image: linear-gradient(270deg, #f5ecf8 0%, #ffffff 62%) !important;
}

/* ---- The open module ----
   Placed after the RTL gradients above on purpose: the open tile drops the
   wash for a flat tint, and these two sets carry the same specificity, so the
   one that wins is the one written last. A flat fill needs no RTL twin. */
.txn-strip .main-head.toggler.is-open {
    /* Lifted and held there, rather than the hover lift that falls away as
       soon as the pointer moves off. */
    box-shadow: 0 8px 18px rgba(0, 0, 0, .12) !important;
    transform: translateY(-3px);
}

.txn-strip .main-head.toggler[data-targeter="hMFlightdtls"].is-open {
    background-color: #fbeef4 !important;
    background-image: none !important;
    border-color: #d6447a !important;
}

.txn-strip .main-head.toggler[data-targeter="hMhotelHdetls"].is-open {
    background-color: #eaf1fc !important;
    background-image: none !important;
    border-color: #2f6fd0 !important;
}

.txn-strip .main-head.toggler[data-targeter="hMFHdtls"].is-open {
    background-color: #fdf4e3 !important;
    background-image: none !important;
    border-color: #e09400 !important;
}

.txn-strip .main-head.toggler[data-targeter="hMsportdtls"].is-open {
    background-color: #e9f6ee !important;
    background-image: none !important;
    border-color: #2e9e5b !important;
}

.txn-strip .main-head.toggler[data-targeter="hMsTransdtls"].is-open {
    background-color: #fdefe7 !important;
    background-image: none !important;
    border-color: #e2641d !important;
}

.txn-strip .main-head.toggler[data-targeter="hMsInsdtls"].is-open {
    background-color: #f3f5e5 !important;
    background-image: none !important;
    border-color: #7c8327 !important;
}

.txn-strip .main-head.toggler[data-targeter="hMsCardtls"].is-open {
    background-color: #e6f3f3 !important;
    background-image: none !important;
    border-color: #0f7f81 !important;
}

.txn-strip .main-head.toggler[data-targeter="hMsActdtls"].is-open {
    background-color: #efebfa !important;
    background-image: none !important;
    border-color: #6a4fc0 !important;
}

.txn-strip .main-head.toggler[data-targeter="hMsTraindtls"].is-open {
    background-color: #e8f2f4 !important;
    background-image: none !important;
    border-color: #1f7a8c !important;
}

.txn-strip .main-head.toggler[data-targeter="hMsBusdtls"].is-open {
    background-color: #fbecea !important;
    background-image: none !important;
    border-color: #b8402f !important;
}

.txn-strip .main-head.toggler[data-targeter="hMsOfflinedtls"].is-open {
    background-color: #ecf1f8 !important;
    background-image: none !important;
    border-color: #3d6ea8 !important;
}

.txn-strip .main-head.toggler[data-targeter="hMsPaidGuestdtls"].is-open {
    background-color: #f8efe6 !important;
    background-image: none !important;
    border-color: #a1612a !important;
}

.txn-strip .main-head.toggler[data-targeter="hMsPassdtls"].is-open {
    background-color: #eef1f7 !important;
    background-image: none !important;
    border-color: #4b5f8a !important;
}

.txn-strip .main-head.toggler[data-targeter="hMsB2CAgencydtls"].is-open {
    background-color: #f5ecf8 !important;
    background-image: none !important;
    border-color: #8a4b9c !important;
}

/* The help bubble belongs in the corner on a centred tile */
.txn-strip .main-head.toggler .help_hover_btn {
    position: absolute;
    right: 7px;
    top: 7px;
}

/* ---- The heading over the strip ----
   Every tile used to open with the same word - "Transactions - Flight",
   "Transactions - Hotel" - which cost each one the width of a word that was
   never the one being read. transaction-tiles.js lifts that shared opening
   off the labels and into this heading, so the tile carries the module name
   alone. */
.txn-strip-title {
    align-items: center;
    color: var(--bs-ink);
    display: flex;
    font-size: 18px;
    font-weight: 700;
    gap: 10px;
    letter-spacing: .01em;
    line-height: 1.2;
    margin: 34px 0 22px;
    padding-left: 20px;
}

/* A short brand rule, so it reads as a section head and not as a stray line */
.txn-strip-title::before {
    background: var(--bs-blue);
    border-radius: 2px;
    content: "";
    flex: 0 0 3px;
    height: 19px;
}

[dir="rtl"] .txn-strip-title {
    padding-left: 0;
    padding-right: 20px;
}

/* ---- The slider frame ----
   The left gap lines the tiles up with the Booking Details panel above them,
   which sits inside .pll-20.pl-20; the strip had been running flush to the
   content edge while everything around it was inset. */
.txn-strip-wrap {
    align-items: center;
    display: flex;
    gap: 8px;
    /* The heading above it now carries the gap from Booking Details. */
    margin-top: 0;
    padding-left: 20px;
}

.txn-nav {
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--bs-line);
    border-radius: 50%;
    box-shadow: var(--bs-shadow-md);
    color: var(--bs-blue);
    cursor: pointer;
    display: flex;
    height: 34px;
    justify-content: center;
    flex: 0 0 34px;
    padding: 0;
    transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
    width: 34px;
}

.txn-nav svg {
    height: 16px;
    width: 16px;
}

.txn-nav:hover:not([disabled]) {
    background: var(--bs-blue);
    border-color: var(--bs-blue);
    color: #ffffff;
}

/* Disabled rather than hidden at the ends, so the control does not jump about
   as the strip scrolls. */
.txn-nav[disabled] {
    cursor: default;
    opacity: .35;
}

/* The strip takes the space between them. min-width:0 is required: a flex
   item defaults to min-width:auto and would refuse to shrink below its content
   width, pushing the arrows out of the row. */
.txn-strip {
    flex: 1 1 auto;
    min-width: 0;
}

[dir="rtl"] .txn-strip-wrap {
    flex-direction: row-reverse;
    padding-left: 0;
    padding-right: 20px;
}

/* ---- The opened panel, full width under the strip ---- */
.txn-panels {
    /* Adds nothing while every panel is closed */
    margin: 0;
    /* Lined up with the first TILE, not with the strip wrapper. The wrapper is
       a flex row of [prev 34px][gap 8px][strip], and the strip adds 2px of its
       own padding, so a tile starts 20 + 34 + 8 + 2 = 64px in. Written as the
       sum so it stays checkable if any of those three change. */
    padding-left: calc(20px + 34px + 8px + 2px);
    /* And stopping where the last tile does: the strip gives up the far arrow's
       width plus the gap before it, so matching that is what keeps the open
       panel flush with the row above it. */
    padding-right: calc(34px + 8px + 2px);
    width: 100%;
}

[dir="rtl"] .txn-panels {
    padding-left: calc(34px + 8px + 2px);
    padding-right: calc(20px + 34px + 8px + 2px);
}

.txn-panels .mobile_box_row {
    background: #ffffff;
    border: 1px solid var(--bs-line);
    /* Ties the open panel to the tile that opened it. !important because
       .mobile_box_row earlier in this sheet sets the border SHORTHAND with
       !important, and that beats a longhand without one however much more
       specific this selector is - which is why the blue edge went missing. */
    border-top: 3px solid var(--bs-blue) !important;
    border-radius: var(--bs-radius);
    /* Stated explicitly rather than relying on bootstrap.min.css's
       *{box-sizing:border-box}, since this row carries padding and the tiles
       inside it are percentage-width floats. */
    box-sizing: border-box;
    /* Clear of the strip above it */
    margin: 18px 0 14px !important;
    max-width: 100%;
    /* hidden, not visible: .mobile-box is a float (mystyleCalibri.css:502) and
       this is what contains it - a BFC. With visible the floats escape and the
       row collapses to its padding. Nothing real is clipped either way, since
       the grid is percentages: *{box-sizing:border-box} makes eight 12.5%
       tiles exactly 100%, and the ninth and tenth wrap to a second row, which
       is what was wanted in place of the bar. */
    overflow-x: hidden;
    /* The top band is where the close button sits. Without it the button
       would land on the first row of tiles - their count badges are in that
       same corner - so the room is made rather than taken. */
    padding: 44px 14px 14px !important;
    /* What the close button is positioned against */
    position: relative;
}

/* ---- Closing the open module ----
   The tiles are an accordion: one open at a time, and clicking the tile that
   is already open does nothing, so this is the only way back to a dashboard
   with nothing expanded. */
.txn-close {
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--bs-line);
    border-radius: 50%;
    color: var(--bs-muted);
    cursor: pointer;
    display: flex;
    height: 28px;
    justify-content: center;
    left: auto;
    padding: 0;
    position: absolute;
    right: 12px;
    top: 9px;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    width: 28px;
    z-index: 2;
}

[dir="rtl"] .txn-close {
    left: 12px;
    right: auto;
}

.txn-close svg {
    height: 14px;
    width: 14px;
}

.txn-close:hover,
.txn-close:focus {
    background: var(--bs-blue);
    border-color: var(--bs-blue);
    color: #ffffff;
    outline: none;
}

/* Belt and braces, so containment does not depend on the overflow value. */
.txn-panels .mobile_box_row::after {
    clear: both;
    content: "";
    display: table;
}

/* .mobile_box_row.slider dates from when each panel sat directly below its own
   header, and transaction-tiles.js has since moved the panels into .txn-panels.
   Its border-top:0 !important was overriding the blue top border, and the
   negative top margin and squared corners belong to that old merged look.
   Reverted here only - the rule itself is left alone for any other caller. */
.txn-panels .mobile_box_row.slider {
    border-radius: var(--bs-radius);
    border-top: 3px solid var(--bs-blue) !important;
    margin-top: 18px;
}

/* Its own children were sized for the old full-width row */
.txn-panels .mobile_box_row > .mobile-top {
    box-sizing: border-box;
    max-width: 100%;
}

/* ---- Booking Details clear of the header ---- */
#TransactionCounts > div:first-child .hMdttlshead {
    margin-top: 18px;
}

/* ==========================================================================
   END BOOKSULTAN MODULE STRIP
   ========================================================================== */

/* ==========================================================================
   LOGIN FIELD
   Sampled from the FareKey admin reference - #f26d82 at the bloom, #d4293f
   through the middle, #b5091f at the edges. Declared whole rather than
   through --bs-login-glow / --bs-login-deep, because the middle stop
   admin-login.css uses is --bs-nav-bg, which also paints the nav rail: a red
   there would repaint the rail, and the rail's dark would band the gradient.
   The ellipse and its 20% 10% origin are that file's own; only colour differs.
   ========================================================================== */
body:has(.bs-login) {
    background: radial-gradient(1200px 600px at 20% 10%,
        #f26d82 0%,
        #e3475d 18%,
        #d4293f 42%,
        #c00d24 70%,
        #b5091f 100%) !important;
}

/* ---------- Login skyline ----------
   The brand's city line-art across the foot of the field, recoloured white
   (the supplied art is near-black red, which disappears into the gradient)
   and held low so it reads as a watermark.

   Fixed rather than in flow: the login body is a flex container, so a
   pseudo-element left in flow would become a flex item and shove the card
   sideways - and the band should stay on the bottom edge when the OTP step
   makes the form taller. */
body:has(.bs-login)::after {
    background: url("/Content/images/Farekey_images/farekey_skyline.png")
        no-repeat center bottom / 100% auto;
    bottom: 0;
    content: "";
    height: min(38vh, 370px);
    left: 0;
    opacity: .32;
    pointer-events: none;
    position: fixed;
    right: 0;
    z-index: 0;
}

/* Card, brand panel and footer sit above the art. */
body:has(.bs-login) .bs-login {
    position: relative;
    z-index: 1;
}

@media (max-width: 980px) {
    /* Less room, and the stacked card covers more of it. */
    body:has(.bs-login)::after {
        height: min(26vh, 200px);
        opacity: .22;
    }
}