/* B2B MidOffice static demo ? mirrors bo-portal App.scss tokens */
:root {
  --mo-body-bg: #e3e0e6;
  --mo-body-color: #3f1e59;
  --mo-primary: #4d3264;
  --mo-primary-hover: #7d5f97;
  --mo-secondary: #969ba5;
  --mo-green2: #e4f2db;
  --mo-scrollbar: #5c387e;
  --mo-scrollbar-hover: #784d9f;
  --mo-font: 'Roboto', sans-serif;

  /* bo-portal: $font-size-base: 0.875rem ? Bootstrap scale */
  --mo-fs-base: 0.875rem; /* 14px */
  --mo-fs-sm: 0.765625rem; /* $font-size-sm = base * 0.875 ? 12.25px */
  --mo-fs-lg: 1.09375rem; /* $font-size-lg = base * 1.25 ? 17.5px */

  /* Make CDN Bootstrap use the same base as compiled App.scss */
  --bs-body-font-family: 'Roboto', sans-serif;
  --bs-body-font-size: var(--mo-fs-base);
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #3f1e59;
  --bs-heading-font-weight: 500;
  --bs-btn-font-family: 'Roboto', sans-serif;

  /* Override Bootstrap blue focus/active (keeps purple after click) */
  --bs-primary: #4d3264;
  --bs-primary-rgb: 77, 50, 100;
  --bs-link-color: #4d3264;
  --bs-link-hover-color: #7d5f97;
  --bs-focus-ring-color: rgba(77, 50, 100, 0.25);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* MidOffice: $font-size-base 0.875rem on default 16px root ? 14px body */
html {
  font-size: 16px;
  /* Reserve scrollbar space so Financial dropdown open/close doesn't shift layout */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  font-family: var(--mo-font);
  font-size: var(--mo-fs-base);
  font-weight: 400;
  line-height: 1.5;
  background: var(--mo-body-bg);
  color: var(--mo-body-color);
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Buttons ? CDN Bootstrap defaults to 1rem; original uses $font-size-base */
.btn {
  --bs-btn-font-size: var(--mo-fs-base);
  --bs-btn-font-weight: 400;
  font-family: var(--mo-font);
  font-size: var(--mo-fs-base);
  font-weight: 400;
  line-height: 1.5;
}

.btn-sm {
  --bs-btn-font-size: var(--mo-fs-sm);
  font-size: var(--mo-fs-sm);
  font-weight: 400;
}

.btn-lg {
  --bs-btn-font-size: var(--mo-fs-lg);
  font-size: var(--mo-fs-lg);
  font-weight: 400;
}

/* Match App.scss $container-max-widths ?
   sm/md/lg/xl stay Bootstrap defaults; xxl = 1400px (not CDN 1320).
   Do NOT set max-width:1400 on .pageContainer outside this query ?
   that overrides xl:1140 and removes the side gutters (yellow space). */
@media (min-width: 1400px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl,
  .pageContainer.container {
    max-width: 1400px;
  }
}

a {
  text-decoration: none;
  color: var(--mo-primary);
}

a:hover {
  color: var(--mo-primary-hover);
}

::-webkit-scrollbar {
  height: 8px;
  width: 12px;
}
::-webkit-scrollbar-track {
  background: #f8f9fa;
}
::-webkit-scrollbar-thumb {
  background: var(--mo-scrollbar);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--mo-scrollbar-hover);
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--mo-primary);
  --bs-btn-border-color: var(--mo-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #3f2754;
  --bs-btn-hover-border-color: #3f2754;
  --bs-btn-focus-shadow-rgb: 77, 50, 100;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #3f2754;
  --bs-btn-active-border-color: #3f2754;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--mo-primary);
  --bs-btn-disabled-border-color: var(--mo-primary);
}

.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary:active,
.btn-primary.active,
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary {
  background-color: #3f2754 !important;
  border-color: #3f2754 !important;
  color: #fff !important;
  box-shadow: 0 0 0 0.25rem rgba(77, 50, 100, 0.35) !important;
}

.btn-outline-primary {
  --bs-btn-color: var(--mo-primary);
  --bs-btn-border-color: var(--mo-primary);
  --bs-btn-hover-bg: var(--mo-primary);
  --bs-btn-hover-border-color: var(--mo-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-focus-shadow-rgb: 77, 50, 100;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--mo-primary);
  --bs-btn-active-border-color: var(--mo-primary);
  --bs-btn-disabled-color: var(--mo-primary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--mo-primary);
}

.btn-outline-primary:focus,
.btn-outline-primary:focus-visible,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary {
  background-color: var(--mo-primary) !important;
  border-color: var(--mo-primary) !important;
  color: #fff !important;
  box-shadow: 0 0 0 0.25rem rgba(77, 50, 100, 0.35) !important;
}

.btn-secondary:focus,
.btn-secondary:focus-visible,
.btn-secondary:active,
.btn-secondary.active {
  box-shadow: 0 0 0 0.25rem rgba(77, 50, 100, 0.2) !important;
}

.btn-success:focus,
.btn-success:focus-visible,
.btn-success:active {
  box-shadow: 0 0 0 0.25rem rgba(77, 50, 100, 0.25) !important;
}

/* Pagination / links ? no Bootstrap blue after click */
.page-link:focus,
.page-link:focus-visible {
  color: var(--mo-primary);
  background-color: #fff;
  box-shadow: 0 0 0 0.25rem rgba(77, 50, 100, 0.25);
}

.react-bootstrap-table-pagination .page-item.active .page-link:focus,
.react-bootstrap-table-pagination .page-item.active .page-link:focus-visible {
  background-color: var(--mo-primary);
  border-color: var(--mo-primary);
  color: #fff;
  box-shadow: 0 0 0 0.25rem rgba(77, 50, 100, 0.35);
}

a:focus,
a:focus-visible {
  outline-color: var(--mo-primary);
}

.text-primary {
  color: var(--mo-primary) !important;
}

.bg-primary {
  background-color: var(--mo-primary) !important;
}

/* ?? Header ?? */
#site-header {
  flex-shrink: 0;
  width: 100%;
}

.mo-chrome {
  width: 100%;
}

.mo-header {
  background: #f8f9fa;
  padding: 10px 15px;
  margin: 0;
  align-items: center;
}

.mo-header .logo {
  display: flex;
  align-items: center;
}

.mo-header .logo img {
  height: 48px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
}

.mo-user-block {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: #000;
  text-align: right;
  padding-right: 4px;
}

.mo-user-block strong {
  display: block;
  font-size: var(--mo-fs-base);
  font-weight: 500;
}

.mo-user-block .logout {
  color: #000;
  display: block;
  cursor: pointer;
  font-size: var(--mo-fs-base);
  font-weight: 400;
}
.mo-user-block .logout:hover {
  text-decoration: underline;
  color: #000;
}

/* ?? Navbar ?? */
.mo-navbar {
  background: var(--mo-primary);
  box-shadow: 0 4px 4px #ced4da;
  position: relative;
  z-index: 20;
  padding: 0 12px;
  width: 100%;
}

.mo-nav {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap; /* original .navigation ? wrap causes hover jerk */
  list-style: none;
}

.mo-nav > li {
  position: relative;
  color: #fff;
  cursor: pointer;
  margin-right: 15px; /* original .topLink */
  padding: 12px 12px 12px 22px;
  font-weight: normal;
  white-space: nowrap;
  line-height: 1.25;
}

.mo-nav > li > i {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85rem;
  color: #fff;
  pointer-events: none;
}

/* Top labels (Dashboard link + dropdown parents) share the same look */
.mo-nav > li > span {
  color: #fff;
  font-size: var(--mo-fs-base);
  font-weight: normal;
  display: inline;
}

.mo-nav > li > span > a {
  color: #fff !important;
  text-decoration: none !important;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.mo-nav > li > span > a:hover,
.mo-nav > li > span > a:focus {
  color: #fff !important;
  text-decoration: none !important;
}

/* Match bo-portal .subLinks hover ? no visibility/max-height:0 flip */
.mo-nav > li:hover > .mo-sub {
  height: auto;
  opacity: 1;
  pointer-events: auto;
}

.mo-sub {
  margin: 0;
  padding: 0;
  list-style: none;
  transition: opacity 0.25s ease-out;
  height: 0;
  opacity: 0;
  pointer-events: none;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: calc(100vh - 60px); /* always set like original ? clips tall menus */
  position: absolute;
  background: #4d3264;
  min-width: 200px;
  left: 0;
  top: 100%; /* below tab, same as original top: 43px intent */
  box-shadow: 0 8px 8px #ced4da;
  z-index: 30;
  /* thin scrollbar so Financial list doesn't jump width */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

.mo-sub::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.mo-sub::-webkit-scrollbar-track {
  background: transparent;
}
.mo-sub::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.35);
  border-radius: 6px;
}
.mo-sub::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.55);
}

.mo-sub li:hover {
  background: #7d5f97;
}

.mo-sub a {
  display: block;
  color: #fff !important;
  font-size: small;
  padding: 6px 8px 6px 22px;
  position: relative;
  text-decoration: none !important;
}

.mo-sub a i {
  position: absolute;
  left: 6px;
  top: 50%;
  margin-top: -6px;
  font-size: 0.7rem;
}

.mo-sub a:hover {
  color: #fff !important;
}

/* ?? Footer (MidOffice bar) ?? */
#site-footer {
  flex-shrink: 0;
  width: 100%;
  margin-top: auto;
}

.mo-footer {
  text-align: center;
  padding: 20px 15px;
  background-color: var(--mo-primary);
  color: #fff;
  font-size: 16px;
  width: 100%;
  margin: 0;
}

/* ?? Page shell (bo-portal <Container className="pageContainer">) ??
   Side gutters (yellow space) = viewport minus Bootstrap container max-width:
   ?1200px ? 1140px wide, ?1400px ? 1400px wide, always margin:auto centered */
.pageContainer {
  padding-top: 1rem;
  padding-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

/* Cards fill the container content box ? same left/right edge as each other */
.pageContainer > .card,
.pageContainer #page-content > .card {
  width: 100%;
}

.pageContainer .card {
  border: 0;
  box-shadow: 0 2px 3px rgb(52 58 64 / 6%);
  border-radius: 0.25rem;
  margin-bottom: 1rem;
  overflow: hidden;
}

.pageContainer .card-header {
  background-color: hsl(221.54deg 31.71% 91.96% / 53%);
  border-bottom: 1px solid rgba(77, 50, 100, 0.2);
  padding: 12px 16px;
}

