/* Sign In (Index.html) */
.form_box {
  max-width: 600px;
  display: grid;
  place-items: center;
  height: 100vh;
}

/* Sign In Ends */


/* Hide scrollbar but keep scrolling */
html, body { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }

/* General */
body {
  background: #D9D9D9;
}

.colored {
  color: #1983C6;
}

.make_small {
  font-size: 14px;
}

/* General Ends */


/* Dashboard Section */
.navbar,
.second_nav {
  background: #1983C6;
}

.navbar ul li {
  padding: 0px 10px;
  margin: 0px 5px;
}

.navbar ul li:hover {
  background: #d9d9d97e;
  border-radius: 50px;
}

.toggler {
  background: #d9d9d97e;
  border-radius: 50px;
}

.navbar ul li a {
  font-size: 0.85rem !important;
}

.cover {
  margin-top: 0px !important;
}

.travel_search {
  max-width: 300px;
}

/* Dashboard Ends */


/* Uploaded Document */
.span {
  font-size: 10px;
}

.control {
  top: 60px;
}

.upload_input,
.upload_input:focus {
  border: none !important;
  outline: none !important;
}

.select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: '';
}

/* ── Global select style ───────────────────────────────────────────────────
   Applies to every <select> and Bootstrap .form-select across all templates.
   Exceptions: add class "select-raw" to opt a specific select out.
─────────────────────────────────────────────────────────────────────────── */
select:not(.select-raw),
.form-select:not(.select-raw) {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  display: block;
  width: 100%;
  height: auto;

  padding: 0.55rem 2.6rem 0.55rem 0.9rem !important;
  font-size: 0.88rem !important;
  font-weight: 500;
  line-height: 1.5;
  color: #1E293B !important;
  background-color: #ffffff !important;

  /* Custom chevron arrow */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230D1B3E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.85rem center !important;
  background-size: 14px 14px !important;

  border: 1.5px solid #D1D5DB !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer;

  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

select:not(.select-raw):hover,
.form-select:not(.select-raw):hover {
  border-color: #94A3B8 !important;
}

select:not(.select-raw):focus,
.form-select:not(.select-raw):focus {
  border-color: #94A3B8 !important;
  box-shadow: none !important;
  outline: none !important;
}

select:not(.select-raw):disabled,
.form-select:not(.select-raw):disabled {
  background-color: #F8FAFC !important;
  color: #94A3B8 !important;
  border-color: #E2E8F0 !important;
  cursor: not-allowed;
}

/* lg variant — match form-select-lg sizing */
.form-select-lg:not(.select-raw),
select.form-select-lg:not(.select-raw) {
  padding: 0.7rem 2.8rem 0.7rem 1rem !important;
  font-size: 0.95rem !important;
  border-radius: 8px !important;
}

.active-edit,
.active-edit:focus {
  border: 2px solid #007bff3a !important;
  outline: 2px solid #007bff3a !important;
  border-radius: 10px;
}

/* Uploaded Document Ends */


/* Profile Document */

.team_pics_cover {
  position: relative;
  display: grid;
  place-items: center;
}

.team_pic_edit {
  background: #00000073;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  max-width: 200px;
  display: grid;
  place-items: center;
  font-size: 30px;
  border-radius: 50%;
  color: white;
  display: none;
}

.team_pics_cover:hover .team_pic_edit {
  display: grid;
}

.assigned_search {
  max-width: 220px;
}

.agency_num {
  font-size: 15px;
}


/* ── Global form element styles ────────────────────────────────────────────
   Applies to all text inputs, textareas, checkboxes, radios across templates.
   Exceptions: add class "input-raw" to opt a specific element out.
─────────────────────────────────────────────────────────────────────────── */

/* Text inputs & textarea */
input[type="text"]:not(.input-raw),
input[type="email"]:not(.input-raw),
input[type="password"]:not(.input-raw),
input[type="date"]:not(.input-raw),
input[type="datetime-local"]:not(.input-raw),
input[type="time"]:not(.input-raw),
input[type="number"]:not(.input-raw),
input[type="tel"]:not(.input-raw),
input[type="search"]:not(.input-raw),
input[type="url"]:not(.input-raw),
textarea:not(.input-raw),
.form-control:not(.input-raw) {
  display: block;
  width: 100%;
  padding: 0.55rem 0.9rem !important;
  font-size: 0.88rem !important;
  font-weight: 500;
  line-height: 1.5;
  color: #1E293B !important;
  background-color: #ffffff !important;
  border: 1.5px solid #D1D5DB !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="text"]:not(.input-raw):hover,
input[type="email"]:not(.input-raw):hover,
input[type="password"]:not(.input-raw):hover,
input[type="date"]:not(.input-raw):hover,
input[type="datetime-local"]:not(.input-raw):hover,
input[type="time"]:not(.input-raw):hover,
input[type="number"]:not(.input-raw):hover,
input[type="tel"]:not(.input-raw):hover,
input[type="search"]:not(.input-raw):hover,
input[type="url"]:not(.input-raw):hover,
textarea:not(.input-raw):hover,
.form-control:not(.input-raw):hover {
  border-color: #94A3B8 !important;
}

input[type="text"]:not(.input-raw):focus,
input[type="email"]:not(.input-raw):focus,
input[type="password"]:not(.input-raw):focus,
input[type="date"]:not(.input-raw):focus,
input[type="datetime-local"]:not(.input-raw):focus,
input[type="time"]:not(.input-raw):focus,
input[type="number"]:not(.input-raw):focus,
input[type="tel"]:not(.input-raw):focus,
input[type="search"]:not(.input-raw):focus,
input[type="url"]:not(.input-raw):focus,
textarea:not(.input-raw):focus,
.form-control:not(.input-raw):focus {
  border-color: #94A3B8 !important;
  box-shadow: none !important;
  outline: none !important;
}

input[type="text"]:not(.input-raw):disabled,
input[type="email"]:not(.input-raw):disabled,
input[type="password"]:not(.input-raw):disabled,
input[type="date"]:not(.input-raw):disabled,
input[type="datetime-local"]:not(.input-raw):disabled,
input[type="time"]:not(.input-raw):disabled,
input[type="number"]:not(.input-raw):disabled,
input[type="tel"]:not(.input-raw):disabled,
input[type="search"]:not(.input-raw):disabled,
input[type="url"]:not(.input-raw):disabled,
textarea:not(.input-raw):disabled,
.form-control:not(.input-raw):disabled {
  background-color: #F8FAFC !important;
  color: #94A3B8 !important;
  border-color: #E2E8F0 !important;
  cursor: not-allowed;
}

textarea:not(.input-raw) {
  resize: vertical;
  min-height: 90px;
}

/* lg variant */
.form-control-lg:not(.input-raw) {
  padding: 0.7rem 1rem !important;
  font-size: 0.95rem !important;
  border-radius: 8px !important;
}

/* sm variant */
.form-control-sm:not(.input-raw) {
  padding: 0.35rem 0.7rem !important;
  font-size: 0.8rem !important;
  border-radius: 6px !important;
}

/* Placeholder color */
input:not(.input-raw)::placeholder,
textarea:not(.input-raw)::placeholder,
.form-control:not(.input-raw)::placeholder {
  color: #94A3B8 !important;
  opacity: 1;
}


/* ── Checkbox & Radio ──────────────────────────────────────────────────── */
input[type="checkbox"]:not(.input-raw),
input[type="radio"]:not(.input-raw),
.form-check-input:not(.input-raw) {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 17px !important;
  height: 17px !important;
  min-width: 17px;
  border: 2px solid #D1D5DB !important;
  background-color: #ffffff !important;
  cursor: pointer;
  vertical-align: middle;
  position: relative;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  flex-shrink: 0;
}

input[type="checkbox"]:not(.input-raw),
.form-check-input[type="checkbox"]:not(.input-raw) {
  border-radius: 5px !important;
}

input[type="radio"]:not(.input-raw),
.form-check-input[type="radio"]:not(.input-raw) {
  border-radius: 50% !important;
}

input[type="checkbox"]:not(.input-raw):hover,
input[type="radio"]:not(.input-raw):hover,
.form-check-input:not(.input-raw):hover {
  border-color: #F97316 !important;
}

input[type="checkbox"]:not(.input-raw):checked,
.form-check-input[type="checkbox"]:not(.input-raw):checked {
  background-color: #F97316 !important;
  border-color: #F97316 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8l3.5 3.5L13 4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 11px 11px !important;
}

input[type="radio"]:not(.input-raw):checked,
.form-check-input[type="radio"]:not(.input-raw):checked {
  background-color: #F97316 !important;
  border-color: #F97316 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3.5' fill='%23ffffff'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
}

input[type="checkbox"]:not(.input-raw):focus,
input[type="radio"]:not(.input-raw):focus,
.form-check-input:not(.input-raw):focus {
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15) !important;
  outline: none !important;
  border-color: #F97316 !important;
}


/* ── Form labels ───────────────────────────────────────────────────────── */
.form-label,
label.form-label {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin-bottom: 0.3rem !important;
  letter-spacing: 0.01em;
}


/* ── Input group addons ────────────────────────────────────────────────── */
.input-group-text {
  background-color: #F8FAFC !important;
  border: 1.5px solid #D1D5DB !important;
  color: #64748B !important;
  font-size: 0.88rem !important;
  border-radius: 8px !important;
}


/* ── Phone group: constrain dial-code select2 container width ─────────────
   Ensures the dial code select never expands to full flex width, keeping
   the phone number input visible beside it.
─────────────────────────────────────────────────────────────────────────── */
.su-phone-group .select2-container,
.su-phone-group .select2-container--default,
.tm-phone-group .select2-container,
.tm-phone-group .select2-container--default,
.mb-phone-group .select2-container,
.mb-phone-group .select2-container--default {
    flex: 0 0 190px !important;
    width: 190px !important;
    max-width: 190px !important;
    min-width: 0;
}

/* ── Select2 global skin ───────────────────────────────────────────────────
   Matches the clean pax-field style from flight_booking — applied sitewide.
─────────────────────────────────────────────────────────────────────────── */
.select2-container--default .select2-selection--single {
  height: 42px !important;
  border: 1.5px solid #D1D5DB !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 12px !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: #F97316 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.12) !important;
  outline: none !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  font-size: 0.88rem !important;
  font-weight: 500;
  color: #1E293B !important;
  line-height: 42px !important;
  padding: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #94A3B8 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 40px !important;
  right: 10px !important;
  width: 20px !important;
  top: 0 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #64748B transparent transparent transparent !important;
  border-width: 5px 4px 0 4px !important;
  top: 50% !important;
  margin-top: -2px !important;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent #F97316 transparent !important;
  border-width: 0 4px 5px 4px !important;
}
.select2-dropdown {
  border: 1.5px solid #D1D5DB !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(13,27,62,0.12) !important;
  overflow: hidden;
  margin-top: 2px;
}
.select2-container--default .select2-search--dropdown {
  padding: 8px !important;
  border-bottom: 1px solid #F1F5F9 !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1.5px solid #D1D5DB !important;
  border-radius: 6px !important;
  padding: 7px 10px !important;
  font-size: 0.85rem !important;
  color: #1E293B !important;
  background: #F8FAFC !important;
  width: 100% !important;
  outline: none !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: #F97316 !important;
  background: #fff !important;
}
.select2-results__options {
  max-height: 220px !important;
  overflow-y: auto !important;
  padding: 4px 0 !important;
}
.select2-container--default .select2-results__option {
  font-size: 0.85rem !important;
  padding: 8px 14px !important;
  color: #374151 !important;
  background: #fff !important;
  transition: background 0.1s;
}
.select2-container--default .select2-results__option--highlighted {
  background: #FFF7ED !important;
  color: #C2410C !important;
}
.select2-container--default .select2-results__option--selected {
  background: #FFF7ED !important;
  color: #C2410C !important;
  font-weight: 600 !important;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selected {
  background: #FFEDD5 !important;
}
.select2-container { width: 100% !important; }

/* ── Rate type pill badges (Negotiated / Promotional / Corporate) ── */
.rate-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.4;
}
.rate-badge--negotiated {
  background: #FFF7ED;
  color: #C2410C;
  border: 1px solid #FED7AA;
}
.rate-badge--promotional {
  background: #F0FDF4;
  color: #15803D;
  border: 1px solid #BBF7D0;
}
.rate-badge--corporate {
  background: #EFF6FF;
  color: #1D4ED8;
  border: 1px solid #BFDBFE;
}

/* ── Always center button content (covers full-width flex buttons on mobile) ── */
.btn {
  justify-content: center;
  text-align: center;
}

/* ── Multi-city flight "Remove" button ───────────────────────────── */
button.remove-flight {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  background: #FEE2E2;
  color: #DC2626;
  border: 1px solid #FECACA;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
button.remove-flight:hover {
  background: #FECACA;
  border-color: #EF4444;
  color: #B91C1C;
}

/* ── Unified pagination — windowed numbered, use .tk-pagination everywhere ── */
.tk-pagination { display:flex; align-items:center; justify-content:center; gap:8px; padding:16px 20px; flex-wrap:wrap; }
.tk-pag-btn { min-width:40px; height:40px; padding:0 10px; border-radius:12px; border:1.5px solid #e2e8f0; background:#fff; color:#0D1B3E; display:inline-flex; align-items:center; justify-content:center; font-size:.9rem; font-weight:700; line-height:1; text-decoration:none; transition:all .15s; cursor:pointer; }
.tk-pag-btn:hover { border-color:#F97316; color:#F97316; }
.tk-pag-btn.active { background:#F97316; border-color:#F97316; color:#fff; box-shadow:0 4px 12px -2px rgba(249,115,22,.45); }
.tk-pag-btn.active:hover { color:#fff; }
.tk-pag-btn.disabled, button.tk-pag-btn:disabled, .tk-pag-btn[disabled] { opacity:.4; cursor:not-allowed; pointer-events:none; }
.tk-pag-ellipsis { min-width:24px; text-align:center; color:#94a3b8; font-weight:700; user-select:none; }

/* ═══ Global modal standard — always centered, scroll body only when tall ═══
   Replicates .modal-dialog-centered + .modal-dialog-scrollable for EVERY modal
   (so all ~229 modals are consistent) without touching per-modal markup and
   without clipping decorative overflow on .modal-content.
   Fullscreen variants excluded: modal-fullscreen, modal-fullscreen-sm-down
   (the only two found in this codebase via grep). ════════════════════════════ */

/* 1. Always vertically centre the dialog */
.modal-dialog:not(.modal-fullscreen):not([class*="modal-fullscreen-"]) {
  display: flex;
  align-items: center;
  min-height: calc(100% - 1rem);
}
@media (min-width: 576px) {
  .modal-dialog:not(.modal-fullscreen):not([class*="modal-fullscreen-"]) {
    min-height: calc(100% - 3.5rem);
  }
}

/* 2. Cap modal-content height so it never overflows the viewport.
   No overflow property here — preserves floating icon badges on
   #messageModal (.tyktt-alert-icon-wrap) and #tykConfirmModal
   (.tyk-confirm-icon-wrap) which are absolutely positioned above
   .modal-content and must not be clipped. */
.modal-dialog:not(.modal-fullscreen):not([class*="modal-fullscreen-"]) > .modal-content {
  width: 100%;
  max-height: calc(100vh - 1rem);
}
@media (min-width: 576px) {
  .modal-dialog:not(.modal-fullscreen):not([class*="modal-fullscreen-"]) > .modal-content {
    max-height: calc(100vh - 3.5rem);
  }
}

/* 3. Scroll lives on .modal-body only — header and footer stay fixed.
   min-height:0 lets the flex child shrink below its content size so the
   cap on .modal-content can actually take effect.
   Short modals: body never hits the cap → no scrollbar, no forced height.
   Tall modals: body grows until cap → scrollbar appears, header/footer fixed.
   Helper modals (#messageModal, #tykConfirmModal, #tykPromptModal) have no
   .modal-body element, so this rule is a harmless no-op for them. */
.modal-dialog:not(.modal-fullscreen):not([class*="modal-fullscreen-"]) > .modal-content > .modal-body {
  overflow-y: auto;
  min-height: 0;
}

/* 4. Modals that have NO standard .modal-body (custom body wrapper, or content
   straight in .modal-content): scroll the content itself when it's capped,
   so long content is reachable. Excludes the short decorative cards whose
   icon badges intentionally overflow (they never need to scroll).
   !important is required to override per-modal `overflow:hidden` declarations
   (including Bootstrap's `.overflow-hidden` utility which uses `!important`,
   and ID-scoped card rules such as `#frequentFlyer .pmd-content`); only the
   vertical axis is overridden so `overflow-x` (horizontal clipping, rounded
   corners) is preserved as-is from each modal's own rules. */
.modal-dialog:not(.modal-fullscreen):not([class*="modal-fullscreen-"]) > .modal-content:not(:has(> .modal-body)):not(.tyktt-alert-card):not(.tyk-confirm-card) {
  overflow-y: auto !important;
}

@media (max-width:640px){ .tk-pagination{ gap:6px; padding:12px; } .tk-pag-btn{ min-width:36px; height:36px; font-size:.82rem; } }