/* ==========================================================================
   COMMON ADMIN THEME - theme_version_04
   yabeela - blue #153e90 primary, rose #c34676 CTA

   Built from Content/css/Booksultan_css/ with the palette re-pointed.
   The palette of https://www.yabeelasafra.com, read off that
   site's own ThemeYabeela stylesheets: #153e90 chrome blue, #c34676 rose CTA,
   #373e43 ink, #eff3f8 background. The blue carries the chrome and the rose
   carries the buttons and the active markers, as on the site itself.

   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_04 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:#153e90;}




.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:#153e90}




a.paginate_button.current,.has-error .form-control{
    border-color:#153e90 !important
}
.textBox1:focus,.textBox2:focus,.textBox4:focus .textArea:focus,.new-row:focus,.inline_text_input:focus{
    outline:1px solid #153e90 !important
}
.pagination>li>a,.pagination>li>span{
    border-bottom:2px solid #153e90 !important
}
.form-group2 .alert-success,.form-group .alert-success,.input-group .alert-success{
    border-top:5px solid #153e90 !important
}
.notifiactions ul li:hover{
    border-left:5px solid #153e90 !important
}
.breadcrumb li.completed a:after{
    border-left:30px solid #153e90 !important
}
.memb_sel_btn{
    border:1px solid #153e90 !important
}
.name_search_go_btn{
    border:1px solid #153e90 !important
}
.breadcrumb li.completed a::after{
    border-left:30px solid #153e90 !important
}
#main_cat_menu li a.active_menu {
    background-color: #c34676;
}
.vBtn, .eBtn, .dBtn, .uBtn, .genBtn, .dltBtn {
    color: #fff !important;
}
.pagination>.active>a, .pagination>.active>a:hover{
	background-color: #153e90;
    border-color: #153e90;
    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 #153e90;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    background: #153e90 none repeat scroll 0 0 !important;
    color: #ffffff !important; 
}
.btn-primary {
    color: #fff !important;
    background-color: #153e90;
    border-color: #153e90 !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 #153e90!important
}
.ui-slider-horizontal .ui-slider-handle:hover{
    border:1px solid #153e90!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:#153e90 !important;
}
.farebrkuphd{
    background-color:#153e90;
}
.ui-slider-horizontal .ui-slider-handle{
    background:#153e90 !important;  
    border: 1px solid #153e90 !important;
}
span.alertmsgs {
    color: #f00;
}
.price_theme_color{ 
    color: #153e90; 
}
.price_total_hilight{ 
    color: #153e90; 
}
.details_block .title_label{ 
    color: #4e4e4e; 
}
.toggle_details_links li a{ 
    color: #4e4e4e; 
}
.hotel_less_detail h5{ 
    color:#fff; 
}
#popup_title{ 
    background: #153e90;
}
.clearing{ 
    border: 1px solid #153e90; 
}
.clearing:after{ 
    color: #153e90;
}
.save_edit{ 
    background:#153e90;
}
.progress_bg .prog_page .way_load h4{ 
    color:#153e90;
}
.page_heading{ 
    color:#153e90 !important;
}
.tranfrcnclpolicy{ 
    color:#153e90;
}
button.confirmbutton:hover, .confirmbutton_wht:hover {
    background-color: #153e90;
}
button.confirmbutton, .confirmbutton_wht{
    background-color: #153e90;
}
#popup_container{ 
    border: solid 3px #153e90 !important; 
}
#popup_title{
    background: #153e90 !important;

}
button.confirmbutton, .confirmbutton_wht{
    background: #153e90 !important;
}
.map_pagination .pagination > li > a{ 
    margin-bottom:5px; 
    color:#153e90;
}
.sportsCollapse span.glyphicon{ 
    color:#fff;
}
.ticketCatBox span.glyphicon{ 
    color:#fff;
}
.activityInner .breadcrumb li.active a { 
    background: #153e90;
}
.activityInner .breadcrumb li.active a:after {
    border-left: 30px solid #153e90;
}
.pagination>li>a{ 
    color: #153e90;
}
.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:#153e90; 
    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:#153e90; 
    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:#153e90; 
    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: #c34676;
}
.material-scrolltop{
    background-color: #c34676;
}
.material-scrolltop:hover{
    background-color: #c34676;
}
.packNewMtop {
    margin-top: 22px;
}

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

.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: #c34676 !important;
}
.vBtn:hover, .eBtn:hover, .dBtn:hover, .uBtn:hover, .genBtn:hover, .dltBtn:hover {
    color: #fff !important;
    background: #c34676 !important;
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    background: #c34676 !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: #c34676 !important;
}
.color_theme_2 {
    color: #c34676;
}
.common_btn_light {
    color: #c34676;
    border: 1px solid #c34676;
}
.addament_btn {
    background: #c34676;
}
.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: #153e90;
    --bs-blue-dark: #0f2e6b;
    --bs-blue-hover: #12357e;
    --bs-blue-soft: #b3c9e0;
    --bs-blue-tint: #eff3f8;
    --bs-blue-tint2: #f0f7fb;
    --bs-pink: #c34676;
    --bs-nav-bg: #0f2e6b;
    --bs-pink-hover: #a93a64;
    --bs-ink: #373e43;
    --bs-muted: #485467;
    --bs-bg: #eff3f8;
    --bs-line: #dee2e6;
    --bs-line-soft: #ecf0f4;
    --bs-radius: 10px;
    --bs-radius-sm: 6px;
    --bs-shadow: 0 1px 2px rgba(55, 62, 67, .08);
    --bs-shadow-md: 0 4px 14px rgba(55, 62, 67, .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 ---------- */