.pageHeader {
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* Original: h1 { font-size: $font-size-lg } + Bootstrap headings-font-weight 500 */
.pageHeader h1 {
  font-size: var(--mo-fs-lg); /* 1.09375rem (17.5px) ? NOT 1.25rem */
  margin: 0;
  color: var(--mo-body-color);
  font-weight: 500;
  line-height: 1.2;
}

.pageHeader .btn-sm {
  font-size: var(--mo-fs-sm);
  font-weight: 400;
  padding: 0.25rem 0.5rem;
}

/* pageContainer h6 section titles (Create Agency / Create Role) */
.pageContainer h6,
.mo-section-title {
  font-size: var(--mo-fs-base);
  font-weight: 500;
  line-height: 1.2;
}

/* ?? MidOffice filter fields (exact App.scss) ?? */
.searchBlock.card-body,
.card-body.searchBlock {
  padding: 1rem 1rem 0;
  padding-bottom: 0;
}

.searchBlock a {
  color: #0000ff;
}

/* Fluid Col md filters ? fill equal Bootstrap columns (no w-* locks) */
.searchBlock .mo-filter-row > [class*='col-md-'] > .form-floating,
.searchBlock .mo-filter-row > [class*='col-md-'] > .mo-rs,
.searchBlock .mo-filter-row > [class*='col-'] > .form-floating {
  width: 100%;
  max-width: 100%;
}

.searchBlock .mo-filter-row > .d-flex > .btn.w-100 {
  align-self: flex-start;
}

.w-100 {
  width: 100px;
}
.w-110 {
  width: 110px;
  min-width: 110px !important;
  max-width: 110px;
}
.w-120 {
  width: 120px;
  min-width: 120px !important;
  max-width: 120px;
}
.w-130 {
  width: 130px;
  min-width: 130px !important;
  max-width: 130px;
}
.w-140 {
  width: 140px;
  min-width: 140px !important;
  max-width: 140px;
  flex: 0 0 auto;
}
.w-150 {
  width: 150px;
  min-width: 150px !important;
  max-width: 150px;
  flex: 0 0 auto;
}
.w-160 {
  width: 160px;
  min-width: 160px !important;
  max-width: 160px;
  flex: 0 0 auto;
}
.w-170 {
  width: 170px;
  min-width: 170px !important;
  max-width: 170px;
  flex: 0 0 auto;
}
.w-190 {
  width: 190px;
  min-width: 190px !important;
  max-width: 190px;
  flex: 0 0 auto;
}

.form-floating > .form-control,
.form-floating > .form-control-plaintext,
.form-floating > .form-select {
  height: calc(2.5rem + 2px);
  min-height: calc(2.5rem + 2px);
  line-height: 1.25;
  padding: 0.6rem 0.75rem;
  font-size: var(--mo-fs-base);
  font-weight: 400;
  border-color: #adb5bd;
  border-radius: 0.25rem;
  color: var(--mo-body-color);
}

/* MidOffice: equal top/bottom padding so typed text stays vertically centered
   (Bootstrap CDN uses 1.625rem / 0.625rem which pushes text down) */
.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown),
.form-floating > .form-control-plaintext,
.form-floating > .form-select:focus,
.form-floating > .form-select:not([value='']):not(:focus),
.form-floating > .form-select {
  padding-top: 0.6rem !important;
  padding-bottom: 0.6rem !important;
}

.form-floating > .form-control:focus,
.form-floating > .form-select:focus {
  border-color: #adb5bd;
  box-shadow: 0 0 0 0.1rem rgba(77, 50, 100, 0.25);
}

.form-floating > label {
  color: rgba(63, 30, 89, 0.7);
  width: auto;
  padding: 0.5rem 0.75rem;
  font-size: var(--mo-fs-base);
  font-weight: 400;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-select ~ label,
.form-floating.datepickercustom > label,
.fixedFloatingLabel > label {
  transform: scale(0.85) translateY(-0.8rem) translateX(0.15rem);
  background-color: #fff;
  color: var(--mo-primary);
  opacity: 1;
  padding: 0 0.25rem;
  height: auto;
  margin-left: 0.5rem;
  font-weight: 500;
  z-index: 3;
}

.form-floating.datepickercustom .form-control {
  padding: 0.6rem 0.75rem;
  line-height: 1.25;
  cursor: pointer;
}

/* White date popup ? matches bo-portal react-datepicker */
.mo-datepicker {
  position: absolute;
  z-index: 1080;
  width: 242px;
  padding-top: 10px;
  background: transparent;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.8rem;
  user-select: none;
  color: #22313d;
}

.mo-datepicker-triangle {
  position: absolute;
  top: 2px;
  left: 40px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #fff;
  filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.08));
  z-index: 2;
}

.mo-datepicker-inner {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 0.3rem;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
  padding: 8px 6px 10px;
  position: relative;
  z-index: 1;
}

.mo-datepicker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 4px 10px;
  position: relative;
}

.mo-datepicker-current {
  flex: 1;
  text-align: center;
  color: #22313d;
  font-weight: 700;
  font-size: 0.944rem;
  margin: 0 1.2rem;
  line-height: 1.4;
}

.mo-datepicker-navbtn {
  position: absolute;
  top: 2px;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.mo-datepicker-navbtn::before {
  content: '';
  display: block;
  width: 9px;
  height: 9px;
  border-style: solid;
  border-width: 3px 3px 0 0;
  border-color: #ccc;
  position: absolute;
  top: 9px;
}

.mo-datepicker-prev {
  left: 0;
}

.mo-datepicker-prev::before {
  left: 10px;
  transform: rotate(-135deg);
}

.mo-datepicker-next {
  right: 0;
}

.mo-datepicker-next::before {
  right: 10px;
  transform: rotate(45deg);
}

.mo-datepicker-navbtn:hover::before {
  border-color: #a6a6a6;
}

.mo-datepicker-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-bottom: 2px;
}

.mo-datepicker-dow span {
  color: #22313d;
  width: 1.7rem;
  line-height: 1.7rem;
  margin: 0.166rem auto;
  font-size: 0.8rem;
}

.mo-datepicker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
}

.mo-datepicker-day {
  width: 1.7rem;
  height: 1.7rem;
  line-height: 1.7rem;
  margin: 0.166rem auto;
  border: 0;
  background: transparent;
  color: #22313d;
  font-size: 0.8rem;
  border-radius: 0.3rem;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mo-datepicker-day:hover {
  background-color: #f0f0f0;
}

.mo-datepicker-day.is-outside {
  color: #ccc;
}

.mo-datepicker-day.is-selected {
  background-color: #043c5d !important;
  color: #fff !important;
  font-weight: 700;
}

.mo-datepicker-day.is-today:not(.is-selected) {
  font-weight: 700;
}

.fixedFloatingLabel > .mo-rs {
  width: 100%;
}

/* react-select look-alike (classNamePrefix: select) */
.mo-rs {
  position: relative;
  width: 100%;
}

.mo-rs .select__control,
.css-13cymwt-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  min-height: 38px;
  height: calc(2.5rem + 2px);
  padding: 0;
  background: #fff;
  border: 1px solid #adb5bd !important;
  border-radius: 0.25rem;
  cursor: pointer;
  box-shadow: none;
  transition: none;
}

.mo-rs .select__control:hover,
.mo-rs .select__control--is-focused,
.css-t3ipsp-control,
.css-t3ipsp-control:hover {
  border-color: #adb5bd !important;
  box-shadow: 0 0 0 0.1rem rgba(77, 50, 100, 0.25) !important;
}

.mo-rs .select__value-container {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 2px 8px;
  overflow: hidden;
  min-width: 0;
}