#navmenu,
.bg-primary {
    background-color: var(--bs-blue) !important;
    background-image: linear-gradient(180deg, #1b4aa8 0%, #153e90 100%) !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-pink) !important;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18);
}

#mainmenu a:hover { background: var(--bs-blue-hover) !important; }

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

/* ---------- Control Panel sidebar (full redesign) ----------
   Booksultan brand blue: #153e90 at the top fading into #0f2e6b, both taken
   from the live booksultan.com stylesheet. The header block is left solid
   #153e90 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, var(--bs-blue) 0%, var(--bs-nav-bg) 100%) !important;
}

#navmenu .control-mob {
    background: var(--bs-blue) !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;
    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 ---- */
#secondmenudiv #secondmenu,
#secondmenudiv #secondmenu ul {
    padding: 6px 8px !important;
    margin: 0;
}

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

/* ---- Level 1 ---- */
#secondmenudiv #secondmenu li span.menu-item {
    border: 0 !important;
    border-radius: var(--bs-radius-sm);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.3;
    padding: 11px 38px 11px 12px;
    position: relative;
    transition: background .15s ease, color .15s ease;
}

#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: 16px;
    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: var(--bs-blue) !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: #ecf0f4 !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: #e5ebf3 !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(21, 62, 144, .15) !important;
    outline: none !important;
}

.has-error .form-control { box-shadow: 0 0 0 3px rgba(195, 70, 118, .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(55, 62, 67, .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);
}

/* Logout carries the theme's accent, as the one destructive action up here */
.menu-bar ul li > a#logout {
    color: var(--bs-pink) !important;
}

.menu-bar ul li > a#logout:hover {
    background: rgba(195, 70, 118, .10) !important;
    color: var(--bs-pink-hover) !important;
}

/* 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='%23153e90'/%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(55, 62, 67, .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(55, 62, 67, .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(21, 62, 144, .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='%23d4ddec' stroke-width='6'/%3E%3Cpath d='M22 4a18 18 0 0 1 18 18' fill='none' stroke='%23153e90' 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;
}

/* 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='%23485467' 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(21, 62, 144, .15) !important;
    outline: none !important;
}

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

.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(21, 62, 144, .15) !important;
}

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

/* Tighten the run-up to the "Select any option" hint.
   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 above the hint. 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 and followed by a .no-select hint. */
.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;
}

.hMbookingdetailsfull .no-select {
    margin-top: 0;
    padding-top: 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(21, 62, 144, .15) !important;
    outline: none !important;
}

.form-group2 input:disabled,
.form-group2 select:disabled {
    background: #f5f7fa !important;
    color: #8f97a0 !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: #bac2cb !important; }

.ui-datepicker .ui-state-disabled,
.ui-datepicker .ui-state-disabled span {
    color: #cacaca !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='%23485467' 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(21, 62, 144, .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; }

/* ---- "Select any option" empty state ----
   .no-select is shown when no filter has been chosen yet. It was sitting
   bottom-left as a loose line of text; centring it reads as the empty state
   it actually is, in both this section and Booking Details. */
.no-select {
    color: var(--bs-muted);
    font-size: 13px;
    margin: 0;
    padding: 8px 16px 14px;
    text-align: center;
    width: 100%;
}

/* ==========================================================================
   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(21, 62, 144, .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;
}

/* 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;
    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(21, 62, 144, .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 #c34676 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, #1b4aa8 0%, #153e90 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 !important;
    /* Chrome 121+ ignores ::-webkit-scrollbar entirely once scrollbar-width is
       set, which is why the native bar with arrow buttons showed through. The
       standard properties drive it now; the -webkit block below is only a
       fallback for older engines that do not support them. */
    scrollbar-color: var(--bs-blue-dark) rgba(255, 255, 255, .20);
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

/* Fallback for engines without scrollbar-color */
.tabbable-line > .nav-tabs::-webkit-scrollbar {
    height: 6px;
}

.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-radius: 999px;
}

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

.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;
}