.mo-rs .select__placeholder {
  color: hsl(0, 0%, 50%);
  margin: 0;
  font-size: var(--mo-fs-base);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mo-rs .select__single-value {
  color: var(--mo-body-color);
  font-size: var(--mo-fs-base);
  font-weight: 400;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.mo-rs .select__indicators {
  display: flex;
  align-items: center;
  align-self: stretch;
  flex-shrink: 0;
}

.mo-rs .select__indicator-separator {
  align-self: stretch;
  width: 1px;
  margin: 8px 0;
  background: hsl(0, 0%, 80%);
}

.mo-rs .select__dropdown-indicator {
  display: flex;
  align-items: center;
  padding: 8px;
  color: hsl(0, 0%, 80%);
}

.mo-rs .select__dropdown-indicator svg {
  fill: hsl(0, 0%, 80%);
  display: block;
}

.mo-rs .select__clear-indicator {
  display: flex;
  align-items: center;
  padding: 8px;
  color: hsl(0, 0%, 80%);
  cursor: pointer;
}

.mo-rs .select__clear-indicator:hover {
  color: #999;
}

.mo-rs .select__menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 11px hsla(0, 0%, 0%, 0.1);
  z-index: 9999;
  overflow: hidden;
}

.mo-rs .select__menu-list {
  max-height: 220px;
  overflow-y: auto;
  padding: 4px 0;
}

.mo-rs .select__option {
  padding: 8px 12px;
  font-size: var(--mo-fs-base);
  color: var(--mo-body-color);
  cursor: pointer;
}

.mo-rs .select__option:hover,
.mo-rs .select__option--is-focused {
  background: #deebff;
}

.mo-rs .select__option--is-selected {
  background: var(--mo-primary);
  color: #fff;
}

.mo-rs.is-open .select__control {
  border-color: #adb5bd !important;
  box-shadow: 0 0 0 0.1rem rgba(77, 50, 100, 0.25) !important;
}

.fixedFloatingLabel .mo-rs {
  padding-top: 0;
}

/* Match Bootstrap Form.Check (Sales Flight Cancel) ? do not use flex (breaks float) */
.searchBlock .form-check {
  display: block;
  min-height: calc(2.5rem + 2px);
  padding-left: 1.5em;
  padding-top: 0.65rem; /* vertically center with floating fields */
  margin-bottom: 1rem;
}

.searchBlock .form-check .form-check-input {
  float: left;
  margin-left: -1.5em;
  margin-top: 0.2em;
  width: 1em;
  height: 1em;
  vertical-align: top;
  accent-color: var(--mo-primary);
  cursor: pointer;
}

.searchBlock .form-check .form-check-input:focus {
  border-color: var(--mo-primary);
  box-shadow: 0 0 0 0.25rem rgba(77, 50, 100, 0.25);
}

.searchBlock .form-check .form-check-input:checked {
  background-color: var(--mo-primary);
  border-color: var(--mo-primary);
}

.searchBlock .form-check-label {
  display: inline-block;
  margin-left: 0;
  padding-left: 0.15rem;
  color: var(--mo-body-color);
  font-size: var(--mo-fs-base);
  font-weight: 400;
  line-height: 1.5;
  vertical-align: top;
  cursor: pointer;
}

.searchBlock .btn.mb-3 {
  margin-bottom: 1rem !important;
}

.supplier-agency-type .form-check {
  min-height: 1.5rem;
  padding-top: 0;
  margin-bottom: 0.55rem;
}

.supplier-agency-type .form-check.mb-3 {
  margin-bottom: 1rem !important;
}

.supplier-agency-type .form-check-label {
  padding-left: 0.35rem;
}

.mo-filter-row > [class*='col'] {
  margin-bottom: 0;
}

/* Hotel Sales / Booking Request — Search, Excel, Clear sit on field baseline */
.searchBlock .mo-filter-row {
  align-items: flex-start;
}

.searchBlock .mo-filter-row > .col.mo-actions-col {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  padding-top: 0;
}

.searchBlock .mo-filter-row > .col.mo-actions-col > .btn {
  height: calc(2.5rem + 2px);
  min-height: calc(2.5rem + 2px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 1rem !important;
  border-radius: 0.25rem;
  vertical-align: top;
  box-sizing: border-box;
}

.searchBlock .mo-filter-row > .col.mo-actions-col > .btn.me-3 {
  margin-right: 1rem !important;
}

.mo-action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0;
  margin: 0;
}

.mo-action-bar .text-success,
.mo-action-bar .text-danger {
  font-size: var(--mo-fs-base);
}

.bottomBtnSec {
  padding: 20px 0;
  border-top: 1px solid #ced4da;
  margin-top: 20px;
}

.bottomBtnSec .col {
  min-width: fit-content;
}

.bottomBtnSec .btn {
  height: fit-content;
}

.bottomBtnSec .btn.w-130 {
  width: 130px;
  min-width: 130px;
}

.errorBrd {
  border-color: rgba(255, 0, 0, 0.5) !important;
}

/* Table column widths ? match App.scss (lock narrow status cols) */
.w-30 {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px;
}
.w-60 {
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px;
}
.w-70 {
  width: 70px !important;
  min-width: 70px !important;
  max-width: 70px;
}
.w-80 {
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px;
}
.w-90 {
  width: 90px !important;
  min-width: 90px !important;
  max-width: 90px;
}
.w-120 {
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px;
}

/* Agency Groups Create button ? sit beside floating fields */
.searchBlock .col-md-2 > .btn.w-100.mb-0 {
  margin-top: 0;
  height: calc(2.5rem + 2px);
}

.mo-section-title {
  background: #f8f9fa;
  padding: 5px 8px;
  border-radius: 5px;
  margin: 8px 0 16px;
  color: var(--mo-body-color);
}

/* Create forms ? fluid Col md widths (no filter w-* locks) */
.mo-create-body .form-floating,
.mo-create-body .mo-rs,
.mo-create-body .mo-radio-group {
  width: 100%;
  max-width: 100%;
}

.mo-create-body .mo-rs .select__control {
  width: 100%;
}

.mo-create-cards > .card.form-card {
  width: 100%;
  border: 0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 3px rgb(52 58 64 / 6%);
  margin-bottom: 1rem;
}

.mo-create-cards .form-card .pageHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.mo-create-cards .pageHeader h2 {
  font-size: var(--mo-fs-lg);
  line-height: 1.2;
  color: var(--mo-body-color);
  font-weight: 500;
  margin: 0;
}

.mo-create-cards .card-body {
  padding: 1rem 1rem 0;
}

.mo-create-body.searchBlock .row {
  align-items: flex-start;
}

.mo-create-body.searchBlock .mo-section-title {
  display: none;
}

.mo-label-rows .mo-label-row {
  align-items: flex-start;
}

.mo-label-rows .mo-label-row strong {
  display: block;
  padding-top: 0;
  font-size: var(--mo-fs-base);
  font-weight: 700;
  color: var(--mo-body-color);
}

.mo-label-rows .form-floating.mb-3,
.mo-label-rows .datepickercustom.mb-3,
.mo-label-rows .mo-radio-group.mb-3,
.mo-label-rows .form-check.mb-3 {
  margin-bottom: 0 !important;
}

.mo-label-rows .mo-radio-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  padding-top: 0.25rem;
}

.mo-label-rows .form-check {
  padding-top: 0;
}

.mo-label-rows .mo-radio-group .form-check-inline {
  display: inline-flex;
  align-items: center;
  width: auto;
  margin-right: 0;
  margin-bottom: 0.75rem !important;
}

.mo-label-rows .mo-radio-group .form-check-label {
  padding-left: 0.35rem;
}

.mo-label-rows .bottomBtnSec {
  margin-top: 1rem;
}

.mo-editor-block .mo-editor {
  font-size: var(--mo-fs-base);
  color: var(--mo-body-color);
  border: 1px solid #adb5bd;
  border-radius: 0.25rem;
  resize: vertical;
}

/* bo-portal ImageUpload — floating file + thumbnail */
.mo-image-upload {
  margin: 0;
}

.mo-image-upload > .col {
  min-width: 0;
}

.form-floating.mo-file-floating > .form-control[type='file'] {
  height: calc(2.5rem + 2px);
  min-height: calc(2.5rem + 2px);
  padding: 0.6rem 0.75rem;
  line-height: 1.25;
  font-size: var(--mo-fs-base);
  color: var(--mo-body-color);
  border: 1px solid #adb5bd;
  border-radius: 0.25rem;
  background-color: #fff;
}

.form-floating.mo-file-floating > .form-control[type='file']::file-selector-button {
  margin: -0.6rem 0.75rem -0.6rem -0.75rem;
  padding: 0.6rem 0.75rem;
  border: 0;
  border-right: 1px solid #adb5bd;
  border-radius: 0;
  background: #e9ecef;
  color: var(--mo-body-color);
  font-size: var(--mo-fs-base);
}

.form-floating.mo-file-floating > label {
  transform: scale(0.85) translateY(-0.8rem) translateX(0.15rem);
  background-color: #fff;
  color: var(--mo-primary);
  opacity: 1;
  padding: 0 0.25rem;
  height: auto;
  margin-left: 0.5rem;
  font-weight: 500;
  z-index: 3;
}

.form-floating.mo-file-floating .mo-file-uploading,
.form-floating.mo-file-floating .mo-file-uploaded {
  font-size: var(--mo-fs-sm);
  margin-top: 0.25rem;
}

.uploadedImage {
  background: #f8f9fa;
  border-radius: 6px;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  min-height: calc(2.5rem + 2px);
}

.uploadedImage img,
.uploadedImage svg {
  height: 38px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  padding: 5px;
  cursor: pointer;
}

.mo-file-preview-col {
  padding-left: 0.5rem;
}

.clearBtn {
  background: transparent;
  border: solid 1px gray;
  border-radius: 10px;
  font-size: 12px;
  padding: 2px 10px;
  color: var(--mo-body-color);
  cursor: pointer;
  margin-top: 0.25rem;
}

.clearBtn:hover {
  background: #f8f9fa;
}

.mo-image-upload-wrap .mo-image-upload .form-floating.mb-3 {
  margin-bottom: 0.5rem !important;
}

.cms-banner-note dl {
  margin: 0;
}

.cms-banner-note dd {
  margin-left: 0;
  margin-bottom: 0.25rem;
  color: var(--mo-body-color);
  font-size: var(--mo-fs-base);
}

.addFaq {
  display: flex;
  margin-bottom: 1rem;
}

.addFaq a {
  color: #0000ff;
  cursor: pointer;
  text-decoration: none;
  font-weight: 500;
}

.addFaq a:hover {
  text-decoration: underline;
}

.mo-label-rows .mb-3 > .form-control[type='file'],
.mo-label-rows input[type='file'].form-control {
  padding: 0.4rem 0.75rem;
}

.markupAirlineSec {
  position: relative;
  border: 0;
  border-radius: 8px;
  padding: 26px 8px 0;
  margin: 0 0 1rem;
  background: #f8f9fa;
}

.markupAirlineSec::before {
  content: '1';
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px 0 40px 0;
  background: rgba(77, 50, 100, 0.9);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-right: 8px;
  font-size: var(--mo-fs-base);
  font-weight: 700;
}

.markupAirlineSec .mo-label-row {
  padding-left: 0;
}

.mo-create-body .form-check {
  display: block;
  min-height: 1.5rem;
  padding-left: 1.5em;
  margin-bottom: 1rem;
  padding-top: 0.55rem; /* align with floating-label fields */
}

/* Plain checkboxes only ? do NOT apply to form-switch (breaks toggle size/align) */
.mo-create-body .form-check:not(.form-switch) .form-check-input {
  float: left;
  margin-left: -1.5em;
  margin-top: 0.2em;
  width: 1em;
  height: 1em;
  vertical-align: top;
  accent-color: var(--mo-primary);
}

.mo-create-body .form-check:not(.form-switch) .form-check-input:focus {
  border-color: var(--mo-primary);
  box-shadow: 0 0 0 0.25rem rgba(77, 50, 100, 0.25);
}

.mo-create-body .form-check:not(.form-switch) .form-check-input:checked {
  background-color: var(--mo-primary);
  border-color: var(--mo-primary);
}

.mo-create-body .form-check-label {
  display: inline-block;
  margin-left: 0;
  padding-left: 0.15rem;
  color: var(--mo-body-color);
  font-size: var(--mo-fs-base);
  font-weight: 400;
  line-height: 1.5;
  vertical-align: top;
  cursor: pointer;
}

.mo-radio-group .mo-radio-label {
  font-size: 0.8rem;
  color: rgba(63, 30, 89, 0.7);
  margin-bottom: 6px;
}

.mo-radio-group .form-check-inline {
  margin-right: 12px;
  padding-top: 0;
}

/* Search button column — align with floating fields */
.searchBlock .mo-btn-col {
  display: flex;
  align-items: flex-start;
}