/* ---- 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(21, 62, 144, .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(21, 62, 144, .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='%23485467' 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(21, 62, 144, .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:#c34676; 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;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--bs-line) !important;
    border-radius: var(--bs-radius-sm) !important;
    font-family: var(--bs-font) !important;
    font-size: 13px !important;
    padding: 7px 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;
}

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

/* ---------- 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='%23485467' 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
   ========================================================================== */


/* ---------- Login page: the site's blue ground ----------
   The shared Content/css/admin-login.css paints the login field with
   radial-gradient(var(--bs-login-glow, #12305f), var(--bs-nav-bg, #0a1e4e),
   var(--bs-login-deep, #081734)). It is linked BEFORE this sheet, and only its
   middle stop comes from a token this theme sets, so without the two values
   below the outer stops stay the original navy. The deep stop is the site's
   own dark indigo; the glow is the primary lifted. */

:root {
    --bs-login-glow: #1b4aa8;
    --bs-login-deep: #12154b;
}

/* ==========================================================================
   END COMMON THEME v04 LOGIN
   ========================================================================== */


/* ---------- Buttons: the site rose ----------
   --bs-blue drives the buttons in the source sheet, which would make them the
   chrome blue - but on yabeelasafra the blue is the chrome and the rose is
   what you click: .theme_btnStyle, .theme_button and .formbtn_gradient, the
   site's three button classes, are all #c34676, and the active tab is
   underlined in it. Listed explicitly because the admin has no single button
   class - each area ships its own. */

.btn-primary,
.searchBtn1,
.save_btn,
.save_edit,
.search_btn_big,
.addBtns,
.default_blue_btns,
.meterial_modal_save,
.modal .modal-footer .btn-primary,
#inputLogon,
#inputOTPLogon,
#editHotelDetails,
#editCarDetails,
#editSportsDetails,
#pageCreationForm .search_btn,
#pageCreationForm .default_blue_btns {
    background: #c34676 !important;
    background-color: #c34676 !important;
    border-color: #c34676 !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.searchBtn1:hover,
.save_btn:hover,
.save_edit:hover,
.search_btn_big:hover,
.addBtns:hover,
.default_blue_btns:hover,
.meterial_modal_save:hover,
.modal .modal-footer .btn-primary:hover,
#inputLogon:hover,
#inputOTPLogon:hover,
#editHotelDetails:hover,
#editCarDetails:hover,
#editSportsDetails:hover,
#pageCreationForm .search_btn:hover,
#pageCreationForm .default_blue_btns:hover {
    background: #a93a64 !important;
    background-color: #a93a64 !important;
    border-color: #a93a64 !important;
}

/* The login button keeps its lifted shadow, re-tinted to the rose */
.bs-login .log_inner #inputLogon,
.bs-login .log_inner #inputOTPLogon {
    box-shadow: 0 8px 20px rgba(195, 70, 118, .32) !important;
}

/* Secondary buttons stay neutral - they are not calls to action */
.meterial_modal_close,
.modal .modal-footer .btn-default,
#cancelEditHotelDetails,
#cancelEditCarDetails,
#cancelEditSportsDetails {
    background: #fff !important;
    background-color: #fff !important;
    border-color: #dee2e6 !important;
    color: #373e43 !important;
}

/* ==========================================================================
   END COMMON THEME v04 BUTTONS
   ========================================================================== */


/* ---------- Type: the site's Poppins ----------
   yabeelasafra serves Poppins from its own /ThemeYabeela/fonts, with DroidKufi
   for Arabic and AvenirLTStd behind it. The admin ships none of them, and
   hotlinking another host's fonts is not something a stylesheet should do, so
   Poppins is only PREFERRED here: where it is installed or added later the
   admin matches the site, and everywhere else this falls through to the stack
   the sheet already used. Drop a self-hosted @font-face above this to make it
   unconditional. */

:root {
    --bs-font: Poppins, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ==========================================================================
   END COMMON THEME v04 TYPE
   ========================================================================== */