.searchBlock .mo-btn-col .btn {
  height: calc(2.5rem + 2px);
  min-height: calc(2.5rem + 2px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  padding-top: 0;
  padding-bottom: 0;
  border-radius: 0.25rem;
}

/* Avoid phantom line under heading when card-header has no following empty searchBlock */
.card > .card-header {
  border-bottom: 1px solid rgba(77, 50, 100, 0.2);
}

/* Results table card ? flush like bo-portal Card.Body p-0 */
.card-body.p-0 {
  padding: 0 !important;
}

.card-body.p-0 .react-bootstrap-table {
  margin-bottom: 0;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.card-body.p-0 .mo-empty {
  padding: 40px 16px;
}

/* react-bootstrap-table (App.scss) ? scroll + cells like original */
.react-bootstrap-table {
  border-top: 3px solid rgba(77, 50, 100, 0.8);
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: var(--mo-scrollbar) #f8f9fa;
  scrollbar-width: thin;
}

.react-bootstrap-table::-webkit-scrollbar {
  height: 12px;
  width: 12px;
}
.react-bootstrap-table::-webkit-scrollbar-track {
  background: #f8f9fa;
}
.react-bootstrap-table::-webkit-scrollbar-thumb {
  background: var(--mo-scrollbar);
  border-radius: 10px;
}
.react-bootstrap-table::-webkit-scrollbar-thumb:hover {
  background: var(--mo-scrollbar-hover);
}

.react-bootstrap-table .table {
  width: max-content;
  min-width: 100%;
  margin: 0;
  font-size: var(--mo-fs-sm); /* $font-size-sm */
  font-weight: 400;
  white-space: nowrap;
  color: var(--mo-body-color);
  border-collapse: collapse;
}

.react-bootstrap-table .table thead tr {
  border: none;
}

.react-bootstrap-table .table thead th {
  background-color: rgba(77, 50, 100, 0.1);
  border: 1px solid #dee2e6;
  border-top: none;
  min-width: 100px;
  white-space: nowrap;
  vertical-align: top;
  padding: 0.35rem 0.5rem;
  /* browser/Bootstrap th default (table-th-font-weight: null) */
  font-weight: 700;
  color: var(--mo-body-color);
  font-size: var(--mo-fs-sm);
}

.react-bootstrap-table .table thead th.w-30 {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.react-bootstrap-table .table thead th.w-60 {
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.react-bootstrap-table .table thead th.w-70 {
  width: 70px !important;
  min-width: 70px !important;
  max-width: 70px;
}

.react-bootstrap-table .table thead th.w-80 {
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px;
}

.react-bootstrap-table .table thead th.w-90 {
  width: 90px !important;
  min-width: 90px !important;
  max-width: 90px;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.react-bootstrap-table .table thead th.w-110 {
  width: 110px !important;
  min-width: 110px !important;
  max-width: 110px;
}

.react-bootstrap-table .table thead th.w-120 {
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px;
}

.react-bootstrap-table .table thead th .filter-label {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}

.react-bootstrap-table .table thead th .mo-th-label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  line-height: 1.2;
  white-space: nowrap;
}

.react-bootstrap-table .table thead th .mo-sort-carets {
  display: inline-flex;
  flex-direction: column;
  line-height: 0.55;
  color: #adb5bd;
  font-size: 0.55rem;
  flex-shrink: 0;
  margin-left: 2px;
}

/* Keep filter inputs from stretching narrow cols (Status has no filter) */
.react-bootstrap-table .table thead th .form-control {
  font-size: var(--mo-fs-sm);
  font-weight: 400;
  padding: 3px;
  min-width: 20px !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto;
  border-radius: 0.2rem;
  color: var(--mo-body-color);
  border-color: #ced4da;
  background: #fff;
  box-sizing: border-box;
}

.react-bootstrap-table .table thead th .form-control::placeholder {
  color: #adb5bd;
  font-weight: 400;
}

.react-bootstrap-table .table tbody td {
  padding: 0.2rem 0.5rem;
  vertical-align: middle;
  border: 1px solid #dee2e6;
  font-size: var(--mo-fs-sm);
  font-weight: 400;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.react-bootstrap-table .table tbody td::first-letter {
  text-transform: uppercase;
}

.react-bootstrap-table .table tbody tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.02);
}

.react-bootstrap-table .table tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.card-body.p-0 .react-bootstrap-table-pagination {
  padding: 16px 1rem;
  margin: 0;
}

.react-bootstrap-table-pagination {
  padding: 16px 1rem;
  margin: 0;
  align-items: center;
  font-size: var(--mo-fs-base);
  color: var(--mo-body-color);
  background: #fff;
}

.react-bootstrap-table-pagination-total {
  margin-right: 8px;
  vertical-align: middle;
}

.mo-size-per-page {
  width: auto;
  min-width: 70px;
  display: inline-block;
  vertical-align: middle;
  font-size: var(--mo-fs-base);
  padding: 0.25rem 1.75rem 0.25rem 0.5rem;
  color: #6c757d;
  background-color: #fff;
  border-color: #adb5bd;
}

.react-bootstrap-table-pagination .btn-secondary.dropdown-toggle {
  background-color: #fff;
  border-color: #adb5bd;
  color: #6c757d;
  font-size: var(--mo-fs-base);
  padding: 0.25rem 0.65rem;
  min-width: 4rem;
}

.react-bootstrap-table-pagination .btn-secondary.dropdown-toggle:hover,
.react-bootstrap-table-pagination .btn-secondary.dropdown-toggle:focus,
.react-bootstrap-table-pagination .btn-secondary.dropdown-toggle.show {
  background-color: #fff;
  border-color: #adb5bd;
  color: #6c757d;
  box-shadow: none;
}

.react-bootstrap-table-pagination-list {
  display: flex;
  justify-content: flex-end;
}

.react-bootstrap-table-pagination .pagination {
  margin: 0;
}

.react-bootstrap-table-page-btns-ul {
  flex-wrap: nowrap;
}

.react-bootstrap-table-pagination .page-link {
  color: #6c757d;
  font-size: var(--mo-fs-base);
  border-color: #dee2e6;
  padding: 0.375rem 0.75rem;
  background: #fff;
  min-width: 2.25rem;
  text-align: center;
}

.react-bootstrap-table-pagination .page-item.active .page-link {
  background-color: var(--mo-primary);
  border-color: var(--mo-primary);
  color: #fff;
  z-index: 1;
}

.react-bootstrap-table-pagination .page-item:not(.active) .page-link:hover {
  color: var(--mo-primary);
  background-color: #fff;
  border-color: #dee2e6;
}

.react-bootstrap-table-pagination .page-item.disabled .page-link {
  color: #adb5bd;
  background: #fff;
}

.mo-table .tbAction {
  cursor: pointer;
  color: var(--mo-primary);
}

.mo-table .tbAction strong {
  color: var(--mo-primary);
  font-weight: 700;
}

.mo-table .tbAction.info {
  color: var(--mo-secondary, #6c757d);
}

.mo-table .tbAction .bi-printer-fill {
  font-size: 1rem;
  vertical-align: middle;
}

.mo-table .depositQueueAction {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.mo-table .depositQueueAction button,
.mo-table .depositQueueAction a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  color: #fff;
  line-height: 1;
}

.mo-table .depositQueueAction button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.react-bootstrap-table,
.tableFcAuto,
.react-bootstrap-table.tableFcAuto {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.mo-table .selOption {
  margin: 0;
  width: 1.1em;
  height: 1.1em;
  margin-top: 0;
  vertical-align: middle;
  border-radius: 50%;
  border: 1px solid #adb5bd;
  background-color: #fff;
  cursor: pointer;
}

.mo-table .selOption:checked {
  background-color: var(--mo-primary);
  border-color: var(--mo-primary);
}

.mo-table .badge {
  min-width: 50px;
  text-align: center;
  /* Bootstrap badge default: 0.75em of table cell ? do NOT use rem (was making pills too big) */
  font-size: 0.75em;
  font-weight: 500;
  padding: 0.35em 0.65em;
  line-height: 1.2;
  /* Original <Badge> (no pill) ? $badge-border-radius = $border-radius */
  border-radius: 0.375rem;
  display: inline-block;
  white-space: nowrap;
  vertical-align: middle;
}

.customTabs.nav-tabs {
  border-bottom: 1px solid #dee2e6;
}

.customTabs .nav-link {
  color: var(--mo-primary);
  font-size: var(--mo-fs-sm);
  border-radius: 0;
}

.customTabs .nav-link.active {
  color: var(--mo-body-color);
  background-color: #fff;
  border-color: #dee2e6 #dee2e6 #fff;
}

/* Match original BS4 badge colors (white text on green/red) */
.mo-table .badge.text-bg-success,
.mo-table .badge.bg-success {
  background-color: #28a745 !important;
  color: #fff !important;
}

.mo-table .badge.text-bg-danger,
.mo-table .badge.bg-danger {
  background-color: #dc3545 !important;
  color: #fff !important;
}

.mo-table .badge.text-bg-warning,
.mo-table .badge.bg-warning {
  background-color: #ffc107 !important;
  color: #fff !important;
}

/* Hotel booking details header status */
.mo-bd-header .badge.text-bg-warning,
.mo-bd-header .badge.bg-warning {
  background-color: #ffc107 !important;
  color: #fff !important;
}

/* Status / Flight Cancel body cells ? tight like original */
.react-bootstrap-table .table tbody td.w-60,
.react-bootstrap-table .table tbody td.w-90 {
  width: auto;
  max-width: none;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  overflow: visible;
  text-overflow: clip;
}

.react-bootstrap-table .table tbody td:has(.badge)::first-letter {
  text-transform: none;
}

/* Back-compat alias */
.mo-table-wrap {
  overflow-x: auto;
}

.mo-table {
  width: 100%;
  margin: 0;
  font-size: var(--mo-fs-sm);
  white-space: nowrap;
}

.mo-empty {
  text-align: center;
  padding: 40px 16px;
  color: var(--mo-secondary);
}

/* Showcase Load More (Agency Ledger etc.) */
.loadMoreBtn.iconBtn {
  display: inline-block;
  margin: 0 auto 18px;
  min-width: 100px;
}

.mo-alert {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 1050;
  min-width: 280px;
  box-shadow: 0 3px 10px rgb(0 0 0 / 15%);
}

/* ?? Login (bo-portal login-form.scss) ?? */
body.mo-login {
  background: var(--mo-body-bg);
}

.login-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  background:
    linear-gradient(145deg, rgba(77, 50, 100, 0.92) 0%, rgba(63, 30, 89, 0.88) 45%, rgba(124, 95, 151, 0.85) 100%),
    radial-gradient(ellipse at 20% 20%, #7d5f97 0%, transparent 55%),
    #4d3264;
  background-size: cover;
  background-position: center;
  padding: 24px 12px;
  width: 100%;
}

.login-page .login-block {
  background-color: #fff;
  box-shadow: 0 0 5px 5px rgb(0 0 0 / 3%);
  border-radius: 12px;
  width: 100%;
  max-width: 450px;
}

.login-page .login-header {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  padding: 20px 30px 20px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 5px solid rgba(77, 50, 100, 0.2);
}

.login-page .login-header img {
  height: 72px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}

.login-page .login-body {
  padding: 20px;
}

.login-page .form-floating > .form-control {
  padding-left: 36px;
  height: calc(2.5rem + 2px);
}

.login-page .form-floating > label {
  margin-left: 26px;
  color: rgba(63, 30, 89, 0.7);
}

.login-page .form-floating .field-icon {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  color: var(--mo-primary);
  z-index: 2;
}

.login-page .toggle-password {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--mo-primary);
  z-index: 2;
}

.login-page .forgotPwd {
  display: flex;
  justify-content: center;
  padding-top: 5px;
  padding-bottom: 12px;
}

.login-page .login-footer {
  padding: 0 20px 20px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--mo-secondary);
}

.login-inline-error {
  color: #dc3545;
  font-size: 0.8rem;
  margin: 8px 0;
  display: none;
}

.login-inline-error.show {
  display: block;
}

/* loginpopup & OTP Verification (original screenshot exact left alignment) */
.loginpopup .modal-dialog {
  max-width: 450px;
}

.loginpopup .modal-content {
  border-radius: 12px !important;
  border: none !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
  overflow: visible;
  background-color: #fff;
}

.loginpopup .modal-body {
  padding: 40px 40px 32px 40px;
  text-align: left;
}

.loginpopup .loginHeader {
  padding: 0;
  height: 0;
  position: relative;
  border: none;
}

.loginpopup .loginHeader .btn-close {
  position: absolute;
  right: -12px;
  top: -12px;
  border-radius: 50%;
  padding: 8px;
  z-index: 999;
  background-color: #fff;
  opacity: 1;
  margin: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.loginpopup .otpBlock {
  text-align: left !important;
}

.loginpopup .otpBlock h3 {
  margin-top: 0;
  margin-bottom: 6px;
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--mo-primary, #4d3264);
  letter-spacing: -0.3px;
  text-align: left !important;
}

.loginpopup .otpBlock h5 {
  font-size: 1.05rem;
  color: #2b2b2b;
  font-weight: 400;
  margin-bottom: 4px;
  text-align: left !important;
}

.loginpopup .otpBlock h5#otp-email-display,
.loginpopup .otpBlock h5:last-of-type {
  color: var(--mo-primary, #4d3264);
  font-weight: 700;
  word-break: break-all;
  margin-bottom: 24px;
  font-size: 1.05rem;
  text-align: left !important;
}

.loginpopup .otpBlock .otpField {
  margin-top: 0;
  text-align: left !important;
}

.loginpopup .otpBlock .otpField .otpTitle {
  color: #495057;
  display: block;
  font-size: 0.95rem;
  font-weight: 400;
  margin-bottom: 12px;
  padding-bottom: 0;
  text-align: left !important;
}

.loginpopup .otpBlock .otpField > span:not(.otpTitle) {
  color: #8c92a0;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center;
  font-size: 0.9rem;
  font-weight: 400;
  margin-top: 10px;
  margin-bottom: 24px;
  padding: 0;
  text-align: left !important;
}

.loginpopup .otpBlock .otpField span.timer {
  display: inline-flex !important;
  color: var(--mo-primary, #4d3264);
  font-weight: 700;
  margin-left: 4px;
  padding-left: 0;
}

.loginpopup .otpBlock .otpField span.timer a {
  color: var(--mo-primary, #4d3264);
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
}

.loginpopup .otpBlock .otpField span.timer a:hover {
  text-decoration: underline;
}

.loginpopup .otpBlock .otpInput {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0;
  gap: 8px;
}

.loginpopup .otpBlock .otpInput .otpInputField {
  height: 36px;
  width: 40px !important;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--mo-primary, #4d3264);
  border-width: 0 0 2px 0;
  border-style: solid;
  border-color: #e2e8f0;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  text-align: center;
  background: transparent;
  box-shadow: none;
  transition: border-color 0.2s ease;
}

.loginpopup .otpBlock .otpInput .otpInputField:focus-visible,
.loginpopup .otpBlock .otpInput .otpInputField:focus {
  outline: unset;
  border-width: 0 0 2px 0;
  border-bottom-color: var(--mo-primary, #4d3264);
  box-shadow: none;
}

.loginpopup .otpBlock .button-block {
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.loginpopup .otpBlock .button-block .btn-primary {
  background-color: var(--mo-primary, #4d3264) !important;
  border-color: var(--mo-primary, #4d3264) !important;
  border-radius: 8px !important;
  height: 46px;
  font-size: 1.05rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  width: 100%;
}

.loginpopup .otpBlock .button-block .btn-primary:hover,
.loginpopup .otpBlock .button-block .btn-primary:focus {
  background-color: #3f1e59 !important;
  border-color: #3f1e59 !important;
}

/* —— Booking details / flight confirmation (bo-portal App.scss + flight-confirmation.scss) —— */
.confirmationPage {
  padding-top: 0.5rem;
  padding-bottom: 1.5rem;
  width: 100%;
}

.confirmationPage .card {
  margin-bottom: 1rem;
  border: 0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 3px rgb(52 58 64 / 6%);
  background: #fff;
}

/* App.scss .card .card-header — exact original */
.confirmationPage .card-header {
  background-color: hsl(221.54deg 31.71% 91.96% / 53%);
  border-bottom: 1px solid rgba(77, 50, 100, 0.2);
  padding: 12px 16px;
}

.confirmationPage .transactionDetails .pageHeader,
.confirmationPage .form-card .pageHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.confirmationPage .pageHeader h2 {
  font-size: var(--mo-fs-lg);
  margin: 0;
  color: var(--mo-body-color);
  font-weight: 500;
  line-height: 1.2;
}

/* Onward header: .title > .pageHeader + .pnrStatus (BookingDetails.jsx) */
.confirmationPage .transactionDetails .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.confirmationPage .transactionDetails .title .pageHeader {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0;
}

/* App.scss .ft — city route next to Onward title */
.confirmationPage .ft {
  display: flex;
  align-items: center;
  padding-left: 4px;
  font-size: var(--mo-fs-base);
  font-weight: 400;
  color: var(--mo-body-color);
}

.confirmationPage .ft .city {
  font-weight: bolder;
  padding: 0 4px;
}

.confirmationPage .ft .bi,
.confirmationPage .ft svg {
  transform: rotate(90deg);
  font-size: 0.9rem;
  color: var(--mo-primary);
}

.confirmBtns .card-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.confirmBtns .btn {
  margin: 0 0.25rem;
}

.latestTagCapsule {
  border-radius: 4px;
  color: #fff;
  padding: 2px 5px;
  background-color: #999;
  vertical-align: middle;
  margin: 0 4px;
  font-size: 0.75rem;
  font-weight: 500;
  display: inline-block;
}

.confirmationPage .transactionDetails ul:not(.nav) {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.confirmationPage .transactionDetails ul.cust-pers {
  border: 1px solid #ced4da;
  border-radius: 6px;
  padding: 9px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 16px;
}

.confirmationPage .transactionDetails ul.cust-pers li {
  margin-bottom: 0;
}

.confirmationPage .transactionDetails ul li {
  display: flex;
  flex-direction: column;
  min-width: 33.3%;
  margin-bottom: 8px;
  padding-right: 8px;
}

.confirmationPage .transactionDetails ul li strong {
  font-weight: 400;
  color: var(--mo-primary);
}

.confirmationPage .transactionDetails ul li span {
  color: #fd7e14;
  margin-left: 6px;
}

.confirmationPage .transactionDetails ul li .badge {
  color: #fff;
  line-height: 1.2;
  margin-left: 6px;
  width: fit-content;
}

.pnrStatus {
  display: flex;
  align-items: center;
}

.pnrStatus .btn {
  margin-right: 0.875rem;
}

.pnrStatus .pnrSec {
  background-color: #fff;
  border-radius: 0.2rem;
  padding: 0 0.5rem;
  font-size: var(--mo-fs-base);
  color: var(--mo-body-color);
}

.pnrStatus .pnrSec strong {
  font-weight: 500;
}

/* Inside Onward/Return title — orange PNR pill (flight-confirmation.scss) */
.confirmationPage .transactionDetails .title .pnrSec {
  background-color: #fd7e14;
  color: #fff;
  padding: 0.15rem 0.5rem;
  border-radius: 0.2rem;
}

.confirmationPage .transactionDetails .title .pnrSec strong,
.confirmationPage .transactionDetails .title .pnrSec span {
  color: #fff;
}

.pnrStatus .pnrGroup {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pnrStatus .oldPnrBadge {
  display: inline-block;
  background-color: #80858a;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.15rem 0.5rem;
  border-radius: 0.2rem;
}

/* Nested cards inside Onward Card.Body */
.confirmationPage .transactionDetails > .card-body > .form-card {
  margin-bottom: 1rem;
}

.confirmationPage .transactionDetails > .card-body > .form-card.mt-4 {
  margin-top: 1.5rem !important;
}

.confirmationPage .traveller-actions .btn {
  white-space: nowrap;
}

.confirmationPage .traveller-actions .me-4 {
  margin-right: 1.5rem !important;
}

.confirmationPage .bootCusTable.react-bootstrap-table {
  border-top: 1px solid #e9ecef;
  overflow-x: auto;
}

.confirmationPage .bootCusTable .table-bordered {
  border: 1px solid #e9ecef;
}

.confirmationPage .bootCusTable .table-bordered th,
.confirmationPage .bootCusTable .table-bordered td {
  border: 1px solid #e9ecef;
}

.confirmationPage .bootCusTable th strong {
  font-weight: 500;
}

.confirmationPage .extras .navb,
.confirmationPage .d-block.navb {
  color: #6c757d;
  font-size: var(--mo-fs-sm);
}

.confirmationPage .d-block.avb {
  color: var(--mo-primary);
  font-size: var(--mo-fs-sm);
}

/* FlightInfo / fdsCont — flight-confirmation.scss exact */
.confirmationPage .transactionDetails .fdsCont {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: 1.3125rem;
}

.confirmationPage .transactionDetails .fdsCont:first-child {
  margin-top: 0;
}

.confirmationPage .fdsCont .row {
  align-items: center;
}

.confirmationPage .fdsCont .airline {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.confirmationPage .fdsCont .airline .alImg {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.confirmationPage .fdsCont .airline .alImg img,
.confirmationPage .fdsCont .airline .alImg .planelogo {
  max-width: 40px;
  max-height: 40px;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 0;
}

.confirmationPage .fdsCont .airline .alImg .bi {
  font-size: 1.5rem;
  color: var(--mo-primary);
  line-height: 1;
}

.confirmationPage .fdsCont .airline > strong {
  font-weight: 500;
  display: block;
  margin-top: 0.4375rem;
  text-align: center;
  color: #565555;
  font-size: 14px;
}

.confirmationPage .fdsCont .airline > strong span {
  font-size: 12px;
  font-weight: 400;
  color: #565555;
}

.confirmationPage .fdsCont .time {
  display: flex;
  color: var(--mo-primary);
  justify-content: flex-start;
  flex-direction: column;
}

.confirmationPage .fdsCont .time.fm {
  align-items: flex-end;
}

.confirmationPage .fdsCont .time > strong {
  font-size: 20px;
  font-weight: 700;
  color: var(--mo-primary);
  line-height: 1.2;
}

.confirmationPage .fdsCont .time > em {
  font-style: normal;
  font-size: 0.765625rem;
  color: #495057;
}

.confirmationPage .fdsCont .time .ctAR strong {
  font-weight: 500;
  color: var(--mo-primary);
}

.confirmationPage .fdsCont .time .ctAR strong small {
  font-size: 0.75em;
}

.confirmationPage .fdsCont .time .ctAR em {
  color: var(--mo-primary);
  display: block;
  font-style: normal;
  font-size: 0.765625rem;
}

.confirmationPage .fdsCont .time .ctAR em.dbr {
  text-align: right;
}

.confirmationPage .fdsCont .duration {
  text-align: center;
  font-size: 12px;
  max-width: 200px;
  min-width: 200px;
  position: relative;
  padding: 0 28px;
  color: #6c757d;
}

/* Hollow endpoint dots sit on the dotted line (strong border-bottom) */
.confirmationPage .fdsCont .duration::before,
.confirmationPage .fdsCont .duration::after {
  content: none;
}

.confirmationPage .fdsCont .duration strong {
  display: block;
  width: 100%;
  text-align: center;
  border-bottom: 2px dotted var(--mo-primary);
  position: relative;
  padding-bottom: 6px;
  margin-bottom: 0;
  font-weight: 600;
  font-size: 12px;
  color: #6c757d;
  line-height: 1.2;
}

.confirmationPage .fdsCont .duration strong::before,
.confirmationPage .fdsCont .duration strong::after {
  content: '';
  position: absolute;
  bottom: -5px; /* center 8px circle on 2px border */
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--mo-primary);
  box-sizing: border-box;
  z-index: 2;
  display: block;
}

.confirmationPage .fdsCont .duration strong::before {
  left: -1px;
}

.confirmationPage .fdsCont .duration strong::after {
  right: -1px;
}

/* Takeoff / land icons — vertical center locked to dotted line */
.confirmationPage .fdsCont .duration > i {
  position: absolute;
  left: 0;
  top: auto;
  bottom: -12px; /* half of 24px icon → center on strong border */
  font-size: 14px;
  background-color: var(--mo-primary);
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  line-height: 1;
  z-index: 1;
  transform: none;
}

.confirmationPage .fdsCont .duration > i:last-of-type {
  left: auto;
  right: 0;
  transform: none;
}

.confirmationPage .fdsCont .duration > i svg {
  display: block;
  width: 14px;
  height: 14px;
}

.confirmationPage .fdsCont .duration .m-hide {
  display: none;
}

/* App.scss .pricedata */
.confirmationPage .fdsCont .pricedata {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 0 0 18%;
  align-items: center;
}

.confirmationPage .fdsCont .pricedata span {
  color: #000;
  padding: 0 4px;
  margin: 4px 0;
  display: inline-block;
  font-size: calc(var(--mo-fs-base) * 0.85);
  border-radius: 4px;
  text-align: center;
}

.confirmationPage .fdsCont .pricedata span.pb-PUBLISH,
.confirmationPage .fdsCont .pricedata span.pb-PUBLISHED {
  background-color: rgba(121, 45, 7, 0.118);
}

.confirmationPage .fdsCont .pricedata span.re-Refundable {
  color: #198754;
}

.confirmationPage .fdsCont .pricedata span.re-Non-Refundable {
  color: #dc3545;
}

.confirmationPage .fdsCont .btn-outline-primary {
  color: var(--mo-primary) !important;
  border-color: var(--mo-primary);
  background: #fff;
  white-space: nowrap;
}

.confirmationPage .fdsCont .btn-outline-primary:hover {
  color: #fff !important;
  background-color: var(--mo-primary);
  border-color: var(--mo-primary);
}

.confirmationPage .form-card strong {
  font-weight: 500;
}

.confirmationPage .bootCusTable {
  font-size: var(--mo-fs-base);
  margin: 0;
  white-space: nowrap;
  border-top: 1px solid #e9ecef;
}

.confirmationPage .bootCusTable thead th {
  background-color: unset;
  border: 1px solid #e9ecef;
  border-top: none;
  font-size: var(--mo-fs-base);
  font-weight: 500;
  color: var(--mo-body-color);
  padding: 6px 12px;
}

.confirmationPage .bootCusTable td {
  font-size: var(--mo-fs-base);
  padding: 6px 12px;
  vertical-align: middle;
  color: var(--mo-body-color);
  border: 1px solid #e9ecef;
}

.confirmationPage .bootCusTable tfoot td {
  background: #f8f9fa;
  font-weight: 500;
}

.confirmationPage .form-card.brd .card-body {
  border-top: 1px solid #dee2e6;
}

.confirmationPage .badge.text-bg-success {
  background-color: #28a745 !important;
  color: #fff !important;
}

.confirmationPage .badge.text-bg-danger {
  background-color: #dc3545 !important;
  color: #fff !important;
}

.confirmationPage .badge.text-bg-warning {
  background-color: #ffc107 !important;
  color: #fff !important;
}

/* —— Hotel Booking Details (flight-confirmation.scss hotel blocks) —— */
.confirmationPage .hotel-room-details {
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.confirmationPage .hotel-room-details > div {
  border-right: 1px solid #dee2e6;
}

.confirmationPage .hotel-room-details > div:last-child {
  border: none;
}

.confirmationPage .hotel-room-details .your-room {
  width: 60%;
  display: flex;
  min-width: 280px;
}

.confirmationPage .hotel-room-details .room-img {
  width: 24%;
  min-width: 90px;
  padding-right: 10px;
  margin-right: 20px;
}

.confirmationPage .hotel-room-details .room-img img {
  border-radius: 8px;
  max-width: 100%;
  display: block;
}

.confirmationPage .hotel-room-details .room-details h2 {
  color: var(--mo-primary);
  font-size: 1.25rem;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.confirmationPage .hotel-room-details .room-details .stars {
  font-size: 1.1rem;
  color: orange;
  margin-left: 4px;
}

.confirmationPage .hotel-room-details .room-details .stars .bi {
  margin-right: 1px;
}

.confirmationPage .hotel-room-details .room-details small.location {
  margin-bottom: 10px;
  display: flex;
  margin-top: 8px;
  font-size: 14px;
  color: #6c757d;
  align-items: center;
}

.confirmationPage .hotel-room-details .room-details small.location:first-of-type {
  margin-top: 0;
}

.confirmationPage .hotel-room-details .room-details small.location .bi {
  font-size: 18px;
  margin-right: 6px;
  color: var(--mo-primary);
}

.confirmationPage .hotel-room-details .room-details small.location span {
  font-size: 14px;
  color: var(--mo-primary);
}

.confirmationPage .hotel-room-details .room-details em.stay-dur {
  font-style: normal;
  display: block;
  margin-top: 4px;
}

.confirmationPage .hotel-room-details .h-time {
  margin: 15px 0 10px 20px;
  display: flex;
  position: relative;
  align-items: center;
  flex: 1;
  min-width: 220px;
}

.confirmationPage .hotel-room-details .h-time .check-in,
.confirmationPage .hotel-room-details .h-time .check-out {
  border: 1px solid #dee2e6;
  color: #4b0082;
  padding: 14px 30px 14px 10px;
  border-radius: 4px;
  margin-right: 10px;
  width: 202px;
  position: relative;
}

.confirmationPage .hotel-room-details .h-time .check-in strong,
.confirmationPage .hotel-room-details .h-time .check-out strong {
  display: flex;
}

.confirmationPage .hotel-room-details .h-time .check-in > i,
.confirmationPage .hotel-room-details .h-time .check-in .bi-clock {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  border-radius: 50%;
  padding: 4px;
  border: 1px solid #dee2e6;
  font-size: 14px;
  z-index: 1;
}

.confirmationPage .hotel-room-details .htime {
  font-weight: 500;
}

.confirmationPage .ttlAlert {
  padding: 8px 12px;
  width: 100%;
}

.confirmationPage .ttlAlert .info {
  cursor: help;
  margin-left: 4px;
}

.confirmationPage .addNotes {
  margin-left: 4px;
}

.confirmationPage .roomCount {
  font-weight: 600;
}

.confirmationPage .notesPopup .headerRow {
  background-color: #e9ecef;
  padding: 6px 0;
  margin-bottom: 4px;
}

.confirmationPage .notesPopup .row {
  padding: 4px 0;
  align-items: center;
}

.confirmationPage .imp-points {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

.confirmationPage .imp-points > div {
  width: 100%;
  height: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.confirmationPage .imp-points .tit {
  display: flex;
  color: var(--mo-primary);
  padding-bottom: 10px;
}

.mo-can-policy {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.mo-can-head {
  background-color: #f8f9fa;
  padding: 10px 18px;
  border-bottom: 2px solid #17517b;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mo-can-head .mo-can-i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #17517b;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  flex-shrink: 0;
}

.mo-can-head h6 {
  font-size: 14px;
  font-weight: 600;
  color: #17517b;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mo-can-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid #e9ecef;
  background: #fff;
}

.mo-can-row:last-child {
  border-bottom: none;
}

.mo-can-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}

.mo-can-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.mo-can-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mo-can-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: capitalize;
  letter-spacing: 0.2px;
}

.mo-can-dates {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #616161;
  font-size: 12px;
}

.mo-can-dates .mo-can-clock {
  width: 26px;
  height: 26px;
  opacity: 0.7;
  flex-shrink: 0;
}

.mo-can-amt {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  text-align: right;
  min-width: 90px;
  font-family: Roboto, sans-serif;
}

.mo-can-free {
  padding: 16px 20px;
  background: #f8f9fa;
}

.mo-can-free strong {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
}

.mo-can-free p {
  font-size: 13px;
  color: #616161;
  margin: 0;
}

.mo-can-nonref {
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 600;
  color: #d81717;
  text-transform: capitalize;
}

@media (max-width: 768px) {
  .confirmationPage .hotel-room-details .your-room {
    width: 100%;
    border-right: none !important;
    margin-bottom: 12px;
  }

  .confirmationPage .hotel-room-details .h-time {
    margin-left: 0;
    width: 100%;
    flex-wrap: wrap;
  }

  .confirmationPage .hotel-room-details .h-time .check-in,
  .confirmationPage .hotel-room-details .h-time .check-out {
    width: 100%;
    margin-bottom: 8px;
  }
}

.dashboard-placeholder {
  background: #fff;
  border-radius: 0.25rem;
  box-shadow: 0 3px 10px 1px rgb(0 0 0 / 12%);
  padding: 48px 24px;
  text-align: center;
}

.dashboard-placeholder h2 {
  font-size: 1.25rem;
  margin-bottom: 8px;
}

.dashboard-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 24px;
}

.dashboard-quick a {
  display: inline-block;
  padding: 10px 16px;
  background: var(--mo-primary);
  color: #fff;
  border-radius: 4px;
}
.dashboard-quick a:hover {
  background: #3f2754;
  color: #fff;
}

@media (max-width: 991px) {
  .mo-nav {
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  .mo-nav > li:hover > .mo-sub {
    position: fixed;
    left: 8px;
    right: 8px;
    width: auto;
    min-width: 0;
  }
}

body.mo-login {
  display: block;
}

/* Create Role permissions ? match bo-portal / wl-portal .permissionsSec */
.permissionsSec {
  margin: 0.5rem 0 1rem;
}
.permissionsSec ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.permissionsSec ul li label {
  padding-left: 10px;
}
.permissionsSec > ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.permissionsSec > ul > li {
  padding: 10px;
  background: rgba(77, 50, 100, 0.05);
  border-radius: 0.25rem;
  border-top: 3px solid rgba(77, 50, 100, 0.2);
  margin: 0.5rem 0 1rem 0;
  min-width: 84%;
  width: 100%;
}
.permissionsSec > ul > li > div {
  background: rgba(77, 50, 100, 0.2);
  padding: 0 0.5rem;
  border-radius: 0.25rem;
  margin-bottom: 10px;
  font-weight: 500;
  color: var(--mo-primary, #4d3264);
  line-height: 1.8;
}
.permissionsSec > ul > li > ul {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px solid rgba(77, 50, 100, 0.2);
  transition: all 0.4s;
  padding: 5px 0.5rem;
}
.permissionsSec > ul > li > ul:last-child {
  border: none;
}
.permissionsSec > ul > li > ul:hover {
  background-color: rgba(77, 50, 100, 0.2);
}
.permissionsSec > ul > li > ul > li:first-child {
  min-width: 30%;
  color: var(--mo-body-color, #3f1e59);
  font-size: var(--mo-fs-base, 0.875rem);
}
.permissionsSec > ul > li > ul > li {
  min-width: 15%;
  display: flex;
  align-items: center;
}
.permissionsSec > ul > li > ul > li .form-check-input {
  float: none;
  margin: 0;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  accent-color: var(--mo-primary, #4d3264);
  cursor: pointer;
}
.permissionsSec > ul > li > ul > li label {
  margin: 0;
  padding-left: 10px;
  font-size: var(--mo-fs-base, 0.875rem);
  color: var(--mo-body-color, #3f1e59);
  cursor: pointer;
}
.permissionsSec .agcStf {
  padding: 10px;
  background: rgba(77, 50, 100, 0.05);
  border-radius: 0.25rem;
  border-top: 3px solid rgba(77, 50, 100, 0.2);
}
.permissionsSec .agcStf .aghead {
  background: rgba(77, 50, 100, 0.2);
  padding: 0 0.5rem;
  border-radius: 0.25rem;
  margin-bottom: 10px;
  font-weight: 500;
  color: var(--mo-primary, #4d3264);
  line-height: 1.8;
}
.permissionsSec .agcStf .form-check {
  display: flex;
  align-items: center;
  margin-bottom: 0.35rem;
  padding-left: 1.5em;
}

/* Status toggle ? matches bo-portal switchCol */
.mo-table td .switchCol,
.mo-table td .form-switch {
  padding-left: 2.5em;
  min-height: 1.5rem;
  display: flex;
  align-items: center;
  margin-bottom: 0;
}
.mo-table td .form-switch .form-check-input {
  cursor: pointer;
  width: 2em;
  margin-left: -2.5em;
}
.mo-table td .form-switch .form-check-input:checked {
  background-color: var(--mo-primary, #4d3264);
  border-color: var(--mo-primary, #4d3264);
}

/* Create User ? password eye + instructions (bo-portal) */
.mo-password-field {
  position: relative;
}
.mo-password-field .mo-pwd-toggle {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #6c757d;
  z-index: 5;
  font-size: 1.1rem;
}
.mo-password-field .form-control {
  padding-right: 2.5rem;
}
.passwordInstructions {
  margin: 0.5rem 0 1rem;
}
.passwordInstructions strong {
  color: var(--mo-primary, #4d3264);
  font-size: 0.95rem;
}
.passwordInstructions ul {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
}
.passwordInstructions li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
  font-size: 0.875rem;
  color: #495057;
}
.passwordInstructions li .bi-check-circle-fill {
  color: #198754;
  font-size: 1rem;
}
/* Create-form toggles ? match bo-portal Form.Check type="switch" next to floating inputs */
.mo-create-body .form-switch {
  display: block;
  min-height: calc(2.5rem + 2px); /* same as form-floating control height */
  padding-left: 2.5em;
  padding-top: 0.85rem; /* optically center with floating-label inputs */
  margin-bottom: 1rem;
  float: none;
}
.mo-create-body .form-switch .form-check-input {
  float: left;
  width: 2em;
  height: 1.25em;
  margin-left: -2.5em;
  margin-top: 0.15em;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
  background-position: left center;
  border-radius: 2em;
  transition: background-position 0.15s ease-in-out;
  cursor: pointer;
  flex-shrink: 0;
}
.mo-create-body .form-switch .form-check-input:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2386b7fe'/%3e%3c/svg%3e");
  border-color: var(--mo-primary, #4d3264);
  box-shadow: 0 0 0 0.25rem rgba(77, 50, 100, 0.25);
}
.mo-create-body .form-switch .form-check-input:checked {
  background-color: var(--mo-primary, #4d3264);
  border-color: var(--mo-primary, #4d3264);
  background-position: right center;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.mo-create-body .form-switch .form-check-label {
  display: inline-block;
  padding-top: 0.05rem;
  cursor: pointer;
  color: var(--mo-body-color, #3f1e59);
}
.mo-create-body .mo-align-under-switch {
  margin-top: 0;
}

/* Create Role ? Fetch Permissions button aligned with Role Type select */
.mo-create-body .mo-fetch-perm-btn {
  margin-top: 0.35rem;
  min-height: calc(2.5rem + 2px);
  padding-left: 1rem;
  padding-right: 1rem;
}
.permissionsSec .agcStf .aghead {
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--mo-primary, #4d3264);
}
.permissionsSec .agcStf .form-check {
  margin-bottom: 0.35rem;
}

.loginpopup .modal-content {
  border-radius: 0 !important;
  border: unset !important;
}

.loginpopup .modal-body {
  padding: 0;
}

.loginpopup .loginHeader {
  padding: 0;
  height: 0;
  position: relative;
}

.loginpopup .loginHeader .btn-close {
  position: absolute;
  right: -13px;
  top: -13px;
  border-radius: 50%;
  padding: 6px;
  z-index: 999;
  background-color: #fff;
  opacity: 1;
  margin: 0;
}

.loginpopup .otpBlock {
  text-align: center;
  padding: 1.5rem;
}

.loginpopup .otpBlock h3 {
  color: var(--mo-primary);
  font-size: calc(var(--bs-body-font-size) * 1.55);
  font-weight: 500;
  margin: 0 0 12px;
}

.loginpopup .otpBlock h5 {
  font-size: calc(var(--bs-body-font-size) * 0.95);
  color: var(--mo-secondary);
  font-weight: 400;
  margin-bottom: 4px;
}

.loginpopup .otpBlock h5:last-of-type {
  color: var(--mo-primary);
  font-weight: 600;
  word-break: break-all;
  margin-bottom: 12px;
}

.loginpopup .otpField {
  margin-top: 8px;
}

.loginpopup .otpField > span {
  color: #adb5bd;
  display: flex;
  justify-content: center;
  padding-bottom: 10px;
}

.loginpopup .otpField > span.otpTitle {
  color: var(--mo-primary);
}

.loginpopup .otpField .timer {
  display: flex;
  color: var(--mo-primary);
  padding-left: 4px;
}

.loginpopup .otpInput {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 0 12px;
}

.loginpopup .otpInputField {
  height: 44px;
  width: 40px !important;
  font-size: calc(var(--bs-body-font-size) * 1.4);
  border: 1px solid #ced4da;
  border-radius: 6px;
  text-align: center;
  appearance: textfield;
}

.loginpopup .otpInputField::-webkit-outer-spin-button,
.loginpopup .otpInputField::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.loginpopup .otpInputField:focus,
.loginpopup .otpInputField:focus-visible {
  outline: unset;
  border-color: var(--mo-accent);
  box-shadow: none;
}

.loginpopup .button-block {
  padding: 8px 0 0;
  margin-top: 4px;
}

.loginpopup .button-block .btn {
  min-width: 120px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Dedicated B2C Booking Details Pixel-Perfect CSS --- */
.confirmBtns {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
}
.confirmBtns .card-body {
  padding: 0 !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.confirmBtns .btn-outline-primary {
  background-color: #ffffff;
  border: 1px solid #757575;
  color: #3f1e59 !important;
  font-size: 13px;
  font-weight: 500;
  padding: 5px 14px;
  border-radius: 4px;
}
.confirmBtns .btn-outline-primary:hover {
  background-color: #3f1e59;
  color: #ffffff !important;
  border-color: #3f1e59;
}
.confirmBtns .btn-primary {
  background-color: #4d3264;
  border-color: #4d3264;
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  padding: 5px 14px;
  border-radius: 4px;
}

.b2c-details-card {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  margin-bottom: 1.25rem;
}
.b2c-details-card .card-header {
  background-color: #f8f7f9;
  border-bottom: 1px solid #e8e6ed;
  padding: 10px 16px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.b2c-details-card .card-header .pageHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.b2c-details-card .card-header h2 {
  font-size: 1rem;
  font-weight: 600;
  color: #3f1e59;
  margin: 0;
}
.b2c-details-card .card-body {
  padding: 16px;
}

ul.b2c-tx-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0 0 10px 0;
}
ul.b2c-tx-list li {
  width: 33.333%;
  margin-bottom: 12px;
  font-size: 13.5px;
  color: #565555;
  line-height: 1.4;
}
ul.b2c-tx-list li strong {
  color: #3f1e59;
  font-weight: 500;
}
ul.b2c-tx-list li span.val-orange {
  color: #e65100;
  font-weight: 600;
  margin-left: 4px;
}
ul.b2c-tx-list li .badge {
  margin-left: 6px;
  padding: 4px 8px;
  font-size: 11px;
}

ul.cust-pers {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 12px 16px;
  background-color: #ffffff;
  margin-top: 10px;
  display: flex;
  list-style: none;
  width: 100%;
  margin-bottom: 0;
}
ul.cust-pers li {
  width: 33.333%;
  font-size: 13.5px;
  color: #565555;
  margin-bottom: 0;
}
ul.cust-pers li strong {
  color: #3f1e59;
  font-weight: 500;
}
ul.cust-pers li span.val-orange {
  color: #e65100;
  font-weight: 600;
  margin-left: 4px;
}

.b2c-pnr-badge {
  background-color: #ff7a00;
  color: #ffffff;
  font-weight: 700;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}

.b2c-layover-bar {
  background-color: #e2e8f0;
  padding: 6px 14px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: #3f1e59;
  font-size: 13px;
  font-weight: 500;
  margin: 10px 0;
}


/* --- Booking Details & Transaction Details (Mirrors flight-confirmation.scss) --- */
.confirmBtns {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.confirmBtns .card-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 1rem;
}
.confirmBtns .btn {
  margin: 0 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
}

.transactionDetails {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.transactionDetails .card-header {
  background-color: #f8f7f9;
  border-bottom: 1px solid #e9ecef;
  padding: 0.5rem 1rem;
}
.transactionDetails .pageHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.transactionDetails .pageHeader h2 {
  font-size: 0.95rem;
  margin: 0;
  color: #3f1e59;
  font-weight: 600;
}
.transactionDetails ul:not(.nav, .fareRules) {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
}
.transactionDetails ul:not(.nav, .fareRules) li {
  display: flex;
  flex-direction: column;
  min-width: 33.333%;
  margin-bottom: 10px;
  font-size: 0.8125rem;
  line-height: 1.4;
}
.transactionDetails ul:not(.nav, .fareRules) li strong {
  font-weight: 500;
  color: #3f1e59;
}
.transactionDetails ul:not(.nav, .fareRules) li span {
  color: #e65100; /* vibrant orange value */
  margin-left: 4px;
  font-weight: 600;
}
.transactionDetails ul:not(.nav, .fareRules) li .badge {
  color: #fff;
  line-height: 1.2;
  margin-left: 4px;
  width: fit-content;
  font-size: 0.75rem;
}
.transactionDetails ul.cust-pers {
  border: 1px solid #e2e0e5;
  border-radius: 6px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  margin-top: 10px;
  background-color: #ffffff;
}
.transactionDetails ul.cust-pers li {
  margin-bottom: 0;
}

/* Flight Details / Onward Details Card */
.fdsCont {
  width: 100%;
  padding: 14px 0;
}
.fdsCont + .fdsCont {
  border-top: 1px dashed #dee2e6;
}
.fdsCont .row {
  align-items: center;
}
.fdsCont .airline {
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
}
.fdsCont .airline .alImg {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.fdsCont .airline .alImg img {
  max-width: 100%;
  max-height: 100%;
}
.fdsCont .airline strong {
  font-weight: 500;
  color: #565555;
  font-size: 13px;
  text-align: center;
}
.fdsCont .airline strong span {
  color: #3f1e59;
}
.fdsCont .time {
  display: flex;
  flex-direction: column;
  color: #3f1e59;
}
.fdsCont .time.fm {
  align-items: flex-end;
  text-align: right;
}
.fdsCont .time.to {
  align-items: flex-start;
  text-align: left;
}
.fdsCont .time > strong {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.1;
}
.fdsCont .time em {
  font-style: normal;
  font-size: 0.75rem;
  color: #6c757d;
}
.fdsCont .time .ctAR {
  margin-top: 4px;
}
.fdsCont .time.fm .ctAR {
  text-align: right;
}
.fdsCont .time.to .ctAR {
  text-align: left;
}
.fdsCont .time .ctAR strong {
  font-weight: 600;
  color: #3f1e59;
  font-size: 13px;
}
.fdsCont .time .ctAR em {
  color: #6c757d;
  display: block;
  font-size: 11px;
}

.fdsCont .duration {
  text-align: center;
  font-size: 12px;
  min-width: 180px;
  max-width: 220px;
  position: relative;
  padding: 0 32px;
  color: #6c757d;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.fdsCont .duration strong {
  display: block;
  width: 100%;
  text-align: center;
  border-bottom: 2px dotted #4d3264;
  position: relative;
  padding-bottom: 6px;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 11px;
}
.fdsCont .duration i {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  background-color: #4d3264;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #ffffff;
  z-index: 2;
}
.fdsCont .duration i:first-of-type {
  left: 4px;
}
.fdsCont .duration i:last-of-type {
  right: 4px;
  left: auto;
}

.fdsCont.layover {
  margin: 8px 0;
  padding: 0;
}
.fdsCont.layover span {
  background-color: #e2e8f0;
  padding: 6px 14px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: #3f1e59;
  font-size: 0.8125rem;
  font-weight: 500;
}

.pnrSecBadge {
  background-color: #ff7a00;
  color: #fff;
  font-weight: 600;
  font-size: 0.8125rem;
  padding: 3px 8px;
  border-radius: 4px;
}

/* --- BootCusTable Styling for B2C Traveller Details & Price Breakup --- */
.bootCusTable.react-bootstrap-table {
  border-top: 1px solid #e9ecef;
  margin-bottom: 0;
  overflow-x: auto;
}
.bootCusTable.react-bootstrap-table .table {
  width: 100%;
  margin-bottom: 0;
  border-collapse: collapse;
}
.bootCusTable.react-bootstrap-table .table thead tr th {
  background-color: #f8f7f9;
  border: 1px solid #e9ecef;
  border-top: none;
  font-size: 13px;
  padding: 8px 12px;
  color: #3f1e59;
  white-space: nowrap;
}
.bootCusTable.react-bootstrap-table .table thead tr th.flCol {
  min-width: 180px;
  word-break: break-word;
  white-space: normal;
}
.bootCusTable.react-bootstrap-table .table tbody tr td {
  font-size: 13px;
  padding: 8px 12px;
  vertical-align: middle;
  border: 1px solid #e9ecef;
  color: #4a4a4a;
}
.bootCusTable.react-bootstrap-table .table tbody tr td.flCol {
  min-width: 180px;
  word-break: break-word;
  white-space: normal;
}
.bootCusTable.react-bootstrap-table .table tbody tr td.w-210 {
  min-width: 210px;
}

/* --- B2C Hotel Booking Details Styling (bo-portal parity) --- */
.confirmBtns {
  margin-top: 1rem !important;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  background-color: #fff;
}

.confirmBtns .card-body {
  display: flex;
  align-items: center;
  padding: 1rem !important;
  background-color: #fff;
  border-radius: 0.375rem;
}

.confirmBtns .btn {
  margin: 0 0.25rem !important;
  font-weight: 400;
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

.confirmationPage .btn-outline-primary {
  color: var(--mo-primary, #4d3264) !important;
  border-color: var(--mo-primary, #4d3264) !important;
  background-color: transparent !important;
}

.confirmationPage .btn-outline-primary:hover {
  color: #ffffff !important;
  background-color: var(--mo-primary, #4d3264) !important;
  border-color: var(--mo-primary, #4d3264) !important;
}


.transactionDetails .pageHeader,
.form-card .pageHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.transactionDetails .pageHeader h2,
.form-card .pageHeader h2 {
  font-size: var(--mo-fs-lg);
  margin: 0;
  color: var(--mo-body-color);
  font-weight: 500;
  line-height: 1.2;
}

.transactionDetails .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.transactionDetails ul:not(.nav, .fareRules) {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.transactionDetails ul:not(.nav, .fareRules) li {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-width: 33.333%;
  margin-bottom: 12px;
}

.transactionDetails ul:not(.nav, .fareRules) li strong {
  font-weight: 400;
  color: var(--mo-primary);
  display: flex;
  align-items: center;
}

.transactionDetails ul:not(.nav, .fareRules) li strong span {
  color: #fd7e14;
  margin-left: 6px;
  font-weight: 400;
}

.transactionDetails ul:not(.nav, .fareRules) li .badge {
  color: #fff;
  line-height: 1.2;
  font-weight: 500;
  font-size: 0.75rem;
  border-radius: 4px;
  padding: 0.25em 0.5em;
  margin-left: 6px;
}

.hotel-room-details {
  padding: 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.hotel-room-details > div {
  border-right: 1px solid #dee2e6;
}

.hotel-room-details > div:last-child {
  border: none;
}

.hotel-room-details .your-room {
  width: 60%;
  display: flex;
  align-items: flex-start;
}

.hotel-room-details .your-room .room-img {
  width: 160px;
  padding-right: 10px;
  margin-right: 20px;
  flex-shrink: 0;
}

.hotel-room-details .your-room .room-img img {
  border-radius: 8px;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.hotel-room-details .your-room .room-details h2 {
  color: var(--mo-primary);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
}

.hotel-room-details .your-room .room-details h2 .stars {
  font-size: 1rem;
  color: orange;
  margin-left: 6px;
}

.hotel-room-details .your-room .room-details small.location {
  margin-bottom: 6px;
  display: flex;
  margin-top: 4px;
  font-size: 14px;
  color: #6c757d;
  align-items: center;
}

.hotel-room-details .your-room .room-details small.location i {
  font-size: 18px;
  margin-right: 6px;
  color: var(--mo-primary);
  display: inline-flex;
  align-items: center;
}

.hotel-room-details .your-room .room-details small.location span {
  font-size: 14px;
  color: var(--mo-primary);
}

.hotel-room-details .your-room .room-details em.stay-dur {
  font-style: normal;
  display: block;
  margin-top: 6px;
  font-weight: 500;
  color: #3f1e59;
  font-size: 14px;
}

.hotel-room-details .h-time {
  display: flex;
  position: relative;
  margin: 15px 0 10px 20px;
  align-items: center;
}

.hotel-room-details .h-time .check-in,
.hotel-room-details .h-time .check-out {
  border: 1px solid #dee2e6;
  color: #4b0082;
  padding: 14px 30px 14px 14px;
  border-radius: 4px;
  margin-right: 10px;
  width: 202px;
  position: relative;
  background-color: #ffffff;
}

.hotel-room-details .h-time .check-in strong,
.hotel-room-details .h-time .check-out strong {
  display: flex;
  color: #4b0082;
  font-weight: 600;
  font-size: 0.875rem;
}

.hotel-room-details .h-time .check-in span,
.hotel-room-details .h-time .check-out span {
  color: #4b0082;
  font-weight: 700;
  display: block;
  font-size: 0.9375rem;
}

.hotel-room-details .h-time .check-in .htime,
.hotel-room-details .h-time .check-out .htime {
  font-weight: 400;
  font-size: 0.8rem;
  color: #4b0082;
}

.hotel-room-details .h-time .check-out i {
  position: absolute;
  display: flex;
  align-items: center;
  left: -18px;
  top: 50%;
  transform: translateY(-50%);
  background: #ffffff;
  border-radius: 50%;
  padding: 4px;
  border: 1px solid #dee2e6;
  z-index: 2;
  color: #4b0082;
}

.form-card strong {
  font-weight: 500;
}

.form-card.brd .card-body > div.notesPopup {
  border: 1px solid #e9ecef;
  border-radius: 4px;
  overflow: hidden;
}

.form-card.brd .card-body > div .row {
  margin: 0;
}

.form-card.brd .card-body > div .row .col {
  border-width: 0 0 1px 1px;
  border-color: #e9ecef;
  border-style: solid;
  padding: 8px 12px;
  color: #495057;
  font-size: 14px;
}

.notesPopup .headerRow {
  background-color: #e9ecef;
}

.notesPopup .headerRow .col {
  font-weight: 600;
  color: #3f1e59;
}

.card .airlineInfo,
.card .supplierInfo,
.card .markupAirlineSec {
  background: #f8f9fa;
  padding: 26px 8px 0px 8px;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.airlineInfo .btn,
.supplierInfo .btn {
  height: 48px;
}