@import url("badges.css");

:root {
  --main-color: #256eb7;
  --accent-color: #d82c1f;
  --body-font-color: #222222;
  --box-shadow-level1: 0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
  --box-shadow-level2: 0 3px 6px rgba(0, 0, 0, 0.16),
    0 3px 6px rgba(0, 0, 0, 0.23);
  --box-shadow-level3: 0 0.625em 20px rgba(0, 0, 0, 0.19),
    0 6px 6px rgba(0, 0, 0, 0.23);
  --box-shadow-level4: 8px 8px rgba(0, 0, 0, 0.22);
  --box-shadow-level5: 0 19px 38px rgba(0, 0, 0, 0.3),
    0 15px 12px rgba(0, 0, 0, 0.22);
  --card-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  --card-hover-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  --borderColor: #cccccc;
  --borderRadius: 5px;
  --red: #fd1c15;
  --maxWidth: 90%;
  --successColor: #27ae60;
  --successBGColor: rgba(39, 174, 96, 0.1);
  --errorColor: #c0392b;
  --errorBGColor: rgba(192, 57, 43, 0.1);
  --infoColor: #3498db;
  --infoBGColor: rgba(52, 152, 219, 0.1);
}

/* added so all elements behave the same when adding padding/margin */
* {
  box-sizing: border-box;
}

/* Focus indicators — WCAG 2.1 SC 2.4.7 */
:focus-visible {
  outline: 2px solid var(--cbat-primary);
  outline-offset: 2px;
}

/* Screen-reader only — visually hidden but accessible */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html,
body {
  width: 100%;
  margin: 0;
  padding: 0;
}
/* set font size/padding/margin as base for body tag */
body {
  font-family: var(--cbat-font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--body-font-color);
}

/* BEGIN GENERIC STYLING */
div {
  margin: 0;
}
.container.content {
  width: var(--maxWidth);
  margin: 0 auto;
}
@media only screen and (max-width: 500px) {
  .container.content {
    /* width: auto lets the box fit inside its parent minus the 20px
       margins. The previous `width: 100%` made the box exactly viewport-
       width AND THEN added 20px margins on each side, overflowing by
       40px (20px past each edge) — which on phones caused content to
       extend off the right edge and made fixed positioning math go
       weird. */
    width: auto;
    margin: 0 20px;
  }
  .container.content * {
    max-width: 100%;
  }
}

h1,
h2 {
  color: var(--main-color);
  font-weight: 900;
  font-family: var(--cbat-font-heading);
  margin-bottom: 0.75em;
}

.column-container {
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.red {
  color: var(--red);
}

.red li a {
  color: var(--red);
}

.small {
  font-size: 0.6em;
}

.bold {
  font-weight: 900;
}

.text-danger {
  color: var(--error);
}

.text-info {
  color: color-mix(in srgb, var(--info), black 35%); /* contrast-safe: ~7:1 on white */
}

.text-success {
  color: color-mix(in srgb, var(--success), black 35%); /* contrast-safe: ~5.5:1 on white */
}

/* Trip status row colors - replaces inline style="color: {{ obj.color }}" */
.trip-status-red {
  color: var(--error) !important;
  font-weight: bold;
}

.trip-status-black {
  color: var(--cbat-text) !important;
  font-weight: bold;
}

/* Error alert box - used in view_person.html */
.cbat-alert-error {
  color: var(--error);
  background-color: var(--error-bg);
  border: 1px solid var(--error-dark);
  padding: 10px 35px 10px 10px;
  margin: 10px 0;
  border-radius: 4px;
  font-size: 14px;
  position: relative;
}

.cbat-alert-close-btn {
  position: absolute;
  top: 5px;
  right: 10px;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--error);
  cursor: pointer;
}

.tl-image {
  width: 155px;
  height: 220px;
}
input,
select {
  border: 1px solid var(--borderColor);
  border-radius: var(--borderRadius);
  padding: 0.5em 0.25em;
  margin: 0.25em 0 !important;
}

label {
  font-weight: 900;
  font-size: 0.875rem;
}
textarea {
  font-size: 1rem;
  font-family: var(--cbat-font-body);
}
.fullWidth {
  width: 100%;
}

.flex-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: space-between;
  margin: 1em 0;
}
.flex-row > * {
  flex: 1;
}
@media only screen and (max-width: 680px) {
  .flex-row {
    flex-direction: column-reverse;
  }
}
ul.formlist {
  list-style-type: none;
}
ul.formlist li {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
}
ul.formlist li label:first-of-type {
  padding-right: 1em;
  width: 12em;
}
ul.formlist.radio input[type="radio"] {
  margin-right: 0.5em;
}
ul.formlist.radio li label:first-of-type {
  width: auto;
}
ul.formlist.radio li {
  height: 2em;
}

.message {
  display: block;
  padding: 0.5em 1em;
  margin: 0.5em auto;
  border: 1px solid var(--borderColor);
  border-radius: var(--borderRadius);
  max-width: 50%;
  font-weight: bold;
}
.message.full {
  max-width: 100%;
}
.message.success {
  border-color: var(--successColor);
  color: var(--successColor);
  background-color: var(--successBGColor);
}
.message.error,
.warning {
  border-color: var(--errorColor);
  color: var(--errorColor);
  background-color: var(--errorBGColor);
}
.message.info {
  border-color: #c0392b !important; /* ci-exempt fc-ignore: message info styling */
  color: black !important;
  background-color: var(--cbat-bg-secondary) !important;
}
.announcement {
  background-color: rgba(0, 0, 0, 0.1);
  padding: 0.5em 1em;
  border-radius: 30px;
  text-shadow: 1.25px 1.25px rgba(0, 0, 0, 0.4);
  font-size: 28px;
  width: auto;
  display: block;
  text-align: center;
  margin: 0.75em auto;
  max-width: 80%;
}
.table-link {
  color: var(--main-color);
  text-decoration: none;
}
.table-link:visited {
  color: var(--main-color);
}
.table-link:hover {
  color: var(--main-color);
  text-decoration: underline;
}

/* Sortable tables */

table.sortable thead {
  color: var(--cbat-text);
  font-weight: bold;
  cursor: pointer;
}

@media only screen and (max-width: 640px) {
  .announcement {
    font-size: 20px;
    text-shadow: none;
  }
}

/* The Modal (background) */

.modal,
.custom-modal-overlay {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 200; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}
.custom-modal-overlay {
  display: block;
  z-index: 800;
}

/* Modal Content/Box */

.modal-content,
.custom-modal-content {
  background-color: var(--cbat-bg);
  margin: 15vh auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid var(--borderColor);
  width: 50%; /* Could be more or less, depending on screen size */
  height: auto;
}

.modal-content > *,
.custom-modal-content > * {
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.vg_modal_heading {
  font-size: 1.5em;
  margin-top: 5%;
  margin-bottom: 2.5%;
}

.vg_modal_li {
  margin-top: 2.5%;
  margin-bottom: 2.5%;
}

.view_group_modal_label {
  font-size: 1.25em;
  color: var(--cbat-text-muted);
}

.vg_modal_title_input {
  margin-left: 2%;
}

.vg_modal_title_input #id_title {
  width: 500px !important;
}

.vg_modal_title_text_area {
  margin-left: 2.75%;
}

.vg_modal_title_text_area #id_description {
  width: 500px !important;
  border: 1px solid var(--borderColor) !important;
  border-radius: var(--borderRadius) !important;
}

.vg_modal_checkbox_div {
  width: 150px;
  margin-left: 20%;
}

.checkbox_hot_label,
.checkbox_internal_label {
  vertical-align: middle;
  font-size: 1.15em;
}

.checkbox_hot_label {
  color: #c0392b; /* ci-exempt fc-ignore: hot label styling */
}

.checkbox_internal_label {
  color: var(--main-color);
}

#id_hot,
#id_internal {
  display: inline-block;
  height: 1.75em;
  width: 1.75em;
  margin-left: 0.75em;
  vertical-align: middle;
  border: 1px solid var(--borderColor) !important;
  border-radius: var(--borderRadius) !important;
}

.modal_button_row {
  margin-left: 10% !important;
}

#submit_add_note_form,
#close_add_note_btn {
  width: 240px;
}

@media only screen and (max-width: 500px) {
  .vg_modal_checkbox_div,
  .modal_button_row {
    max-width: 100%;
    margin-left: 0% !important;
  }
}

.vg_modal {
  border: 5px solid #256eb7 !important; /* ci-exempt fc-ignore: modal primary border */
  border-radius: 10px !important;
}

@media only screen and (max-width: 1254px) {
  .modal-content,
  .custom-modal-content {
    width: 75%;
  }
}
@media only screen and (max-width: 780px) {
  .modal-content,
  .custom-modal-content {
    width: 100vw;
    min-height: 100vh;
    margin: 0;
    padding-top: 15vh;
  }
  .modal-content *,
  .custom-modal-content * {
    width: 100%;
  }
  .modal-content > *,
  .custom-modal-content > * {
    width: 100%;
  }
}

/* The Close Button */
.close {
  color: var(--cbat-border);
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
ul.flexlist {
  margin: 0 0 1em 0;
  padding: 0;
  list-style-type: none;
}
ul.flexlist li {
  padding: 0.25em 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
ul.flexlist li .label {
  font-weight: bold;
  width: 10em;
  margin-right: 1em;
}
ul.flexlist li .value {
  margin-right: 1em;
}
@media only screen and (max-width: 566px) {
  .modal-content ul.flexlist li {
    flex-direction: column;
  }
  .modal-content ul.flexlist li .label {
    width: 100%;
  }
}

/* Modal Form — uniform vertically-stacked label+input rows inside modals.
   Usage:  <ul class="flexlist modal-form"> ... </ul>
   Overrides .modal-content > * which forces flex-column on direct children.
   Centers the form block and gives inputs/selects a consistent width.
*/
.modal-content > ul.modal-form {
  display: block;
  width: fit-content;
  margin: 0 auto;
}
ul.modal-form li input,
ul.modal-form li select,
ul.modal-form li > div {
  width: 176px;
  height: 35px;
  box-sizing: border-box;
}
ul.modal-form li .form-separator {
  margin: 0 4px;
}

/* Cards on File — agent-side card management styles */
.card-row-inactive { opacity: 0.5; }
.status-deactivated { color: var(--cbat-muted, #999); } /* ci-exempt - #999 is CSS var fallback */
.status-expired { color: var(--cbat-error); }
.dropcard_td .status-active { color: var(--success); font-weight: bold; }
.td-nowrap { white-space: nowrap; }

.portal-link-section {
  margin-top: 15px;
  padding: 10px;
  background: var(--cbat-bg-secondary, #f5f5f5); /* ci-exempt - #f5f5f5 is CSS var fallback */
  border-radius: 4px;
}
.portal-link-heading { margin: 0 0 8px 0; }
.portal-link-desc { font-size: var(--cbat-font-size-sm); margin: 0 0 8px 0; }
.portal-link-row { display: flex; align-items: center; gap: 8px; }
.portal-link-input { flex: 1; padding: 4px 8px; font-size: var(--cbat-font-size-sm); }

.card-error-msg { color: var(--cbat-error); display: none; margin: 8px 0; }
.card-loading { display: none; }
.vault-cta { text-align: center; padding: 20px; }
.text-muted { color: var(--cbat-muted); }

/* TokenEx iframe container */
.tokenex-iframe-container { width: 30%; min-width: 250px; }

/* Login/Auth page logo styling */
.login-logo {
  margin-bottom: 10px;
  max-width: 100%;
}

/* Table column alignment utilities — use instead of inline text-align styles */
.col-right  { text-align: right; }
.col-left   { text-align: left; }
.col-center { text-align: center; }

/* Utility spacing classes */
.mb-20 {
  margin-bottom: 20px;
}
/* END GENERIC STYLING */

/* Responsive table styles - to set up - table class="responsivetable" each td has data-title set to header of column */
@media only screen and (max-width: 1175px) {
  table.responsivetable,
  table.responsivetable thead,
  table.responsivetable tbody,
  table.responsivetable tr,
  table.responsivetable td {
    display: block;
    border-collapse: none;
  }
  table.responsivetable thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  table.responsivetable tr {
    border: 1px solid #ccc; /* ci-exempt fc-ignore: table border */
  }

  table.responsivetable td {
    border: none;
    border-bottom: 1px solid var(--cbat-border-light);
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    /* Handles things like email addressess and urls */
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-all;
    word-break: break-word;
    hyphens: auto;
  }

  table.responsivetable td:before {
    white-space: nowrap;
    content: attr(data-title);
    font-weight: bold;
    padding-right: 0.5em;
  }
  table.responsivetable td.break {
    flex-direction: column;
  }
}
/* End responsive table styles */

/* Button styles */
.button {
  text-align: center;
  min-height: 30px;
  border: none;
  border-radius: var(--borderRadius);
  font-weight: 400;
  font-family: var(--cbat-font-body);
  font-size: 1em;
  text-decoration: none;
}
.primary-button {
  background-color: var(--main-color);
  color: white;
  cursor: pointer;
  transition: all 0.1s ease;
  text-transform: capitalize;
  padding: 0.25em 0.5em !important;
  box-shadow: var(--box-shadow-level1);
  margin: 0 0.5em !important;
}
.primary-button:hover {
  box-shadow: var(--box-shadow-level2);
}

.flat-primary-button {
  background-color: var(--main-color);
  color: white;
  cursor: pointer;
  transition: all 1s ease;
  box-sizing: border-box;
  border: 3px solid #ffffff; /* ci-exempt fc-ignore: white border */
}

.flat-primary-button:hover {
  background-color: white;
  color: var(--main-color);
  border: 3px solid var(--main-color);
  box-shadow: var(--box-shadow-level1);
}

.primary-button:active {
  transform: translateY(6px);
  box-shadow: var(--box-shadow-level3);
}

.large-button {
  width: 200px;
  height: 50px;
}

.danger-button {
  color: white;
  background-color: var(--errorColor);
  cursor: pointer;
  transition: all 1s ease;
  box-sizing: border-box;
  border: 3px solid #ffffff; /* ci-exempt fc-ignore: white border */
}

.danger-button:hover {
  background-color: white;
  border: 3px solid var(--errorColor);
  color: var(--accent-color);
}
.buttonArea,
.buttonrow {
  display: flex;
  flex-direction: row;
}
.buttonArea button {
  flex: 0 1 auto;
}
.buttonrow {
  margin: 1em 0;
}
.btn-primary[type="submit"],
.button.save {
  border: none;
  color: #ffffff; /* ci-exempt fc-ignore: white text on success button */
  background-color: var(--successColor);
  border: 3px solid var(--successColor);
  transition: all 0.1s ease;
  cursor: pointer;
}
.btn-primary[type="submit"]:hover,
.button.save:hover {
  border-color: var(--successColor);
  background-color: #ffffff; /* ci-exempt fc-ignore: white bg on button hover */
  color: var(--successColor);
}
.button.leads {
  width: 20em;
  max-width: 100%;
  margin: 0 0 1em 0;
}
.btn-warning[type="submit"],
.button.error {
  border: none;
  color: #ffffff; /* ci-exempt fc-ignore: white text on error button */
  background-color: var(--errorColor);
  border: 3px solid var(--errorColor);
  transition: all 0.1s ease;
  cursor: pointer;
}
.btn-warning[type="submit"]:hover,
.button.error:hover {
  border-color: var(--errorColor);
  background-color: #ffffff; /* ci-exempt fc-ignore: white bg on error button hover */
  color: var(--errorColor);
}
.button i {
  margin: 0 0.25em;
}
.button .note {
  font-size: 0.5em;
}
.big-button {
  min-width: 150px;
}

.ic_leads_search_button {
  max-width: 200px !important;
  max-height: 25px !important;
  margin-top: 1.5% !important;
  margin-left: 1.5% !important;
}

.view_todos_search_button {
  max-width: 200px !important;
}

.add_lead_button {
  max-width: 200px !important;
  display: block !important;
  margin: 0 auto !important;
}

.mss_button {
  display: flex !important;
  justify-content: space-between !important;
  margin: 2px auto !important;
  align-items: center !important;
}

.input_button {
  max-width: 200px !important;
}

#potential_group_download_button {
  margin-top: 1% !important;
}

/* END BUTTON STYLES */
/* BEGIN SLIDE/FLIP/FADE TRANSITION STYLES */
.slide-enter {
  transform: translateX(900px);
  opacity: 0;
}

.slide-enter-active {
  transition: 0.5s all ease;
}

.slide-leave-active {
  transition: 0.5s all ease;
  opacity: 0;
  transform: translateX(-900px);
}
.slide-up-enter-active,
.slide-up-leave-active {
  transition: all 0.5s ease;
}

.slide-up-leave-to {
  transform: translateY(-900px);
  opacity: 0;
}

.slide-up-enter {
  transform: translateY(-900px);
  opacity: 0;
}

.flip-enter-active {
  animation: flipCard 0.25s;
}

.flip-leave-active {
  transition: transform 0.25s ease;
  transform: rotateX(-90deg);
}
@keyframes flipCard {
  from {
    transform: rotateX(90deg);
  }
  to {
    transform: rotateX(0deg);
  }
}
.fade-up-enter,
.fade-up-leave-to {
  transform: translateY(100px);
  opacity: 0;
}

.fade-up-enter-active {
  transition: all 1s ease;
}

.fade-up-leave-active {
  position: absolute;
  transition: all 1s ease;
}

.fade-up-move {
  transition: transform 1s ease;
}
/* END SLIDE/FLIP/FADE TRANSITION STYLES */
/* BEGIN NAV STYLES */
.main-nav {
  background-color: var(--main-color);
  width: 100%;
  min-height: 50px;
}
.main-nav .container.content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: var(--maxWidth);
  /* width: 100%; */
  margin: 0 auto;
}

.navbar-brand {
  padding: 0.25em 0.5em;
  min-width: 10%;
}

.navbar-brand img {
  max-height: 80px;
  width: auto;
}

/* Logo containers - ensure consistent behavior */
.cb_image_non_agent_nav,
.cb_image_agent_nav {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.cb_image_non_agent_nav {
  margin-right: 3em;  /* Add space after non-agent logo */
}

.cb_image_agent_nav {
  margin-right: 3em;  /* Match the spacing for consistency */
}

.main-links {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

.nav_hr {
  width: 99% !important;
  margin-top: 1px !important;
  margin-bottom: 1px !important;
}

.nav-box {
  color: white;
  text-decoration: none;
  text-align: center;
  padding: 1em 0.75em;
  font-family: var(--cbat-font-heading);
  position: relative;
  transition: all 0.3s ease;
}

/* Removed empty hover rule and red underline animation */

.nav-link {
  color: inherit;
  text-decoration: inherit;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}

.nav-link > .drop-caret {
  padding-left: 0.25em;
  transition: transform 0.7s;
}
.nav-link-bold { font-weight: bold; }
.nav-icon { width: 16px; margin-right: 4px; }

.dropdown-contents {
  flex-direction: column;
  top: 100%;
  left: 0;
  width: auto;
  min-width: 150%;
  background-color: white;
  border-radius: 0 0 4px 4px;
  font-size: 0.85em;
  position: absolute;
  z-index: 200;
  display: none;
  box-shadow: var(--box-shadow-level3);
}
/* For last menu item - accounts */
.main-nav .account-dropdown {
  margin-right: 2em;
}
.main-nav .account-dropdown .dropdown-contents {
  left: auto;
  right: 0;
}

.dropdown-link {
  text-decoration: none;
  color: var(--main-color);
  display: block;
  text-align: left;
  padding: 1em 1.25em;
  white-space: nowrap;
  font-size: 1.1rem; /* Increased for better readability */
}
.dropdown-link:hover {
  background-color: var(--main-color);
  color: white;
}
/* Logout button — resets native button styles to match dropdown-link appearance */
.nav-logout-form { margin: 0; padding: 0; }
.nav-logout-btn { width: 100%; background: none; border: none; cursor: pointer; font-family: var(--cbat-font-body); }
/* Muted/pending nav links — not clickable, visually de-emphasised */
.dropdown-link-muted { color: var(--cbat-text-muted); cursor: default; }
.dropdown-link-muted:hover { background-color: transparent; color: var(--cbat-text-muted); }

/* nav bar mobile styling */
.hamburger {
  margin-left: auto;
  display: none;
}

@media only screen and (max-width: 1258px) {
  .nav-link {
    font-size: 0.85em;
  }
  .navbar-brand {
    width: 15%;
  }
  .main-nav .container.content {
    justify-content: center;
    padding-right: 1em;
  }
}
@media only screen and (max-width: 1195px) {
  .nav-link {
    font-size: 0.85em;
  }
  .nav-box {
    padding: 1em 0.5em;
  }
  .navbar-brand {
    width: 15%;
  }
}
@media only screen and (max-width: 1130px) {
  .main-nav .container.content {
    flex-wrap: wrap;
  }
  .navbar-brand {
    width: 100%;
    text-align: center;
  }
  .nav-link {
    font-size: 0.95em;
  }
}
@media only screen and (min-width: 791px) {
  .dropdown-menu:hover .dropdown-contents {
    display: block;
  }

  .nav-box:hover {
    color: white; /* Keep text white on hover */
  }
}

/* Progressive spacing reduction to prevent nav overflow - CBAT only.
   TK-2026-00472: raised the first breakpoint from 1525px to 1700px because
   the Inbox button (`.cbat-inbox-nav-box`) was the last item in the nav
   and got pushed off the right edge of the viewport at widths roughly
   between 1400 and 1650px. Compact mode now kicks in earlier so there's
   room for everything. */
@media only screen and (max-width: 1700px) {
  .main-nav:not(.cb_main_nav) .nav-box {
    padding: 0 10px;
    font-size: 15px;
  }
  .main-nav:not(.cb_main_nav) .dropdown-link {
    padding: 8px 10px;
  }
  .main-nav:not(.cb_main_nav) .navbar-brand img {
    max-width: 115px;
  }
}

/* TK-2026-00472: pin the Inbox button to the right edge of the navbar so
   it always stays visible. The flex-shrink approach wasn't enough — at
   widths between roughly 1260 and 1525px the OTHER nav items (Trips,
   Booking Engine, Commissions, …, Account) expand to fill the centered
   container's width and push the inbox past the right edge regardless
   of its shrink setting. Taking the inbox out of the flex flow with
   absolute positioning is the only way to guarantee visibility.

   The .main-nav already has implicit positioning context for `position:
   absolute` (it's the closest positioned ancestor once we mark it
   `position: relative` below). Other nav items get `padding-right` on
   the container at the narrow breakpoints so they don't visually overlap. */
.main-nav {
  position: relative;
}
.main-nav .cbat-inbox-nav-box {
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
/* Reserve space on the right of the centered container at the widths where
   the inbox would otherwise overlap the rightmost nav items (Account).
   Also widen the container from `--maxWidth: 90%` to full viewport width
   at these breakpoints, otherwise the flex children (logo + main-links +
   .account-dropdown) overflow the 90% area and Account ends up underneath
   the absolutely-positioned inbox. */
@media only screen and (max-width: 1700px) {
  .main-nav:not(.cb_main_nav) .container.content {
    width: 100%;
    /* Inbox button is 88px wide and pinned at right: 1em (16px), so its
       left edge sits 104px from the viewport right edge. Reserve 110px
       to keep Account clear of the inbox with a small safety margin. */
    padding-right: 110px;
  }
}
/* At ≤1175px an existing rule in templates/utilities/_chat_widget.html
   takes over and renders the inbox as a fixed floating FAB at the
   bottom-right (position: fixed; bottom: 20px; right: 20px). That rule
   has higher specificity than ours and wins for `position` and `right`,
   but it does NOT override `top` or `transform` — so our desktop
   `top: 50%; transform: translateY(-50%)` would still apply, stretching
   the FAB vertically between top: 50% and bottom: 20px. Reset them so
   the FAB rule can lay out cleanly. */
@media only screen and (max-width: 1175px) {
  .main-nav .cbat-inbox-nav-box {
    top: auto;
    transform: none;
  }
  .main-nav:not(.cb_main_nav) .container.content {
    padding-right: 0;
  }
}

@media only screen and (max-width: 1400px) {
  .main-nav:not(.cb_main_nav) .nav-box {
    padding: 0 8px;
    font-size: 14px;
  }
  .main-nav:not(.cb_main_nav) .dropdown-link {
    padding: 7px 8px;
    font-size: var(--cbat-font-size-sm);
  }
  .main-nav:not(.cb_main_nav) .navbar-brand img {
    max-width: 110px;
  }
}

@media only screen and (max-width: 1250px) {
  .main-nav:not(.cb_main_nav) .nav-box {
    padding: 0 8px;
    font-size: var(--cbat-font-size-sm);
  }
  .main-nav:not(.cb_main_nav) .dropdown-link {
    padding: 6px 8px;
    font-size: var(--cbat-font-size-xs); /* ci-exempt - compact nav at narrow breakpoint */
  }
  .main-nav:not(.cb_main_nav) .navbar-brand img {
    max-width: 110px;
  }
}

/* CBAT navigation only - not CB site */
@media only screen and (max-width: 1175px) {
  .main-nav:not(.cb_main_nav) .hamburger {
    display: flex;
    order: 0;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .hamburger-active {
    color: var(--main-color);
    background-color: white;
  }

  .main-nav:not(.cb_main_nav) .container.content {
    flex-wrap: wrap;
  }

  .main-nav:not(.cb_main_nav) .main-links {
    width: 100%;
    order: 1;
    flex-wrap: wrap;
    pointer-events: none;
    max-height: 0px;
    transition: max-height 0.6s ease;
    display: block;
  }

  .main-nav:not(.cb_main_nav) .main-links.nav-active {
    max-height: none;
    overflow-y: visible;
    pointer-events: all;
  }
  
  /* Mobile Navigation Styles - CBAT only */
  .main-nav:not(.cb_main_nav) .nav-box {
    display: block;
    width: 100%;
    float: none;
  }
  
  .main-nav:not(.cb_main_nav) .dropdown-menu {
    position: static;
    display: block;
    width: 100%;
  }
  
  /* Hide external nav elements by default on mobile - CBAT only */
  .main-nav:not(.cb_main_nav) .container > .nav-box:not(.hamburger):not(.main-links),
  .main-nav:not(.cb_main_nav) .container > .dropdown-menu {
    display: none;
  }
  
  /* Show external dropdowns when mobile nav is active - CBAT only */
  .main-nav:not(.cb_main_nav) .container.mobile-nav-active > .nav-box:not(.hamburger):not(.main-links),
  .main-nav:not(.cb_main_nav) .container.mobile-nav-active > .dropdown-menu {
    display: block;
    width: 100%;
    order: 2;
    margin-top: 10px;
  }
  
  /* Mobile menu typography and spacing */
  .main-nav:not(.cb_main_nav) .main-links.nav-active .nav-box,
  .main-nav:not(.cb_main_nav) .main-links.nav-active .nav-link,
  .main-nav:not(.cb_main_nav) .main-links.nav-active .dropdown-link,
  .main-nav:not(.cb_main_nav) .container.mobile-nav-active .nav-box,
  .main-nav:not(.cb_main_nav) .container.mobile-nav-active .nav-link,
  .main-nav:not(.cb_main_nav) .container.mobile-nav-active .dropdown-link {
    font-size: 16px;
    padding: 12px 16px;
  }
  
  .main-nav:not(.cb_main_nav) .main-links.nav-active .dropdown-link,
  .main-nav:not(.cb_main_nav) .container.mobile-nav-active .dropdown-link {
    padding: 10px 20px;
  }
  
  /* Mobile menu hover states */
  .main-nav:not(.cb_main_nav) .main-links.nav-active .nav-box:hover,
  .main-nav:not(.cb_main_nav) .main-links.nav-active .nav-link:hover,
  .main-nav:not(.cb_main_nav) .container.mobile-nav-active .nav-box:hover,
  .main-nav:not(.cb_main_nav) .container.mobile-nav-active .nav-link:hover,
  .main-nav:not(.cb_main_nav) .main-links.nav-active .dropdown-link:hover,
  .main-nav:not(.cb_main_nav) .container.mobile-nav-active .dropdown-link:hover {
    color: white;
    background-color: var(--main-color);
  }
  
  /* Hamburger icon hover state */
  .hamburger .nav-box:hover,
  .hamburger .nav-toggle:hover {
    background-color: transparent;
    color: inherit;
  }
  
  .hamburger:hover .bar-1,
  .hamburger:hover .bar-2,
  .hamburger:hover .bar-3 {
    background-color: white;
  }

  .bar-1,
  .bar-2,
  .bar-3 {
    width: 25px;
    height: 5px;
    background-color: white;
    border-radius: 2px;
    transition: 0.7s;
    margin: 3px 0;
  }

  .hamburger-active .bar-1 {
    transform: rotate(-45deg) translate(-7px, 4px);
    background-color: var(--main-color);
  }

  .hamburger-active .bar-2 {
    opacity: 0;
  }

  .hamburger-active .bar-3 {
    transform: rotate(45deg) translate(-7px, -5px);
    background-color: var(--main-color);
  }

  .main-nav:not(.cb_main_nav) .dropdown-menu.nav-box {
    position: relative;
  }
  .main-nav:not(.cb_main_nav) .main-links .nav-box {
    visibility: hidden;
  }
  .main-nav:not(.cb_main_nav) .main-links.nav-active .nav-box {
    visibility: visible;
  }

  .nav-link {
    width: 100%;
    display: block;
    text-align: left;
  }

  .dropdown-contents {
    width: 100%;
    position: relative;
    z-index: 0;
    box-shadow: none;
    border: none;
    overflow-y: hidden;
    padding-bottom: 0px;
    font-size: 1em;
    background-color: transparent;
    max-height: 0px;
    display: block;
    transition: max-height 0.7s;
    pointer-events: none;
  }

  .nav-box.active-dropdown {
    /* Keep text visible when dropdown is active */
    color: white;
  }
  
  .active-dropdown::after {
    width: 100%;
  }

  .dropdown-contents.active-dropdown {
    max-height: 1000px;
    pointer-events: all;
    background-color: white;
  }

  .rotate-caret {
    transform: rotate(180deg) translateX(5px);
  }
  .dropdown-link {
    padding: 0.5em 1.25em;
  }
  /* specific styles for account dropdown on mobile */
  .main-nav .account-dropdown .dropdown-contents {
    left: 0;
    right: auto;
    position: absolute;
    width: auto;
    min-width: 200%;
    padding: 0.5em 1em 0 0;
  }
  .main-nav .account-dropdown .dropdown-contents.active-dropdown {
    box-shadow: var(--box-shadow-level3);
  }
}
/* END NAV STYLES */

/* HOME PAGE STYLES */

/* Payday Card Styles */
.payday-card-clickable {
  transition: all 0.3s ease;
}

.payday-card-clickable:hover {
  box-shadow: var(--box-shadow-level3);
  transform: translateY(-2px);
}

.payday-amount-container {
  text-align: center;
  padding: 15px;
}

.payday-status-label {
  font-size: 0.9em;
  color: var(--cbat-text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 10px 0;
  font-weight: 600;
}

.payday-amount-value {
  font-size: 2.5em;
  font-weight: bold;
  color: var(--main-color);
  margin: 0 0 15px 0;
}

.payday-details {
  border-top: 1px solid var(--borderColor);
  padding-top: 15px;
  margin-top: 15px;
}

.payday-details p {
  margin: 5px 0;
  font-size: 0.95em;
  color: var(--cbat-text);
}

.payday-note {
  font-size: 0.9em;
  color: var(--cbat-text-muted);
  font-style: italic;
  margin-top: 10px;
}

.payday-note-under-min {
  color: var(--error);
  font-size: 1.1em;
  font-weight: bold;
}

.payday-note-incomplete {
  color: var(--error);
  font-size: 0.95em;
  font-weight: bold;
  font-style: normal;
  background-color: var(--error-bg);
  padding: 8px 12px;
  border-radius: 4px;
  border-left: 3px solid var(--error);
  margin-top: 10px;
}

.payday-note-incomplete a {
  color: var(--error);
  text-decoration: underline;
}

/* Payday toggle visibility */
.payday-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.payday-toggle-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--cbat-text-on-primary);
  cursor: pointer;
  padding: 4px 6px;
  font-size: var(--cbat-font-size-sm);
  opacity: 0.7;
  transition: opacity 0.2s ease;
  line-height: 1;
}

.payday-toggle-btn:hover {
  opacity: 1;
}

.payday-hidden .home-card-body,
.payday-hidden .home-card-footer {
  display: none;
}

.home-container {
  width: 100%;
}

/* Spacer utilities for home page layout */
.home-spacer-sm { height: 5px; }
.home-spacer-lg { height: 10px; }

/* Onboarding banners for new agents - Gold Standard */
.onboarding-banner {
  border-radius: 8px;
  padding: 1em 1.5em;
  margin: 0.5em;
  margin-bottom: 1em;
  border-left: 4px solid;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--cbat-text) 8%, transparent);
}
.onboarding-banner-warning {
  background-color: color-mix(in srgb, var(--warning) 12%, var(--cbat-bg));
  border-left-color: var(--warning);
}
.onboarding-banner-info {
  background-color: color-mix(in srgb, var(--info) 12%, var(--cbat-bg));
  border-left-color: var(--info);
}
.onboarding-banner-danger {
  background-color: color-mix(in srgb, var(--error) 12%, var(--cbat-bg));
  border-left-color: var(--error);
}
.onboarding-banner-primary {
  background-color: color-mix(in srgb, var(--cbat-primary) 12%, var(--cbat-bg));
  border-left-color: var(--cbat-primary);
}
.onboarding-banner-content {
  display: flex;
  align-items: center;
  gap: 1em;
  flex-wrap: wrap;
}
.onboarding-banner-icon {
  font-size: 2em;
}
.onboarding-banner-text {
  flex: 1;
  min-width: 200px;
}
.onboarding-banner-text strong {
  display: block;
  font-size: 1.1em;
  margin-bottom: 0.25em;
  color: var(--cbat-text);
}
.onboarding-banner-text p {
  margin: 0;
  color: var(--cbat-text-secondary);
}
.onboarding-banner-btn {
  background: linear-gradient(135deg, var(--cbat-primary) 0%, color-mix(in srgb, var(--cbat-primary), black 20%) 100%);
  color: white;
  padding: 0.75em 1.5em;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--cbat-primary) 30%, transparent);
  transition: all 0.3s ease;
}
.onboarding-banner-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--cbat-primary) 40%, transparent);
  color: white;
  text-decoration: none;
}

/* Dark Mode Support */

/* Dark mode - form inputs use a slightly elevated background for contrast against the page.
   Uses a 15% text-mix which gives reliable separation regardless of theme color values.
   Excludes buttons (submit/button/reset) and toggles (checkbox/radio/file)
   so they keep their existing button styling. */
html[data-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="image"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background-color: color-mix(in srgb, var(--cbat-bg), var(--cbat-text) 15%);
  color: var(--cbat-text);
  border-color: var(--cbat-border);
  color-scheme: dark;
}

/* Dark mode - placeholder text needs explicit color since browser reduces opacity
   of the input's color, which can make it invisible on a dark background. */
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--cbat-text-muted);
  opacity: 1;
}

html[data-theme="dark"] .onboarding-banner {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .onboarding-banner-warning {
  background-color: color-mix(in srgb, var(--warning) 20%, #1a1a1a); /* ci-exempt - dark mode fallback in color-mix */
}
html[data-theme="dark"] .onboarding-banner-info {
  background-color: color-mix(in srgb, var(--info) 20%, #1a1a1a); /* ci-exempt - dark mode fallback in color-mix */
}
html[data-theme="dark"] .onboarding-banner-danger {
  background-color: color-mix(in srgb, var(--error) 20%, #1a1a1a); /* ci-exempt - dark mode fallback in color-mix */
}
html[data-theme="dark"] .onboarding-banner-primary {
  background-color: color-mix(in srgb, var(--cbat-primary) 20%, #1a1a1a); /* ci-exempt - dark mode fallback in color-mix */
}

/* Dark mode - Announcements text visibility
   Use !important + * to override hardcoded inline colors from TinyMCE content */
html[data-theme="dark"] .announcements_text,
html[data-theme="dark"] .announcements_text * {
  color: var(--cbat-text) !important;
}
html[data-theme="dark"] .announcements_text a,
html[data-theme="dark"] .announcements_text a * {
  color: var(--cbat-primary) !important;
}

/* Status badges for lead list */
.home-column {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 350px;
  max-width: 540px;
}

.home-column-card {
  border-radius: var(--borderRadius);
  border: 1px solid var(--borderColor);
  min-height: fit-content;
  /* max-height: 450px; */
  padding: 0.25em 0.4em;
  margin: 0.5em;
}

.home-card-title {
  padding: 0.6em;
  color: var(--cbat-text-on-primary);
  background-color: var(--cbat-primary-dark);
  font-size: 1.4em;
  box-sizing: border-box;
  text-align: center;
}

.home-card-title h2,
.home-card-title h4 {
  margin: 0;
  font-size: 1em;
  font-weight: bold;
  color: var(--cbat-text-on-primary);
}

.home-card-body {
  padding: 0.75em;
}

.home-card-footer {
  padding: 0.25em 0.75em;
}

.home-image-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--borderColor);
  min-height: 360px;
  /* max-height: 400px; */
  margin: 0.5em;
}

.home-image-caption {
  margin-bottom: 2%;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}

.home-empty-box {
  width: 100%;
  /* height: 100%; */
  /* min-height: 250px; */
  padding-bottom: 25px;
  justify-content: center;
  align-items: center;
  display: flex;
}

a {
  color: var(--cbat-primary);
}
td {
  font-size: 14px;
  padding: 6px 8px;
}

.announcements_text {
  font-size: var(--cbat-font-size-base);
  font-family: var(--cbat-font-heading);
  line-height: 1.6;
  padding: 0 0.25em 0.5em;
}
.announcements_text > *:first-child {
  margin-top: 0;
}
.announcements_text > *:last-child {
  margin-bottom: 0;
}

.announcements_ul {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: -7.5% !important;
}

.promo-ul {
  list-style: none;
  box-sizing: border-box;
}
.promo-link-bullet {
  padding: 5px;
  margin-left: -40px;
  margin-top: -5px;
  margin-bottom: 5px;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.promo-link-bullet:before {
  content: "\26F4";
  box-sizing: border-box;
  font-size: 20px;
  color: var(--cbat-text-secondary) !important;
}
.info-link-bullet {
  padding: 5px;
  margin-left: -30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.info-link-bullet:before {
  content: "\26F1";
  box-sizing: border-box;
  font-size: 20px;
  color: var(--cbat-text-secondary);
}

.promo-link {
  text-decoration: none;
  color: var(--cbat-primary);
  margin-left: 1em;
  font-size: 15px;
  font-family: var(--cbat-font-heading);
}

.quick_links_green {
  color: color-mix(in srgb, var(--success), black 35%); /* contrast-safe: ~5.5:1 on white */
}

.quick_links_red {
  color: var(--error) !important ;
}

.team_leaders_agent_update {
  margin-left: 10px;
  color: var(--error);
}

.to_dos_table {
  width: 100%;
}

.to_dos_table_headings {
  font-size: 17.5px !important;
  font-family: var(--cbat-font-heading) !important;
}

.to_dos_table_link {
  font-size: 15px !important;
  font-family: var(--cbat-font-heading) !important;
}

.to_dos_table_data {
  font-size: 15px !important;
  font-family: var(--cbat-font-heading) !important;
}

.to_dos_table_icon {
  padding-left: 15px;
}

#no_to_dos {
  font-size: 17.5px !important;
  font-family: var(--cbat-font-heading) !important;
  color: var(--error) !important;
}

.card-button {
  border-radius: 8px;
  background-color: var(--cbat-primary);
  color: var(--cbat-text-on-primary); /* ci-exempt - white text on primary blue button */
  width: 50%;
  cursor: pointer;
  opacity: 0.5;
}

.graph {
  width: 350px;
  height: 250px;
  border: 1px solid var(--cbat-border);
  background-color: var(--cbat-bg-secondary);
}
.bar {
  width: 45px;
  margin: 5px;
  display: inline-block;
  position: relative;
  background-color: var(--cbat-border);
  vertical-align: baseline;
}
.chart-div {
  display: block;
  margin: auto auto;
  max-width: 300px;
}
.title-row {
  font-family: var(--cbat-font-body);
  font-size: 16px;
  font-weight: bold;
  color: var(--cbat-text);
}

.data-row {
  font-family: var(--cbat-font-body);
  font-size: 16px;
  font-weight: bold;
  color: var(--cbat-text);
  padding-left: 15px;
}
/* END HOME PAGE STYLES */

/* LOGIN STYLES */
.login-container {
  display: flex;
  align-items: center;
  flex-direction: column;
  min-height: 100vh;
  padding-top: 3em;
}

.login-form {
  border: 1px solid var(--borderColor) !important;
  border-radius: var(--borderRadius);
  padding: 4em 2em !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.form-group {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 5px;
}

.login-form h1 {
  font-weight: 600;
  font-size: 1.75em;
}

/* END LOGIN STYLES */

/* VIEW TRIP STYLES AND DEFAULT TABLE STYLES */

/* ── Trips Search Panel ──────────────────────────────────────────────────── */
#top-search {
  background: var(--cbat-bg);
  border: 1px solid var(--cbat-border);
  border-radius: 8px;
  padding: 20px 24px 18px;
  margin-top: 28px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--cbat-text) 5%, transparent);
}

#top-search h2 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 1.8rem;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--cbat-primary);
}

#top-search .form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  align-items: flex-end;
}

#top-search .input-container {
  display: flex;
  flex-direction: column;
  padding: 0;
  flex: 1;
  min-width: 140px;
  max-width: 230px;
}

#top-search label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--cbat-text-muted);
  margin-bottom: 5px;
  white-space: nowrap;
}

#top-search input[type="text"],
#top-search input[type="date"],
#top-search select {
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--cbat-border);
  border-radius: 5px;
  font-size: 1rem;
  font-family: var(--cbat-font-body);
  color: var(--cbat-text);
  background: var(--cbat-bg);
  width: 100%;
  box-sizing: border-box;
  margin: 0 !important;
}

#top-search input[type="text"]:focus,
#top-search input[type="date"]:focus,
#top-search select:focus {
  outline: none;
  border-color: var(--cbat-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cbat-primary) 15%, transparent);
}

/* "Filter by Date" — styled checkbox toggle button */
#top-search .search-dates-label {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--cbat-border);
  border-radius: 5px;
  font-size: 0.875rem;
  font-family: var(--cbat-font-body);
  font-weight: 600;
  color: var(--cbat-text);
  cursor: pointer;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 0;
}

#top-search .search-dates-label input[type="checkbox"] {
  margin: 0 !important;
  padding: 0;
  border: 1px solid var(--cbat-border);
  border-radius: 3px;
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--cbat-primary);
  flex-shrink: 0;
}

/* Search button — standalone below all filter rows */
#top-search .top_search_search_button {
  display: block;
  width: 240px;
  height: 46px;
  padding: 0;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 16px 0 0 0 !important;
  letter-spacing: 0.5px;
}

/* Date range row — hidden until "Filter by Date" is checked */
.date-filters-hidden {
  display: none;
}

#date_div {
  padding-top: 14px;
  margin-top: 14px;
}

@media only screen and (max-width: 768px) {
  #top-search {
    margin-top: 12px;
    padding: 14px 16px 14px;
  }
  #top-search h2 {
    font-size: 1.3rem;
    margin-bottom: 14px;
    padding-bottom: 8px;
  }
  #top-search .top_search_search_button {
    width: 100%;
  }
  #top-search input[type="text"],
  #top-search input[type="date"],
  #top-search select {
    font-size: 1rem;
  }
}

#results-table h2 {
  text-align: center;
}

#results-table table,
table.default {
  width: 100%;
}

table.booking-table,
table.default {
  border-collapse: collapse;
  border: 1px solid var(--cbat-border);
}

table.booking-table th,
table.booking-table td,
table.default th,
table.default td {
  text-align: center;
  border: 1px solid var(--cbat-border);
  padding: 0.25em 0.5em;
}

table.booking-table tbody tr,
table.booking-table tbody td,
table.default tbody tr,
table.default tbody td {
  font-size: 1em;
}
table.booking-table tbody tr:nth-child(odd) td,
table.default tbody tr:nth-child(odd) td {
  background-color: var(--cbat-bg-secondary);
}

table.booking-table tbody tr:hover td,
table.default tbody tr:hover td {
  background-color: var(--cbat-primary);
  color: var(--cbat-text-on-primary); /* ci-exempt - hover highlight */
}
table.booking-table tbody tr:hover td a,
table.default tbody tr:hover td a {
  color: inherit;
}

/* Blue headers for all sortable booking tables (search trips, gift/promo cert tables) */
table.booking-table.sortable thead th {
  background-color: var(--cbat-primary);
  color: var(--cbat-text-on-primary);
  padding: 0.6em 0.75em;
  font-size: var(--cbat-font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-color: var(--cbat-primary-dark);
}
table.booking-table.sortable thead th a,
table.booking-table.sortable thead th a:visited,
table.booking-table.sortable thead th a:hover {
  color: var(--cbat-text-on-primary) !important;
}

@media only screen and (max-width: 1175px) {
  table.booking-table tbody tr,
  table.default tbody tr {
    padding: 0;
    border: none;
    margin: 1em 0;
  }
  table.booking-table tbody td,
  table.default tbody td {
    padding: 0.5em 0.25em;
    text-align: left;
  }
}
/* END VIEW TRIPS STYLES */

/* STYLES FOR FORMS */

.form-row {
  display: flex;
}

.input-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: auto;
  max-width: 180px;
  padding: 5px;
}

.column-input-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 0.625em;
  margin-right: 0.625em;
}

.column-input-container input,
.column-input-container select {
  width: 100%;
  box-sizing: border-box;
}

.input-button-row {
  width: 100%;
  margin-bottom: 0.625em;
}

.column-form-container .input-button-row {
  text-align: center;
}

.column-form-wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

.column-form-container {
  min-width: 50%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.column-form {
  display: flex;
  flex-direction: column;
  flex: auto;
  min-width: 50%;
}

.horizontal-date-picker {
  display: flex;
  flex-direction: column;
  flex: auto;
  min-width: 25%;
}

@media only screen and (max-width: 960px) {
  .form-row {
    flex-wrap: wrap;
  }
}
/* END FORM STYLES */

/* PAGINATION STYLES */
#pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 0.625em;
}

a.pagination-link {
  width: 60px;
  height: 37px;
  background-color: var(--main-color);
  padding: 5px;
  font-size: 1.1em;
  margin-right: 2px;
  margin-bottom: 2px;
  text-decoration: none;
  color: white;
  text-align: center;
  vertical-align: middle;
  background-image: linear-gradient(#ffffff, #ffffff); /* ci-exempt fc-ignore: white gradient */
  background-repeat: no-repeat;
  background-size: 0% 0%;
  background-position: 50% 50%;
  transition: all 0.7s ease;
  box-sizing: border-box;
  cursor: pointer;
}

a.pagination-link:hover {
  background-size: 100% 100%;
  background-color: white;
  color: var(--main-color);
}

a.pagination-link.disabled,
a.pagination-link.disabled:hover {
  background-color: white;
  border: 2px solid var(--main-color);
  color: var(--main-color);
  pointer-events: none;
}

.page-status {
  display: flex;
  text-align: center;
  justify-content: center;
  width: 100%;
}

.page-status p {
  margin: 0.4em 0 0 0;
}

.page-status .page-num {
  font-weight: 900;
  font-size: 1.1em;
}
/* END PAGINATION STYLES */

/* CONFIRM INPUT STYLES */
.confirm-input-container {
  display: flex;
  width: 100%;
  justify-content: center;
}

.confirm-input-wrapper {
  max-width: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--borderColor);
  margin: 0.625em;
  padding: 15px;
}

.confirm-input-wrapper form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.confirm-input-form-group {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 350px;
  margin: 0.625em;
}

.confirm-input-wrapper p {
  margin: 0;
}
/* END CONFIRM INPUT STYLES */

/* TRAINING SECTION STYLES */
.training-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.training-category-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

.training-category-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: lightgray;
  border-radius: 5px;
  margin: 5px;
  padding: 0.625em;
  height: 300px;
  width: 250px;
  transition: all 0.5s ease;
  cursor: pointer;
}

.training-category-wrapper:hover {
  background-color: var(--main-color);
  color: white;
}

.training-category-wrapper:hover h2 {
  color: white;
}

.training-category-title {
  transition: all 0.5s ease;
}

/* ***  start ArticleTemplate.vue  *** */

.article-template-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.article-template-container {
  max-width: 700px;
  margin: 0 auto;
  background: linear-gradient(white, white) padding-box,
    linear-gradient(to right, lightblue, darkblue) border-box;
  border-radius: 6px;
  border: 6px solid transparent;
  margin-top: 5%;
  margin-bottom: 5%;
  padding: 20px;
}

@media only screen and (max-width: 500px) {
  .article-template-container {
    margin-right: 20px;
    max-width: 380px;
  }
}

.article_template_h3 {
  color: var(--cbat-primary);
}

.atc_border {
  border-bottom: 6px solid transparent;
  border-image: linear-gradient(
    0.25turn,
    rgba(1, 184, 236),
    rgba(8, 8, 97),
    rgba(56, 2, 155, 0) /* ci-exempt fc-ignore: decorative gradient */
  );
  border-image-slice: 1;
  width: 100%;
}

.atc_preview_image_div {
  width: 100%;
  display: flex;
  justify-content: center;
}

.supporting_doc_file {
  color: var(--cbat-primary);
  font-size: large !important;
  text-decoration: underline;
  cursor: pointer;
}

.atc_file_text {
  font-size: large;
}

.article-template-body {
  margin-right: 6px;
  text-align: justify;
  text-justify: inter-word;
}

.atc_button {
  display: block;
  margin: 0 auto;
  margin-top: 7.5%;
  width: 50%;
}

@media only screen and (max-width: 500px) {
  .atc_button {
    width: 80%;
  }
}

/* ***  end ArticleTemplate.vue  *** */

/* ***  start Home.vue  *** */

.training_home_wrapper hr {
  background: linear-gradient(
    to right,
    rgba(0, 212, 255, 1), /* ci-exempt fc-ignore: decorative gradient */
    var(--cbat-primary-dark)
  );
  height: 6px;
}

.training_home_title {
  text-align: center;
}

@media only screen and (max-width: 500px) {
  .training_home_title {
    text-align: center;
    font-size: 1.7em !important;
  }
}

.training_app_instructions {
  font-size: large;
  color: var(--cbat-text);
  text-align: center;
}

@media only screen and (max-width: 500px) {
  .training_app_instructions {
    margin-left: 5%;
    margin-right: 5%;
  }
}

.training_app_search_input {
  width: 33%;
  text-align: center;
  display: block;
  margin: 0 auto !important;
}

@media only screen and (max-width: 500px) {
  .training_app_search_input {
    width: 90%;
  }
}

/* ***  end Home.vue  *** */

/* ***  start Pageinator.vue  *** */

.training_pagination {
  margin-top: 5% !important;
  margin-bottom: 5% !important;
}

/* ***  end Pageinator.vue  *** */

/* ***  start Results.vue  *** */

.training-results-container {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
}

.training-results-item {
  width: 100%;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  color: white;
  background: var(--cbat-primary-dark);
  background: linear-gradient(0deg, lightgray -10%, var(--cbat-primary-dark) 100%);
  padding-top: 2.5%;
  padding-bottom: 2.5%;
  padding-left: 2.5%;
  padding-right: 2.5%;
  margin-top: 2.5%;
  border-radius: 5px;
}

@media only screen and (max-width: 500px) {
  .training-results-item {
    padding-left: 5%;
    padding-right: 5%;
    margin-left: 5%;
    margin-right: 10%;
  }
}

.training-results-heading {
  margin: 2px 0 2px 0;
  color: white;
}

@media only screen and (max-width: 500px) {
  .training-results-heading {
    font-size: 1.4em !important;
  }
}

.small-heading {
  color: white;
  /* color: #256EB7; */
  font-size: 1.1em;
  margin: 0px;
}

@media only screen and (max-width: 500px) {
  .small-heading {
    font-size: 1em !important;
  }
}

@media only screen and (max-width: 500px) {
  .training_results_description {
    text-align: justify;
    text-justify: inter-word;
  }
}

/* ***  end Results.vue  *** */

/* ***  start Suggestions.vue  *** */

.suggestions_h1 {
  text-align: center;
}

.ss_dot {
  color: var(--cbat-primary-light);
}

.training-card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.training-card,
#template_first {
  width: 280px;
  height: 200px;
  background: var(--cbat-primary-dark);
  background: linear-gradient(
    135deg,
    var(--cbat-primary-dark) 0%,
    var(--cbat-primary) 100%
  );
  display: flex;
  flex-direction: column;
  color: white;
  align-items: center;
  text-align: center;
  padding: 20px;
  border-radius: 12px;
  cursor: pointer;
  margin: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px var(--cbat-primary-dark);
  position: relative;
  overflow: hidden;
}

.training-card:hover,
#template_first:hover {
  color: white;
  background: linear-gradient(
    135deg,
    var(--cbat-primary) 0%,
    var(--cbat-primary-light) 100%
  );
  transform: translateY(-3px);
  box-shadow: 0 8px 30px var(--cbat-primary-dark);
}

.training-card:nth-of-type(odd) {
  color: white;
  background: var(--cbat-primary-dark);
  background: linear-gradient(
    315deg,
    var(--cbat-primary-dark) 0%,
    var(--cbat-primary) 100%
  );
}

.training-card:nth-of-type(odd):hover {
  color: white;
  background: linear-gradient(
    315deg,
    var(--cbat-primary) 0%,
    var(--cbat-primary-light) 100%
  );
}

.training_card_title {
  margin-top: 20%;
  margin-bottom: 15px !important;
  color: white;
  font-size: 1.3em;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.training_card_description {
  margin: 0 10px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95em;
  line-height: 1.4;
}

/* Add a subtle decorative element to cards */
.training-card::before,
#template_first::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  transform: rotate(45deg);
  pointer-events: none;
}

/* ***  end Suggestions.vue  *** */

/* ***  start VideoTemplate.vue  *** */

.video-template-wrapper {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  background: linear-gradient(white, white) padding-box,
    linear-gradient(to right, lightblue, darkblue) border-box;
  border-radius: 6px;
  border: 6px solid transparent;
  margin-top: 5%;
  margin-bottom: 5%;
  padding: 20px;
  display: flex;
  justify-content: center;
}

.video-template-container {
  max-width: 1300px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.file-selection {
  cursor: pointer;
  text-decoration: underline;
  color: var(--cbat-primary);
}

.vtc_title {
  text-align: center !important;
}

.training_video {
  margin: 5px;
}

.vtc_content {
  font-size: 1.1em;
  margin-top: 5%;
  margin-bottom: 5%;
  text-align: left;
}

@media only screen and (max-width: 500px) {
  .video-template-wrapper {
    margin-right: 20px;
  }
}

@media only screen and (max-width: 500px) {
  .training_video {
    width: 320px;
    height: auto;
  }
}

@media only screen and (max-width: 500px) {
  .gradient-border {
    width: 330px;
  }
}

@media only screen and (max-width: 500px) {
  .vtc_content {
    text-align: justify;
    text-justify: inter-word;
  }
}

.vtc_link {
  color: var(--cbat-primary) !important;
  font-size: large !important;
  text-decoration: underline;
  cursor: pointer;
}

.vtc_button {
  display: block;
  margin: 0 auto;
  margin-top: 7.5%;
  width: 50%;
}

@media only screen and (max-width: 500px) {
  .vtc_button {
    width: 80%;
  }
}

/* ***  end VideoTemplate.vue  *** */

/* END TRAINING SECTION STYLES */

/* VENDOR PAGE CAROUSEL FIX */
.carouseldiv {
  min-height: 250px;
  text-align: center;
  min-width: 50%;
}
@media only screen and (max-width: 942px) {
  .carouseldiv {
    min-height: 200px;
  }
}
@media only screen and (max-width: 730px) {
  .carouseldiv {
    min-height: 150px;
  }
}
@media only screen and (max-width: 680px) {
  .carouseldiv {
    margin-bottom: 1.5em;
    min-height: 200px;
  }
}
.carouseldiv * {
  height: 100%;
}
.carouseldiv .VueCarousel-pagination {
  height: auto;
  top: 100% !important;
  bottom: auto !important;
  background-color: rgba(0, 0, 0, 0.1);
}
.carouseldiv .VueCarousel-dot,
.carouseldiv .VueCarousel-dot-container {
  margin-top: 0 !important;
}
.carouseldiv .VueCarousel-slide {
  cursor: grab;
}
.carouseldiv .VueCarousel-slide:active {
  cursor: grabbing;
}
/* END VENDOR PAGE CAROUSEL FIX */

/* BEGIN training/view_agency_contact_info/ STYLES */
@media only screen and (max-width: 1175px) {
  table.contact tr {
    margin: 0.5em 0;
  }
  table.contact td {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
}
table.contact tr td:first-child {
  font-weight: bold;
}

/* END OF training/view_agency_contact_info/ STYLES */

b.title {
  font-family: "Impact, fantasy"; /* ci-exempt - decorative display font */
  font-size: 30px;
}
/* Div padding */
div.category-title {
  margin-top: 1.5em;
  margin-right: 0.625em;
  margin-left: 3em;
  margin-bottom: 0.625em;
}
div.category-descr {
  margin-top: 1.5em;
  margin-right: 0.625em;
  margin-left: 6em;
  margin-bottom: 0.625em;
}
div.content-title {
  margin-top: 0.625em;
  margin-right: 0.625em;
  margin-left: 3em;
  margin-bottom: 0.625em;
}

.loading-wheel-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1.2em;
  color: var(--cbat-primary);
  font-weight: 900;
}

.spinner {
  border: 6px solid var(--cbat-border);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border-top-color: var(--cbat-primary);
  border-left-color: var(--cbat-primary);
  animation: spin 1s infinite ease-in-out;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* ****  JOHN GLYNN START EDIT_USER.HTML  **** */

#edit_user_page_header {
  font-family: var(--cbat-font-heading) !important;
  color: var(--error) !important ;
}

#edit_user_warning_message {
  /* text-align:left !important; */
  text-align: center;
}

.eu_agent_name,
.eu_team_leader_name {
  color: var(--cbat-text-secondary);
}

#edit_user_top {
  padding-bottom: 25px;
}

.edit_user_parent {
  white-space: nowrap !important;
}

.eu_title {
  margin-top: 7.5px;
  margin-bottom: 7.5px;
  font-weight: 600;
}

.eu_title,
.eu_field {
  display: inline-block !important;
  font-family: var(--cbat-font-heading);
  font-size: var(--cbat-font-size-lg);
  padding-right: 10px;
  color: var(--cbat-primary);
}

.eu_field {
  color: var(--cbat-text);
  font-weight: bold;
}

.eu_field input {
  font-family: var(--cbat-font-heading);
  font-size: var(--cbat-font-size-base);
  padding: 0.25em;
  color: var(--cbat-text-secondary);
}

#edit_user_first_name input {
  width: 14em;
}

#edit_user_last_name input {
  width: 14em;
}

#edit_user_state select {
  font-family: var(--cbat-font-heading);
  font-size: 16.5px;
  padding: 0.25em;
  width: 16.5em;
  color: var(--cbat-text-secondary);
}

#edit_user_username input {
  width: 14.25em;
}

#edit_user_email input {
  width: 16.75em;
}

#edit_user_commission_rate input {
  width: 10.8em;
}

#edit_user_checkboxes input[type="checkbox"] {
  height: 1.2em;
  width: 1.2em;
}

#edit_user_lock {
  margin-left: 4.5em;
}

#edit_user_lock_reason textarea,
#edit_user_profile_notes textarea {
  font-family: var(--cbat-font-heading);
  font-size: 16.5px;
  color: var(--cbat-text-secondary);
}

#edit_user_reminder_preference select {
  font-family: var(--cbat-font-heading);
  font-size: 16.5px;
  padding: 0.25em;
  width: 5em;
  color: var(--cbat-text-secondary);
}

#edit_user_add_update_btn input {
  width: 22.5em !important;
  margin-top: 0.5em;
  margin-bottom: 2%;
}

#edit_user_button_form {
  padding-top: 1em;
  padding-bottom: 1em;
}

#edit_user_revoke_button {
  width: 22.5em !important;
  background-color: var(--error) !important;
  margin: 0% !important;
}

/* BEGIN ADD USER STYLES */

#add_user_password input {
  width: 14.5em;
}

#add_user_confirm_password input {
  width: 10.25em;
}

#add_user_team_leader select {
  width: 13.25em !important;
  font-family: var(--cbat-font-heading);
  font-size: 16.5px;
  padding: 0.25em;
  color: var(--cbat-text-secondary);
}

#add_user_user_type select {
  width: 15em !important;
  font-family: var(--cbat-font-heading);
  font-size: 16.5px;
  padding: 0.25em;
  color: var(--cbat-text-secondary);
}

#add_user_user_type {
  margin-bottom: 1em;
}

/* VIEW ALL GROUPS  PAGE */

#group_excel_buttons {
  float: right;
}

.excel_button {
  color: white;
  font-weight: bold;
  text-decoration: none;
  padding: 10px;
}

@media only screen and (min-width: 475px) {
  .excel_button_spacer {
    display: inline-block;
  }
}

@media only screen and (max-width: 475px) {
  .excel_button_spacer {
    margin-top: 10px;
    margin-bottom: 10px;
  }
}

@media only screen and (max-width: 475px) {
  .excel_button_dashes {
    display: none;
  }
}

@media only screen and (max-width: 475px) {
  #group_excel_buttons {
    float: none;
  }
}

.gi_tol_green {
  font-weight: bold;
  color: green;
}

.gi_tol_black {
  color: black;
  font-size: 14px;
}

#sgi_search_button {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
  width: 150px !important;
}

.sgi_up {
  text-decoration: none;
}

.fa_icon {
  font-size: 20px;
}

.sgi_title {
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: 5px;
  margin-right: 5px;
}

.sgi_down {
  text-decoration: none;
  transform: rotate(180deg);
}

.sgi_spacer {
  position: relative;
  top: 2.5px;
}

.sgi_green {
  font-weight: bold;
  color: green !important;
}

.sgi_black {
  font-weight: bold;
  color: black;
}

/* START VIEW_GROUP.HTML */

/* start agent view  tab */
.groups_title {
  margin-right: 25px;
}

.groups_title_red {
  color: var(--error);
}

@media screen and (max-width: 500px) {
  .groups_title {
    font-size: 1.4em !important;
  }
}

.agent_view_header {
  text-align: center;
}

.agent_view_table {
  width: 80%;
  margin: 0 auto;
}

.price_advantage_result,
.cb_exclusive_result {
  font-weight: bold;
  color: green;
}

.price_advantage_result:hover,
.cb_exclusive_result:hover {
  font-weight: bold;
  color: white;
}

.agent_view_attention {
  color: var(--error);
  font-size: 1.25em;
  margin-top: 1%;
  margin-bottom: 1%;
  text-align: center;
}

/* end agent view  tab */

/* start summary tab */

#summary_buttons_div {
  margin-top: 2%;
  margin-bottom: 2%;
  /* margin-left: auto;
  margin-right: auto; */
}

#summary_group_notes {
  width: 96%;
  min-height: 200px;
  margin: 0 auto;
  margin-bottom: 2%;
}

.summary_row {
  width: 102%;
}

#summary_cabin_category_breakdown,
#summary_secondary_booking_breakdown,
#summary_amenity_breakdown,
#summary_client_tags {
  display: inline-block;
  width: 45%;
  min-height: 175px;
  margin: 2%;
}

.bubble-card table {
  width: 90%;
}

@media screen and (max-width: 700px) {
  #summary_cabin_category_breakdown,
  #summary_secondary_booking_breakdown,
  #summary_amenity_breakdown,
  #summary_client_tags {
    width: 96%;
  }
}

/* end summary tab */

/* start bookings tab */

@media screen and (max-width: 500px) {
  .no_mobile {
    display: none !important;
  }
}

/* end bookings tab */

/* start passengers tab */

.report_button {
  border-radius: 10px;
  border-style: none !important;
  background: orange;
  color: var(--cbat-bg-secondary);
  text-decoration: none;
  height: 30px;
  width: 300px;
  margin: 2%;
}

.report_button_link {
  text-decoration: none;
  text-transform: none;
  color: var(--cbat-bg-secondary);
  font-size: 1.1em;
  font-weight: bold;
}

@media screen and (max-width: 500px) {
  #passenger_table {
    margin-top: 5% !important;
  }
}

/* end passengers tab */

/* start financials tab */

.financials_heading {
  text-align: center;
}

.financials_ul {
  padding-inline-start: 20px !important;
}

.list-head {
  font-weight: bold !important;
  color: var(--cbat-text-muted);
  line-height: 2em;
}

.reconciled_button_spacer {
  width: 155px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#reconciled_button {
  width: 125px;
  height: 30px;
  margin-top: 10px;
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 10px;
  font-weight: bold;
  color: white;
  cursor: pointer;
  border: none;
  background-color: #228b22; /* ci-exempt fc-ignore: legacy button styling */
  border-radius: 10px;
}

.financials_table_scroll_container {
  max-height: 250px;
  overflow-y: auto;
}

.financials_table_scroll_container thead th {
  position: sticky;
  top: 0;
  background-color: var(--cbat-bg);
  z-index: 1;
}

.financials_table {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2%;
}

.financials_total {
  font-size: 1.1em;
  font-weight: bold !important;
  color: var(--error);
  text-align: center;
}

.add_button_spacer {
  width: 155px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.lower_financials_bubble_card {
  margin-top: 2%;
  margin-bottom: 2%;
}

#group_financials_spacer {
  min-height: 30px;
}

@media screen and (max-width: 500px) {
  .financials_card_container {
    display: block !important;
    margin-right: 20px;
  }
}

@media screen and (max-width: 500px) {
  .financials_bubble_card {
    margin-top: 2% !important;
    margin-bottom: 2% !important;
  }
}

/* end financials tab */

/* start move inventory tab */

.move_inventory_title {
  text-align: center;
  color: var(--main-color);
  font-weight: bold;
  font-size: 1.35em;
}

.in_group {
  float: left;
  margin-left: 7%;
}

.not_in_group {
  float: right;
  margin-right: 7%;
}

@media screen and (max-width: 500px) {
  .not_in_group {
    margin-right: 0%;
    margin-top: 2%;
    float: none;
  }
}

@media screen and (max-width: 500px) {
  .in_group {
    margin-left: 0%;
    margin-top: 2%;
    float: none;
  }
}

/* end move inventory tab */

/* start make group campaign */

.mgc_alert {
  color: var(--error);
}

#gci_form ul {
  list-style-type: none;
}

/* end make group campaign */

/* start rooming list report */

.rlr_heading {
  font-size: 1.5em;
  margin-top: 2.5%;
  margin-bottom: 2.5%;
}

.summary-table {
  width: 80%;
  border: 1px solid;
  border-radius: 5px;
}
.vu-summary-table {
  width: 70%;
  margin: 0 auto;
}

/* Lead page header — title left, action button right */
.lead-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  margin-bottom: 20px;
}
.lead-page-title {
  margin: 0;
  color: var(--cbat-primary);
  font-family: var(--cbat-font-heading);
}

.rlr_spacer {
  margin-left: 20px;
}

.summary_table_ul {
  padding-left: 20px !important;
}

.summary_table_li {
  list-style-type: none !important;
}

table {
  border-collapse: collapse;
}

.table-head {
  background-color: var(--cbat-primary);
  color: var(--cbat-text-on-primary);
  font-weight: 900;
  font-size: 1.1em;
}
tr,
td,
th {
  border: 1px solid;
  padding: 3px;
}

/* end rooming list report */

/* start group finance item */

.gfi_heading {
  font-size: 1.5em;
  margin-top: 2.5%;
  margin-bottom: 2.5%;
  text-align: center;
}

.gfi_subheading {
  text-align: center;
  margin-bottom: 5%;
}

.gfi_subheading a {
  font-size: 1.15em !important;
  text-decoration: none !important;
  margin-top: 5%;
  margin-bottom: 5%;
}

.gfi_red {
  color: var(--error) !important;
}

.gfi_form {
  margin: 0 auto;
  max-width: 900px;
}

.gfi_form_label {
  font-size: 1em;
  color: var(--main-color);
  font-weight: 900;
  font-family: var(--cbat-font-heading);
  margin-bottom: 0.35em;
  margin-top: 0.35em;
}

#gfi_form_button {
  margin-top: 1.25em;
  margin-bottom: 1em;
}

.group-fin-container form {
  max-width: 900px;
  border: 2px solid var(--cbat-primary);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.form-field {
  display: flex;
  flex-direction: column;
}

.agent-comms-container {
  margin-top: 20px;
  border: 2px solid var(--cbat-primary);
  border-radius: 10px;
  padding: 10px;
}

.agent-comms-container table {
  border-collapse: collapse;
}

.agent-comms-container table thead tr th,
.agent-comms-container table tbody tr td {
  border: 1px solid var(--cbat-border);
  padding: 3px;
}

/* end group finance item */

/* Modification request payment status */
.mod-payment-status {
  margin-top: 15px;
  padding: 15px;
  border-radius: 4px;
}

.mod-payment-status h4 {
  margin: 0 0 10px 0;
}

.mod-payment-status table {
  width: 100%;
  font-size: 14px;
}

.mod-payment-status table td {
  padding: 5px 0;
}

.mod-payment-status table td:first-child {
  font-weight: bold;
  width: 40%;
}

/* Modification request price difference */
.mod-price-increase {
  font-weight: bold;
}

.mod-price-note {
  font-size: 14px;
}

.mod-price-note--warning {
  color: var(--warning);
}

.mod-price-note--danger {
  color: var(--error);
}

.mod-price-decrease {
  color: var(--success);
}

.mod-price-neutral {
  color: #666; /* ci-exempt fc-ignore: neutral muted text */
}

/* end modification request payment status */

/* Flight info sections (shared between booking form and inventory change) */
.flight-info-section {
  background-color: #f5f7fa; /* ci-exempt fc-ignore: flight info section background */
  border-radius: 8px;
  padding: 20px;
  margin-top: 20px;
}

.flight-subsection {
  background-color: white;
  border: 1px solid var(--cbat-border-light);
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 15px;
}

.flight-subsection:last-child {
  margin-bottom: 0;
}

.flight-subsection h4,
.flight-subsection h5 {
  margin: 0 0 12px 0;
  font-size: 1em;
  color: var(--cbat-primary, #2c3e50); /* ci-exempt - #2c3e50 is CSS var fallback */
  border-bottom: 1px solid var(--cbat-border-light);
  padding-bottom: 8px;
}

.section-help-text {
  font-size: 0.9em;
  color: #666; /* ci-exempt fc-ignore: muted help text */
  margin-bottom: 15px;
  font-style: italic;
}

.portal-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.portal-form-grid--spaced {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-top: 15px;
}

.portal-form-label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

.portal-form-input {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--cbat-border);
  border-radius: 4px;
}

/* Portal inventory change - payment sections moved to payment-status.css */

.portal-payment-security-note {
  color: #666; /* ci-exempt fc-ignore: muted security note text */
  margin-bottom: 15px;
  font-size: 0.85em;
  font-style: italic;
}

.portal-form-group {
  margin-bottom: 15px;
}

.portal-form-group label,
.portal-form-row__item label {
  display: block;
  font-weight: 500;
  margin-bottom: 5px;
  color: #333; /* ci-exempt fc-ignore: dark label text */
}

.portal-card-mount {
  padding: 12px;
  border: 1px solid var(--cbat-border-light);
  border-radius: 4px;
  background-color: white;
}

.portal-card-errors {
  color: var(--error);
  font-size: 0.85em;
  margin-top: 5px;
}

.portal-tokenex-mount {
  height: 40px;
  border: 1px solid var(--cbat-border-light);
  border-radius: 4px;
  background-color: white;
  padding: 0 8px;
}

.portal-form-row {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}

.portal-form-row__item {
  flex: 1;
}

.portal-exp-row {
  display: flex;
  gap: 10px;
}

.portal-form-select {
  flex: 1;
  height: 40px;
  padding: 0 8px;
  border: 1px solid var(--cbat-border-light);
  border-radius: 4px;
  font-size: 14px;
}

.portal-billing-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--cbat-border-light);
}

.portal-billing-heading {
  margin: 0 0 15px 0;
  font-size: 1em;
  color: #333; /* ci-exempt fc-ignore: dark heading text */
}

.portal-billing-input {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--cbat-border-light);
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.portal-billing-select {
  width: 100%;
  height: 40px;
  padding: 0 8px;
  border: 1px solid var(--cbat-border-light);
  border-radius: 4px;
  font-size: 14px;
}

.portal-form-errors {
  display: none;
  background-color: #ffebee; /* ci-exempt fc-ignore: light error bg (solid, not transparent) */
  color: var(--error);
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 15px;
}

/* end portal inventory change */

/* start add group commission default */

.gcd_heading {
  font-size: 1.5em;
  margin-top: 2.5%;
  margin-bottom: 2.5%;
  text-align: center;
}

.gcd_subheading {
  text-align: center;
  margin-bottom: 5%;
}

.gcd_subheading a {
  font-size: 1.15em !important;
  text-decoration: none !important;
  margin-top: 5%;
  margin-bottom: 5%;
}

.gcd_red {
  color: var(--error) !important;
}

.gcd_form {
  margin: 0 auto;
  max-width: 900px;
}

.gcd_form_label {
  font-size: 1em;
  color: var(--main-color);
  font-weight: 900;
  font-family: var(--cbat-font-heading);
  margin-bottom: 0.35em;
  margin-top: 0.35em;
}

.custom-auto-complete {
  display: flex;
  flex-direction: column;
}

.auto-complete-input {
  /* border: 2px solid red; */
  border: 1px solid var(--borderColor);
  border-radius: var(--borderRadius);
  padding: 0.5em 0.25em;
  margin: 0.25em 0;
  width: 250px !important;
}

/* .auto-complete-suggestions{
  position: absolute;
  cursor: pointer;
  border-right: 2px solid var(--cbat-border-light) !important;
  border-bottom: 2px solid var(--cbat-border-light) !important;
  border-left: 2px solid var(--cbat-border-light) !important;
  border-image: initial;
  border-top: none;
  z-index: 99;
  top: 90%;
  left: 0px;
  right: 0px;
  background-color: rgb(255, 255, 255);
  display: block;
  border-radius: 5px;
} */

.auto-complete-suggestions {
  max-width: 600px;
}

.auto-complete-suggestions div {
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  min-width: 250px;
  border: 2px solid var(--cbat-border-light);
  padding-left: 1.5%;
}

#download_my_agents {
  display: inline-block;
  width: 20%;
  font-size: 1.1em;
  background-color: var(--success) !important; /* ci-exempt - download action uses success green to distinguish from primary search */
  color: white !important;
  text-decoration: none;
  margin-top: 1.5em !important;
  margin-bottom: 1.5em !important;
  padding: 0.5em 1em !important;
}

@media only screen and (max-width: 500px) {
  #download_my_agents {
    width: 98% !important;
    font-size: 1em !important;
    margin: 1% !important;
  }
}

.gcd_agent_input {
  width: 100%;
}

#gcd_form_button {
  margin-top: 1.25em;
  margin-bottom: 1em;
}

#form-percentage-div {
  display: none;
}

#form-flat-amount {
  display: none;
}

/* end add group commission default */

/* END VIEW_GROUP.HTML */

/* START ADD TRIP DOCUMENT */

.add_doc_trip {
  color: var(--cbat-text-secondary);
  font-size: larger;
}

.add_doc_label {
  color: var(--cbat-text-muted);
  font-weight: 900;
  font-size: 1.25em !important;
  display: inline;
}

#add_doc_title_input {
  display: inline-block;
}

#add_doc_title_input input {
  width: 220%;
}

#add_doc_file_input {
  display: inline-block;
}

.upload_trip_doc_line {
  margin-bottom: 2%;
}

.add_doc_warning_wrapper {
  margin-top: 2%;
  margin-bottom: 2%;
  margin: 0 auto;
  text-align: center;
}

.add_doc_warning {
  color: var(--error);
  text-align: left;
  margin-bottom: 5%;
}

#add_doc_return {
  text-decoration: none;
}

#add_doc_submit,
#add_doc_return {
  display: inline-block;
}

#upload_trip_doc_title {
  text-align: center;
}

#upload_trip_doc_info {
  text-align: center;
}

#upload_trip_doc_form_container {
  display: flex;
  justify-content: center;
  align-items: center;
}

#upload_trip_doc_form {
  width: 50%;
}

#upload_document_button_container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 5%;
}

/* END ADD TRIP DOCUMENT */

/* START ADD GROUP DOCUMENT */

.view_group_document_link {
  text-decoration: none;
  font-weight: bolder;
  font-size: 16px;
  font-weight: 900;
  font-family: var(--cbat-font-heading);
}

.view_group_summary_table {
  margin-bottom: 3%;
}

.upload_trip_document_wrapper {
  border: 5px solid #256eb7 !important; /* ci-exempt fc-ignore: modal primary border */
  border-radius: 10px !important;
  width: 65%;
  margin-top: 5%;
}

@media only screen and (max-width: 475px) {
  #upload_trip_doc_form {
    width: 80%;
  }
}

@media only screen and (max-width: 475px) {
  .upload_trip_document_wrapper {
    width: 90%;
  }
}

.errorlist {
  list-style: none;
  color: var(--error);
  font-size: larger;
  width: 80%;
  margin: 0 auto;
}

.errorlist li {
  margin-bottom: 1% !important;
}

/* END ADD GROUP DOCUMENT */

/* START QUICK SEARCH */

#quick_search_container {
  border: 5px solid #256eb7 !important; /* ci-exempt fc-ignore: modal primary border */
  border-radius: 10px !important;
  width: 80%;
  margin-top: 5%;
  margin: 10% auto;
}

#quick_search_container h2 {
  text-align: center;
  font-size: 2.5em;
  margin-top: 5%;
  margin-bottom: 0% !important;
}

#quick_search_id,
#quick_search_name {
  width: 65%;
  margin-top: 5%;
  margin: 2.5% auto;
}

.quick_search_sub_heading {
  color: var(--cbat-text-secondary);
  text-align: center;
  font-size: 1.25em;
  font-weight: bold;
  margin-top: 0% !important;
  margin-bottom: 7.5%;
}

.quick_search_interior {
  margin: 0 auto 2.5%;
  width: 100%;
  text-align: center;
}

.quick_search_label {
  color: var(--cbat-text-secondary);
  font-size: 1.25em;
  margin-right: 2.5%;
}

.quick_search_button_div {
  width: 50%;
  margin: 2.5% auto 5%;
}

.quick_search_search_button {
  color: white;
  background-color: var(--cbat-primary);
}

#close_quick_search_btn {
  font-size: 1.25em !important;
  margin: 0 auto;
  display: block;
  margin-bottom: 5%;
  padding: 2% 10% !important;
}

@media (max-width: 475px) {
  .quick_search_search_button {
    margin: 0 !important;
  }
}

/* END QUICK SEARCH */

.search_trip_url:visited {
  color: purple;
}

/* CONTRACT */

.contract_header_image {
  display: block;
  margin: 0 auto;
}

.contract_intro_text {
  margin: 20px auto;
  padding: 20px;
  max-width: 700px;
  text-align: left;
}

.contract_intro_text p {
  margin-bottom: 15px;
  line-height: 1.6;
}

.contract_intro_text ul {
  margin: 10px 0 15px 20px;
  list-style-type: disc;
}

.contract_intro_text ul li {
  margin-bottom: 8px;
  line-height: 1.5;
}

.user_contract_warning {
  outline: 5px solid var(--red);
  width: 60%;
  border-radius: 5px;
}

.user_contract_warning_text {
  margin-left: 5%;
  margin-right: 5%;
  font-size: 1.25em;
  text-align: center;
}

.contract_page_title {
  font-size: 1.75em !important;
  text-align: center;
}

.contract_page_heading {
  text-align: center;
  font-size: 1.25em;
}

.contract_text_wrapper {
  margin-left: 4.5%;
  margin-right: 2.5%;
}

.user_sign_new_contract {
  margin: 0 auto !important;
  width: 100%;
  height: 380px;
  overflow-y: scroll;
  outline: 2px solid #ddddde !important ; /* ci-exempt fc-ignore: contract viewer border */
}

.user_sign_new_contract ul li {
  list-style: none;
}

.contract_definations {
  font-size: 1.35em !important;
  color: var(--main-color);
}

.def_bold {
  font-size: larger !important;
  font-weight: 900 !important;
}

.contract_column {
  display: flex;
}

.contract_number_div {
  flex: 7%;
}

.contract_number_div p {
  font-weight: 900 !important;
}

.contract_text_div {
  flex: 93%;
}

.contract_ul_column {
  display: flex;
  width: 100%;
}

.contract_ul_number_div {
  flex: 10%;
}

.contract_ul_number_div p {
  font-weight: 900 !important;
}

.contract_ul_text_div {
  flex: 100%;
}

.print_user_agreement_text {
  text-align: center;
}

.contract_hidden {
  display: none;
}

.contract_visible {
  display: block;
}

#fake_contract_button {
  background: var(--cbat-border) !important;
  display: inline-block;
  z-index: -1;
}

#fake_contract_button[disabled] {
  position: relative;
  z-index: -1;
}

.contract_button_wrapper {
  margin-top: 5%;
  margin-bottom: 10%;
}

.contract_closing_text {
  text-align: center;
  font-size: 1.15em;
}

.contract_signed_message {
  color: var(--main-color);
  text-align: center;
  font-size: 1.35em;
  font-weight: bold;
}

.spinner_button {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 16px;
  background: var(--main-color);
  border: none;
  border-radius: 2px;
  cursor: pointer;
}

.spinner_button:active {
  background: var(--main-color);
}

.spinner_button__text {
  font: 20px Raleway, sans-serif;
  color: #ffffff; /* ci-exempt fc-ignore: white text on spinner button */
  transition: all 0.2s;
}

.spinner_button--loading .spinner_button__text {
  visibility: hidden;
  opacity: 0;
}

.spinner_button--loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border: 4px solid transparent;
  border-top-color: #ffffff; /* ci-exempt fc-ignore: white spinner border */
  border-radius: 50%;
  animation: button-loading-spinner 1s ease infinite;
}

@keyframes button-loading-spinner {
  from {
    transform: rotate(0turn);
  }

  to {
    transform: rotate(1turn);
  }
}

@media only screen and (max-width: 500px) {
  #user_new_contract {
    width: 96%;
    margin: 0 4% 0 0;
  }
}

@media only screen and (max-width: 500px) {
  .contract_page_title {
    font-size: 1.35em !important;
  }
}

@media only screen and (max-width: 500px) {
  .contract_page_heading {
    font-size: 0.95em !important;
  }
}

@media only screen and (max-width: 500px) {
  .contract_definations_ul {
    padding-left: 5% !important;
  }
}

@media only screen and (max-width: 500px) {
  .contract_closing_text {
    font-size: 0.95em !important;
  }
}

@media only screen and (max-width: 500px) {
  .contract_text_div {
    flex: 82.5%;
  }
}

@media only screen and (max-width: 500px) {
  .contract_ul_text_div {
    flex: 75%;
  }
}

@media only screen and (max-width: 500px) {
  .contract_nested_ul {
    padding-left: 5% !important;
  }
}

/* ****  START CRUISE BROTHERS MODAL  **** */

.modal {
  max-width: 100% !important;
  width: 100% !important;
  background: transparent !important;
}

#cruise_brothers_modal {
  z-index: auto;
  background-color: rgba(123, 186, 209, 0.4) !important; /* ci-exempt fc-ignore: decorative overlay */
  animation: fadein 1.5s;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#cruise_brothers_modal_content {
  z-index: 500;
}

#cb_modal_body {
  display: block !important;
  width: 100% !important;
}

#cb_modal_container {
  border: 5px solid #256eb7 !important; /* ci-exempt fc-ignore: modal primary border */
  border-radius: 10px !important;
  margin: 10% auto;
}

.cb_modal_image {
  display: block;
  margin: 0 auto;
  padding-top: 7.5%;
  max-width: 200px;
  width: auto;
  height: auto;
}

.cb_modal_title h2 {
  font-size: 1.75em !important;
  text-align: center;
}

.cb_modal_loader {
  margin: 0 auto;
  color: var(--main-color);
  width: fit-content;
  font-family: monospace;
  font-size: 1.65em;
  clip-path: inset(0 100% 0 0);
  animation: l5 2s steps(11) infinite;
}
.cb_modal_loader:before {
  content: "loading...";
}
@keyframes l5 {
  to {
    clip-path: inset(0 -1ch 0 0);
  }
}

.cb_modal_text_div {
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 2.5%;
}

.cb_modal_text_div p {
  font-size: 1.25em !important;
}

/* ****  END CRUISE BROTHERS MODAL  **** */

.upload_documents_button_div_promos {
  text-align: center;
  margin-top: 2.5%;
  margin-bottom: 2.5%;
}

.upload_documents_button_div_promos button a {
  color: white;
  text-decoration: none;
}

.upload_documents_sub_title_promos {
  margin-left: 5%;
}

/* ****  Welcome to CBAT Modal  **** */

#welcome_to_cbat_modal {
  display: block;
}

@media screen and (max-width: 819px) {
  .welcome_to_cbat_title_container h2 {
    text-align: center;
  }
}

@media screen and (max-width: 925px) {
  #welcome_to_cbat_image_container {
    width: 95% !important;
  }
}

#welcome_to_cbat_modal_content {
  margin: 25vh auto !important;
  width: 40% !important;
}

@media screen and (max-width: 819px) {
  #welcome_to_cbat_modal_content {
    margin: 25vh auto !important;
    min-height: 30vh !important;
    padding-top: 3vh !important;
    width: 80% !important;
  }
}

@media screen and (max-width: 435px) {
  #welcome_to_cbat_modal_content {
    margin: 32vh auto !important;
    min-height: 30vh !important;
    padding-top: 4.5vh !important;
    width: 85% !important;
  }
}

@media screen and (max-width: 819px) {
  #welcome_to_cbat_image_container {
    text-align: center;
  }
}

.welcome_to_cbat_button_container {
  margin-top: 4.5%;
  margin-bottom: 4.5%;
  width: 100%;
  text-align: center;
}

.welcome_to_cbat_title_container h2 {
  text-transform: uppercase;
  text-align: center;
}

#welcome_to_cbat_modal_container {
  border-image: linear-gradient(#2e70bc, #97d8da) 30; /* ci-exempt fc-ignore: decorative modal border gradient */
  border-width: 5px;
  border-style: solid;
  width: 100% !important;
}

#welcome_to_cbat_image_container {
  text-align: center;
}

#go_to_promo_link {
  text-decoration: none;
  padding-top: 1.5%;
  padding-bottom: 1.5%;
  padding-left: 24.75%;
  padding-right: 24.75%;
  background-color: #13a9b8 !important; /* ci-exempt fc-ignore: promo link button */
}

@media screen and (min-width: 1600px) {
  #go_to_promo_link {
    padding-left: 22.75%;
    padding-right: 22.75%;
  }
}

@media screen and (max-width: 435px) {
  #go_to_promo_link {
    margin-top: 5%;
    padding-left: 22.75%;
    padding-right: 22.75%;
  }
}

#close_welcome_to_cbat_btn {
  margin-top: 2.5%;
  padding-top: 1.5%;
  padding-bottom: 1.5%;
  padding-left: 16.75%;
  padding-right: 16.75%;
  width: auto !important;
}

@media screen and (max-width: 435px) {
  #close_welcome_to_cbat_btn {
    margin-top: 5%;
    padding-left: 8.75%;
    padding-right: 8.75%;
  }
}

#lower_welcome_button_container {
  margin-bottom: 9%;
}

/* **** END Welcome to CBAT Modal  **** */

/* start view_blast.html */

/* Dark header row — matches booking-table.sortable standard */
.view_blast_table thead th,
.view_blast_title {
  background-color: var(--cbat-primary);
  color: var(--cbat-text-on-primary);
  font-size: var(--cbat-font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 0.6em 0.75em;
  border-color: var(--cbat-primary-dark);
}

.email_template_subject {
  color: var(--cbat-primary);
}

/* end view_blast.html */

/* ****  View Group  **** */

.card-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
}

.bubble-card {
  border: 2px solid var(--cbat-primary);
  border-radius: 10px;
  border-radius: 10px;
}

.bubble-card ul {
  list-style: none;
}
.bubble-card table {
  border-collapse: collapse;
}

.bubble-card table thead tr th,
.bubble-card table tbody tr td {
  border: 1px solid var(--cbat-border);
  padding: 3px;
}

.list-head {
  font-weight: 900;
  font-size: 1.1em;
}
.sub-list {
  list-style: none;
}
.sub-list li {
  display: inline-block;
}
.sub-list li i {
  color: var(--cbat-primary);
}

.bookings-list-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

.booking-list-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
  border-radius: 10px;
  border: 2px solid var(--cbat-primary);
  max-width: 1500px;
  padding: 20px;
}

.booking-list-container table {
  border: 1px solid var(--cbat-border);
  border-collapse: collapse;
}

.booking-list-container table thead tr th,
.booking-list-container table tbody tr td {
  border: 1px solid var(--cbat-border);
  padding: 3px;
}

.flat-primary-button.disabled {
  cursor: not-allowed;
}

.flat-primary-button.disabled:hover {
  background-color: inherit;
}
.title-span {
  width: 48%;
  margin-top: 15px;
  margin-bottom: 15px;
  font-weight: bold;
  color: var(--main-color);
  font-size: 22px;
}
.top-button {
  width: 125px;
  height: 30px;
  margin-top: 10px;
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 10px;
  font-weight: bold;
  color: white;
  cursor: pointer;
  border: none;
  background-color: #a1c2f7; /* ci-exempt fc-ignore: banner component styling */
  border-radius: 10px;
  z-index: 1;
  position: relative;
}
.bottom-banner {
  height: 110%;
  width: 80%;
  background-color: #a1c2f7; /* ci-exempt fc-ignore: banner component styling */
  border-radius: 30px;
}
.bottom-table {
  text-align: center;
  width: 50%;
  font-size: 16px;
  color: white;
  margin: 0 0;
}

/* **** End View Group  **** */

/* ****  Start Reports Home  **** */

#reports_home_title {
  color: rgb(96, 97, 97); /* ci-exempt fc-ignore: reports title color */
  margin-bottom: 2.5% !important;
}

.reports_home_sub_title {
  position: relative;
  font-size: 1.3em !important;
  margin-bottom: 2%;
  margin-left: 2%;
  text-align: left !important;
}

.reports_home_sub_title::before {
  content: "";
  position: absolute;
  top: 120%;
  width: 45%;
  left: 0;
  height: 5px;
  border-radius: 2px;
  background: linear-gradient(111.3deg, #256eb7 9.6%, #b92229 93.6%); /* ci-exempt fc-ignore: decorative underline gradient */
}

@media only screen and (max-width: 435px) {
  .reports_home_sub_title::before {
    width: 92.5%;
  }
}

@media screen and (max-width: 1200px) and (min-width: 436px) {
  .reports_home_sub_title::before {
    width: 80%;
  }
}

.reports_home_ul {
  list-style: none !important;
  margin-left: 2% !important;
}

@media only screen and (max-width: 435px) {
  .reports_home_ul {
    margin-top: 8.5% !important;
  }
}

@media screen and (max-width: 1185px) and (min-width: 436px) {
  .reports_home_ul {
    margin-top: 4.5% !important;
  }
}

.reports_home_ul li {
  margin-bottom: 1em !important;
}

.reports_home_ul li a {
  text-decoration: none;
  font-size: 1.15em !important;
}

.reports_home_ul li a:visited {
  color: var(--cbat-primary); /* ci-exempt - intentional: keep all nav links visible */
}

.reports_home_ul li a:hover {
  color: #b92229; /* ci-exempt fc-ignore: reports link hover state */
}

@media only screen and (max-width: 435px) {
  .reports_home_ul li a {
    font-size: 1em !important;
  }
}

@media screen and (max-width: 900px) and (min-width: 436px) {
  .reports_home_ul li a {
    font-size: 1em !important;
  }
}

/* ****  End Reports Home  **** */

/* ****  Start Sales Report  **** */

#sales_report_page_title {
  font-size: 2em !important;
}

@media only screen and (max-width: 500px) {
  #sales_report_page_title {
    font-size: 1.65em !important;
  }
}

#sales_report_btn_div {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  margin-bottom: 10px;
}

#sales_report_search {
  width: 160px;
}

#sales_report_download {
  width: 160px;
  background-color: var(--success) !important; /* ci-exempt - download action uses success green to distinguish from primary search */
}

@media only screen and (max-width: 500px) {
  #sales_report_btn_div {
    flex-direction: column;
  }
  #sales_report_search,
  #sales_report_download {
    width: 100%;
  }
}

/* ****  End Sales Report  **** */

/* ****  Start former marketing-app css  **** */
/* BEGIN MARKETING NAVIGATION STYLES */
.pipe {
  color: var(--main-color);
  font-size: 1.5em;
}
.control-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1em auto;
}
/* END MARKETING NAVIGATION STYLES */
/* BEGIN SEARCH VIEW STYLES */
#marketing-home-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 1em auto;
}
#marketing-home-container {
  display: flex;
  flex: 1 1 0;
  justify-content: flex-start;
  flex-wrap: nowrap;
  flex-direction: row;
}
.marketing-form-container {
  display: flex;
  flex-direction: column;
  margin: 0.5em 0;
  padding-bottom: 0.5em;
  border-bottom: 1px solid var(--borderColor);
}
#search-box {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  color: var(--body-font-color);
  border: 1px solid var(--borderColor);
  margin-right: 1em;
  padding: 1em;
  height: 61vh !important;
}
.marketing-form-container > label {
  font-size: 1em;
  margin-bottom: 0.5em;
}
.marketing-form-horizontal {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.marketing-form-horizontal .marketing-form-date-column:first-child {
  margin-right: 0.25em;
}
.marketing-form-container .datepicker-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
.marketing-form-container .calendar-icon {
  color: var(--body-font-color);
  cursor: pointer;
  padding: 0 0.25em;
}

/* .promo_label_text { 
  display: inline-block;
}
.promo_label_button { 
  display: inline-block;
} */

.specific_promo_url {
  margin-top: 7.5px;
  text-align: right;
}

#clip_promo_link {
  max-height: 30px !important;
  width: 40px !important;
  background-color: #c2c2c2; /* ci-exempt fc-ignore: promo clipboard button */
}

@media only screen and (max-height: 600px) {
  .specific_promo_url_text {
    margin-left: 2.5% !important;
  }
  #search-box {
    height: auto !important;
  }
}

@media only screen and (max-width: 465px) {
  #search-box {
    height: 70vh !important;
  }
}

@media only screen and (max-width: 1200px) {
  #searchbox {
    font-size: 0.9em;
    height: 65vh !important;
  }
}
@media only screen and (max-width: 870px) {
  #marketing-home-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  #search-box {
    margin: 0 auto;
  }
}
@media only screen and (max-width: 380px) {
  .marketing-form-horizontal {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

/* BEGIN CALENDAR STYLES */
.calendar-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

.calendar-container {
  width: 100%;
  max-width: 1500px;
  overflow-x: scroll;
}

.calendar-header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.header-input {
  margin-right: 0.5em;
}

#calendar-title {
  width: 100%;
  text-align: center;
  margin: 0px;
  padding: 0.5em 0;
}

#month-year-title {
  margin: 0.5em 0;
}

.calendar-body {
  overflow-x: scroll;
}

.week {
  height: 200px;
  display: flex;
}

.day {
  min-width: 200px;
  flex: 1 0 0;
  overflow-y: auto;
}

.week.header {
  height: 40px;
  display: flex;
}

.day.blank {
  box-shadow: none;
}

.day {
  border: 1px solid var(--borderColor);
}

.day.header {
  font-size: 1.1em;
  text-align: center;
  background-color: var(--main-color);
  color: var(--cbat-bg-hover);
  overflow-y: hidden;
}

.month-chevron {
  cursor: pointer;
}

.promo-day-list {
  overflow-y: auto;
  font-size: 0.9em;
}

.promo-day-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.promo-day-list ul li {
  font-size: 0.9em;
  cursor: pointer;
  transition: all 0.5s ease;
  width: 100%;
  padding: 0.25em;
}

.promo-day-list ul li:hover,
.promo-day-list ul li:active {
  background-color: var(--cbat-primary);
  color: var(--cbat-text-on-primary);
}
.day > div {
  width: 100%;
}
.beginning,
.ending {
  width: 100%;
  padding: 0.25em 0;
  text-align: center;
  color: #ffffff; /* ci-exempt fc-ignore: white text on calendar dates */
  margin: 0 0 0.5em 0;
  display: block;
}
.beginning {
  background-color: var(--successColor);
}
.ending {
  background-color: var(--errorColor);
}
.dateText {
  display: block;
  padding: 0.25em 0.5em;
  font-weight: bold;
}
/* END CALENDAR STYLES */

/* BEGIN TODAYS VIEW STYLES */
#results-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#results-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
@media only screen and (max-width: 1200px) {
  #results-wrapper.marketing-results-area {
    flex-direction: column;
  }
}
@media only screen and (max-width: 800px) {
  #results-wrapper {
    flex-direction: column;
  }
}
/* END TODAYS VIEW STYLES */

/* BEGIN ICON VUE STYLES */

/* .datepicker-calendar-wrapper {
  position: absolute;
}

.datepicker-calendar-container {
  border: 1px solid var(--borderColor);
  border-radius: 8px;
  background-color: var(--cbat-bg);
  box-shadow: var(--box-shadow-level3);
  padding: 0.5em;
  color: var(--cbat-text-muted);
}

.datepicker-calendar-header {
  background-color: #256eb7;
  width: 100%;
  padding: 5px;
  box-sizing: border-box;
  color: white;
  text-align: center;
}

.datepicker-calendar-body {
  padding: 5px;
}

.datepicker-calendar-header i {
  cursor: pointer;
}

.datepicker-calendar-header i.disabled {
  pointer-events: none;
  color: lightgray;
}

.datepicker-calendar-container table {
  border-collapse: collapse;
}

.datepicker-calendar-container thead tr td {
  text-align: center;
}

.datepicker-calendar-container tbody tr td {
  border: 1px solid var(--borderColor);
  text-align: center;
  cursor: pointer;
}

.datepicker-calendar-container tbody tr td.no-border {
  border: none;
}

.datepicker-calendar-container tbody tr td.selected-day,
.datepicker-calendar-container tbody tr td:not(.invalid-day):hover,
.datepicker-calendar-container tbody tr td:not(.invalid-day):active {
  color: white;
  background-color: #256eb7;
}

.datepicker-calendar-container tbody tr td span.invalid-day {
  background-color: lightgray;
  pointer-events: none;
} */
/* END ICON VUE STYLES */

/* BEGIN INDIVIDUAL PROMOTION CARD STYLES */
.card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  background-color: #ffffff !important; /* ci-exempt fc-ignore: white card bg */
  padding: 0 !important;
  color: var(--cbat-text) !important;
  height: 400px;
  width: 250px;
  cursor: pointer;
  margin: 0.25em 1em 1em 0.25em;
  border: 1px solid var(--cbat-border-light);
  border-radius: 8px;
  text-align: center;
  box-shadow: var(--card-shadow);
}
.cardheader img {
  width: 100%;
}
.cardbody {
  height: calc(100% - 7.5em);
  overflow: hidden;
  padding: 0 0.25em;
  font-size: 0.95em;
}
.cardbody .cardfront,
.cardbody .onhover {
  transition: all 500ms ease-in-out;
}
.cardbody .cardfront {
  opacity: 1;
  height: 100%;
}
.cardbody .onhover {
  opacity: 0;
  height: 0;
  font-size: 0.9em;
}
.card h3 {
  color: var(--cbat-text);
  line-height: 1.2em;
  margin: 0;
  padding: 0.5em 0;
  height: 5em;
  overflow: hidden;
}
.cardbody div p {
  margin: 0.25em 0;
}
.cardfooter {
  height: 3em;
  background-color: green;
  color: #ffffff; /* ci-exempt fc-ignore: white text on green footer */
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0 0 8px 8px;
}
.cardfooter h4 {
  font-weight: normal;
  text-align: center;
  margin: 0;
}
.card .onhover div {
  margin: 0.5em 0;
  border-bottom: 1px solid var(--cbat-border-light);
  height: calc(100% / 2.25);
}
.card .onhover div:last-child {
  border-bottom: none;
}
.card:hover,
.card:active {
  box-shadow: var(--card-hover-shadow);
}
.card:hover .cardbody .onhover,
.card:active .cardbody .onhover {
  opacity: 1;
  height: 100%;
}
.card:hover .cardbody .cardfront,
.card:active .cardbody .cardfront {
  opacity: 0;
  height: 0;
}
@media only screen and (max-width: 1200px) {
  #results-wrapper.marketing-results-area .card {
    height: 250px;
    width: 100%;
  }
  #results-wrapper.marketing-results-area .cardbody {
    height: calc(100% - 5em);
  }
  #results-wrapper.marketing-results-area .cardfooter {
    height: 2em;
  }
  #results-wrapper.marketing-results-area .card .onhover div {
    margin: auto;
    height: auto;
  }
}
@media only screen and (max-width: 800px) {
  .card {
    height: 250px;
    width: 100%;
  }
  .cardbody {
    height: calc(100% - 5em);
  }
  .card h3 {
    height: 3em;
  }
  .cardfooter {
    height: 2em;
  }
  .card .onhover div {
    margin: auto;
    height: auto;
  }
}
@media only screen and (max-width: 460px) {
  .card {
    height: 300px;
  }
}
/* END INDIVIDUAL PROMOTION CARD STYLES */
/* BEGIN INDIVIDUAL PROMOTION PAGE STYLES */
.view-promotion-wrapper {
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  border-image: linear-gradient(var(--cbat-border), var(--cbat-text)) 30;
  border-width: 6px;
  border-style: solid;
  margin-bottom: 5%;
}

.view-promotion-wrapper h1,
.view-promotion-wrapper h2,
.view-promotion-wrapper h4 {
  text-align: center;
}

.view-promotion-wrapper h1,
.view-promotion-wrapper h3,
.view-promotion-wrapper h4,
.view-promotion-wrapper h6 {
  margin: 1em 0;
}

#promotion-sailing-dates,
#promotion-booking-dates {
  font-size: 18.5px !important;
}

.description-container {
  margin-top: 5%;
}

.view_promotion_margin_spacer {
  margin: 5%;
}

.view-promotion-wrapper h3 {
  color: var(--main-color);
  background-image: linear-gradient(
    to right,
    var(--cbat-border),
    var(--cbat-text)
  );
  padding-left: 1.5%;
  padding-top: 0.5%;
  padding-bottom: 0.5%;
  border-radius: 5px;
}

.view-promotion-wrapper .fontplus {
  font-size: 1.1em;
}
/* END INDIVIDUAL PROMOTION PAGE STYLES */
/* BEGIN VUE CAROUSEL STYLES */
.VueCarousel-navigation-button[data-v-453ad8cd] {
  position: absolute;
  top: 50%;
  box-sizing: border-box;
  color: var(--cbat-text);
  text-decoration: none;
  appearance: none;
  border: none;
  background-color: transparent;
  padding: 0;
  cursor: pointer;
  outline: none;
}
.VueCarousel-navigation-button[data-v-453ad8cd]:focus {
  outline: 1px solid lightblue;
}
.VueCarousel-navigation-next[data-v-453ad8cd] {
  right: 0;
  transform: translateY(-50%) translateX(100%);
  font-family: "system"; /* ci-exempt - VueCarousel vendor component */
}
.VueCarousel-navigation-prev[data-v-453ad8cd] {
  left: 0;
  transform: translateY(-50%) translateX(-100%);
  font-family: "system"; /* ci-exempt - VueCarousel vendor component */
}
.VueCarousel-navigation--disabled[data-v-453ad8cd] {
  opacity: 0.5;
  cursor: default;
}
.VueCarousel-pagination[data-v-438fd353] {
  width: 100%;
  text-align: center;
}
.VueCarousel-pagination--top-overlay[data-v-438fd353] {
  position: absolute;
  top: 0;
}
.VueCarousel-pagination--bottom-overlay[data-v-438fd353] {
  position: absolute;
  bottom: 0;
}
.VueCarousel-dot-container[data-v-438fd353] {
  display: inline-block;
  margin: 0 auto;
  padding: 0;
}
.VueCarousel-dot[data-v-438fd353] {
  display: inline-block;
  cursor: pointer;
  appearance: none;
  border: none;
  background-clip: content-box;
  box-sizing: content-box;
  padding: 0;
  border-radius: 100%;
  outline: none;
}
.VueCarousel-dot[data-v-438fd353]:focus {
  outline: 1px solid lightblue;
}

.VueCarousel-slide {
  flex-basis: inherit;
  flex-grow: 0;
  flex-shrink: 0;
  user-select: none;
  backface-visibility: hidden;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  outline: none;
}
.VueCarousel-slide-adjustableHeight {
  display: table;
  flex-basis: auto;
  width: 100%;
}
.VueCarousel {
  display: flex;
  flex-direction: column;
  position: relative;
}
.VueCarousel--reverse {
  flex-direction: column-reverse;
}
.VueCarousel-wrapper {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.VueCarousel-inner {
  display: flex;
  flex-direction: row;
  backface-visibility: hidden;
}
.VueCarousel-inner--center {
  justify-content: center;
}
/* END VUE CAROUSEL STYLES */

/* Pagination styles */
.edit-lead-pagination {
  display: flex;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 10px;
}
/* END Pagination styles */

/* AD Styles */
.video-wrapper {
  max-width: 900px;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* END AD Styles */

/* DatePicker Styles */
.custom-modal-overlay.date_alert {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.custom-modal-overlay.date_alert .custom-modal-content {
  background-color: white;
  border: 1px solid grey;
  /* box-shadow: 5px 5px; */
  padding: 20px;
  margin: 15% auto;
  width: 80%;
  overflow-y: scroll;
}

.custom-modal-overlay.date_alert .notify-row {
  text-align: center;
}

.custom-modal-overlay.date_alert .notify-row p {
  color: black;
}
/* END DatePicker Styles */

#today-container h1 {
  text-align: center;
}

.todays_view_button_div {
  text-align: center;
  margin-bottom: 2.5%;
}

/* ****  Premier Placement Start  **** */

/* #premier_placement_heading {
    color: var(--main-color);
    background-image: linear-gradient(
      to right,
      var(--cbat-border),
      var(--cbat-text)
    );
    padding-left: 1.5%;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
    border-radius: 5px;
  } */

.premier_placement_card {
  border: 3.75px solid var(--main-color);
  border-radius: 13.5px;
  box-shadow: 5px 2.5px 2.5px silver;
  /* float: left; */
}

.premier_placement_title {
  text-shadow: 0.75px 0.75px 1.5px silver;
}

.premier_placement_cardfooter {
  background-color: var(--main-color);
}

.premier_placment_header {
  height: 2.5em;
  background-color: var(--main-color);
  color: #ffffff; /* ci-exempt fc-ignore: white header text */
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bolder;
  /* border-radius: 0 0 8px 8px; */
}
/* ****  Premier Placement End  **** */

/* ****  START EDIT AMMENITIES VUE  **** */

.amenity-summary-box {
  display: flex;
  flex-direction: column;
  background-color: var(--cbat-bg-secondary);
  font-size: 0.6em;
  margin: 5px;
  padding: 5px;
  max-height: 100px;
  overflow-y: auto;
}

.amenity-summary-box h4 {
  font-weight: 900;
  margin: 0;
}

.amenity-summary-box ul {
  list-style: none;
  padding: 0;
}

.amenity-container {
  width: 100%;
}

.amenity-summary {
  display: flex;
  border: 2px solid var(--cbat-primary);
  flex-wrap: wrap;
  padding: 0.25em 0.5em;
}

.amenity-summary h3 {
  width: 100%;
  margin: 0;
}

.amenity-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: row;
  align-items: flex-start;
}

.amenity-title {
  width: 100%;
  text-align: center;
}

.amenity-wrapper {
  width: 175px;
  margin: 10px;
  align-items: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.amenity-box {
  width: 175px;
  min-height: 275px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  color: var(--cbat-primary);
  align-items: center;
  border-radius: 5px;
  cursor: pointer;
  background-color: var(--cbat-bg-secondary);
  padding: 5px;
  border: 2px solid var(--cbat-primary);
  box-shadow: 5px 2.5px 2.5px var(--cbat-primary);
}

.amenity-box h5 {
  padding: 0;
  margin: 0 0 10px 0;
}

.amenity_card_heading {
  font-size: 1.0825em !important;
  font-weight: bold !important;
  color: black !important;
  margin-top: 3% !important;
}

.amenity_content_text {
  color: black !important;
  font-size: 1.165em !important;
  margin-left: 0px !important;
}

.edit_booking_amenity_content {
  padding: 1em;
  height: auto;
  max-height: 220px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 1;
  background-color: var(--cbat-bg-secondary);
  padding-bottom: 20px;
  color: black;
}

.amenity_card_label {
  font-size: 1em !important;
  color: black !important;
}

.amenity-content {
  padding-top: 1em;
  padding-bottom: 1em;
  height: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 1;
  font-size: 0.97em;
  font-weight: bold;
}

.amenity-content * {
  max-width: 90%;
}

.amenity-content .message {
  max-width: 100%;
}

.amenity-box-selected {
  border-radius: 5px 5px 0 0;
}

.amenity-content button {
  margin: 5px;
  align-self: center;
}

.amenity-content button {
  flex: none;
  margin-top: 5px;
}

.amenity-comment ul {
  list-style: none;
  padding: 0;
}
.amenity-list-wrapper {
  display: flex;
  flex-direction: column;
  margin: 10px 0 10px 0;
}
.amenity-list {
  display: flex;
  flex-direction: column;
}

.amenity-list-title {
  width: 100%;
  background-color: var(--cbat-primary);
  color: var(--cbat-text-on-primary);
  text-align: center;
}
.amenity-list .pax-list {
  border-bottom: 1px solid black;
  margin-bottom: 5px;
}

.amenity_card_button {
  min-width: 100px !important;
}

#OBC_tile_field {
  max-width: 100%;
}

.amenity-button-row {
  width: 100%;
  display: flex;
  justify-content: center;
}

.amenity-button-row button {
  margin: 5px;
}

.disabled-check {
  color: red;
  pointer-events: none;
}

.bold {
  font-weight: 900;
}
.amenity-content.roll-out-enter,
.amenity-content.roll-out-leave-to .roll-out-enter,
.roll-out-leave-to {
  max-height: 0px;
  opacity: 0;
}

.roll-out-enter-active,
.roll-out-leave-active {
  -webkit-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;
}

@media (max-width: 446px) {
  .amenity-wrapper {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

#booking_amenities_btn_div {
  text-align: center;
  margin-top: 3em;
  margin-bottom: 3em;
  padding-bottom: 2em;
}

#amenities-continue-button {
  min-width: 200px;
}

/* ****  END EDIT AMMENITIES VUE  **** */

/* ****  START EDIT HOTELS VUE  **** */

.hotel-row {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid black;
  padding: 5px;
}

.hotel-num-row {
  width: 100%;
  text-align: right;
  background-color: var(--cbat-primary);
  color: var(--cbat-text-on-primary);
  font-weight: 900;
  padding-right: 5px;
  margin-bottom: 5px;
}

.checkbox-container {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  font-size: 0.8em;
  background-color: lightgray;
  margin-bottom: 5px;
}

.hotel-form-group {
  display: flex;
  flex-direction: column;
  margin: 5px;
  flex: 1 1 0;
  min-width: 150px;
}

.hotel-row div:nth-of-type(3) {
  min-width: 0;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 86px;
}

.hotel-button-row {
  width: 100%;
}

/* ****  END EDIT HOTELS VUE  **** */

/* ****  START EDIT MISC VUE  **** */

.transfer-row {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid black;
  padding: 5px;
}

.transfer-num-row {
  width: 100%;
  text-align: right;
  background-color: var(--cbat-primary);
  color: var(--cbat-text-on-primary);
  font-weight: 900;
  padding-right: 5px;
  margin-bottom: 5px;
}

.transfer-form-group {
  display: flex;
  flex-direction: column;
  margin: 5px;
  flex: 1 1 0;
  min-width: 150px;
}

.transfer-button-row {
  width: 100%;
}
/* ****  END EDIT MISC VUE  **** */

/* ****  FLIGHT SCHEDULE VUE **** */

.segment-row {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid black;
  padding: 5px;
}

.segment-num-row {
  width: 100%;
  text-align: right;
  background-color: var(--cbat-primary);
  color: var(--cbat-text-on-primary);
  font-weight: 900;
  padding-right: 5px;
  margin-bottom: 5px;
}

.segment-form-group {
  display: flex;
  flex-direction: column;
  margin: 5px;
  flex: 1 1 0;
  min-width: 150px;
}

.flight-button-row {
  width: 100%;
}

.flight-button-row button {
  width: 120px;
  font-size: 1.165em;
}

.flight-button-row button:nth-of-type(2) {
  font-size: 0.6em;
}

.flight-button-row button:last-of-type {
  font-size: 0.5em;
}

/* **** END FLIGHT SCHEDULE VUE **** */

/* **** COMM PAYMENTS VUE  **** */

.comm-paid-lines {
  border: 1px solid black;
  margin-bottom: 5px;
  padding-bottom: 10px;
}

.comm-paid-lines-row {
  margin-bottom: 5px;
  border: 1px solid black;
  padding: 5px;
}

.comm-payments-row {
  background-color: var(--cbat-primary);
  color: var(--cbat-text-on-primary);
  padding: 5px;
  cursor: pointer;
  transition: all 0.5s ease;
}

.comm-payments-row:hover {
  background-color: var(--cbat-bg);
  color: var(--cbat-primary);
}

/* ****  END COMM PAYMENTS VUE  **** */

/* ****  EDIT AGENT COMM VUE  **** */

.agent-edit-container {
  display: flex;
  flex-direction: column;
  max-width: 200px;
}

.agent-comm-edit-cell {
  width: 100%;
}

.button-container {
  display: flex;
  justify-content: space-between;
}
/* ****  END EDIT AGENT COMM VUE  **** */

/* ****  NEW COMMISSION VUE  **** */

#agent-comm-table {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.agent-comm-row {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  width: 100%;
}

.agent-comm-cell {
  border: 1px solid black;
  padding: 3px;
}

.agent-comm-header {
  background-color: var(--cbat-primary);
  color: var(--cbat-text-on-primary);
}

/* ****  END NEW COMMISSION VUE  **** */

/* ****  EDIT GIFT MODAL  **** */

.edit-gift-container table {
  border-collapse: collapse;
}
.edit-gift-container table tr td {
  border: 1px solid var(--cbat-border);
}

/* ****  END EDIT GIFT MODAL  **** */

/* ****  NEW GIFTS VUE  **** */

.gift-order-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

.gift-order-container {
  max-width: 800px;
}

.gift-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--cbat-border);
}

.gift-cell {
  border: 1px solid var(--cbat-border);
  padding: 5px;
}

.gift-header-row .gift-cell {
  color: var(--cbat-text-on-primary);
  background-color: var(--cbat-primary);
  border: 1px solid var(--cbat-text-on-primary);
}

.payments-container {
  width: 100%;
  grid-column: 2 / span 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px;
}

.payments-container table {
  border: 1px solid var(--cbat-primary);
  border-collapse: collapse;
}

.payments-container table tr td {
  border: 1px solid var(--cbat-border);
}

.accordion-enter-active,
.accoridon-leave-active {
  transition: height 0.5s ease-in-out;
  overflow: hidden;
}

.gift-voided {
  background-color: #808080; /* ci-exempt fc-ignore: voided gift indicator */
}
/* ****  END NEW GIFTS VUE  **** */

/* ****  DUPE MODAL VUE  **** */

.dupe-modal-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dupe-modal-table {
  border-collapse: collapse;
  margin-bottom: 5px;
}

.dupe-modal-table thead {
  background-color: var(--cbat-primary);
  color: var(--cbat-text-on-primary);
}

.dupe-modal-table thead th {
  padding: 5px;
}

.dupe-modal-table tbody tr td {
  border: 2px solid gray;
  padding: 5px;
}
/* ****  END DUPE MODAL VUE  **** */

/* ****  ADD PAYMENT MODAL VUE  **** */

.add-payment-container {
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  flex-wrap: wrap;
}

.add-payment-col {
  display: flex;
  flex-direction: column;
  width: 40%;
}

.add-payment-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.add-payment-field select,
.add-payment-field input {
  align-self: stretch;
}

@media screen and (max-width: 780px) {
  .add-payment-col {
    width: 100%;
  }
}
/* ****  END ADD PAYMENT MODAL VUE  **** */

/* ****  EDIT PAYMENT VUE  **** */

.add-payment-container {
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  flex-wrap: wrap;
}

.add-payment-col {
  display: flex;
  flex-direction: column;
  width: 40%;
}

.add-payment-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.add-payment-field select,
.add-payment-field input {
  align-self: stretch;
}

@media screen and (max-width: 780px) {
  .add-payment-col {
    width: 100%;
  }
}

/* ****  END EDIT PAYMENT VUE  **** */

/* ****  NEW EDIT PAYMENTS VUE  **** */

.payments-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

.payments-container {
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.payment-nav-row {
  display: flex;
  margin-bottom: 20px;
  justify-content: center;
}

.payment-nav-row button {
  margin: 0px;
}

.payments-grouping {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2px solid black;
  margin-bottom: 10px;
  padding: 10px;
  width: 100%;
}

.payments-grouping.payments-heading .payments-row {
  grid-template-columns: repeat(3, 33%);
}

.payments-row {
  width: 100%;
  border: 2px solid var(--cbat-primary);
  padding: 5px;
  display: grid;
  grid-template-columns: repeat(7, 14.28%);
}

.payments-row.void-row {
  background-color: red;
  color: white;
}

.payment-nav-selected {
  background-color: white;
  color: var(--cbat-primary);
  border: 1px solid var(--cbat-primary);
}

.payment-field {
  margin: 5px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #ebebeb; /* ci-exempt fc-ignore: payment field divider */
  height: 100%;
  width: 100%;
  padding: 5px;
}

.payment-field:last-child {
  border-right: 0px;
}

.payment-field span {
  margin-left: 5px;
}

.editable:hover {
  cursor: pointer;
  background-color: var(--cbat-primary);
  color: var(--cbat-text-on-primary);
}

.non-editable {
  background-color: #adadad; /* ci-exempt fc-ignore: disabled input state */
}

/* ****  END NEW EDIT PAYMENTS VUE  **** */

/* ****  BOOKING GI VUE  **** */

.gl-wrapper {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
}

.gl-wrapper table {
  border: 2px solid var(--cbat-primary);
  border-radius: 5px;
  padding: 5px;
}

.gl-wrapper table tr {
  border: 1px solid #ababab; /* ci-exempt fc-ignore: table row border */
}

.gl-wrapper table tr:nth-child(even) {
  background-color: #ababab; /* ci-exempt fc-ignore: table row striping */
}

/* ****  END BOOKING GI VUE  **** */

/* ****  AUTOCOMPLETE VUE  **** */

.autocomplete-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

.autocomplete-query-input {
  width: 100%;
}

.autocomplete-query-input input {
  width: 90%;
  border: none;
}

/* ****  END AUTOCOMPLETE VUE  **** */

/* ****  DROP DOWN VUE  **** */

.autocomplete-dropdown {
  position: absolute;
  border: 1px solid var(--cbat-border-light);
  border-top: none;
  z-index: 99;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--cbat-bg);
}

.dropdown-results {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dropdown-result {
  padding: 3px 0 3px 3px;
  border: 1px solid var(--cbat-border-light);
  transition: 0.5s all ease;
  cursor: pointer;
}

.dropdown-result:hover {
  background-color: var(--cbat-primary);
  color: var(--cbat-text-on-primary);
}

.dropdown-result.selected {
  background-color: var(--cbat-primary);
  color: var(--cbat-text-on-primary);
}

.name-descriptor {
  color: #a6afbd; /* ci-exempt fc-ignore: descriptive text styling */
  font-size: 0.7em;
}

/* ****  END DROP DOWN VUE  **** */

/* ****  CONTACT SEARCH RESULTS VUE  **** */

.scroll-holder {
  overflow-y: auto;
  overflow-x: auto;
  border: 1px solid black;
  margin-bottom: 5px;
  padding: 5px;
}

.scroll-holder table tr {
  cursor: pointer;
  border: 1px solid black;
}

.scroll-holder table tr td,
.scroll-holder table tr th {
  border: 1px solid black;
}

.scroll-holder table tr:hover {
  background-color: var(--cbat-primary);
  color: var(--cbat-text-on-primary);
}
/* ****  END CONTACT SEARCH RESULTS VUE  **** */

/* ****  TRIP SUMMARY VUE  **** */

b {
  font-weight: 900;
}
.summary-container {
  margin-top: 16px;
}

.summary-title {
  background: linear-gradient(135deg, var(--cbat-primary) 0%, var(--cbat-primary-dark) 100%);
  box-sizing: border-box;
}

.summary-title h3 {
  color: var(--cbat-text-on-primary);
}

.red-emphasis {
  font-weight: 900;
  color: var(--error);
  font-size: 1.1em;
}

.blue-emphasis {
  color: var(--cbat-primary);
  font-weight: 900;
}

.summary-title.cancelled {
  background: var(--cbat-bg-secondary);
}
.summary-title.cancelled h3 {
  color: var(--cbat-text);
}

/* ****  END TRIP SUMMARY VUE  **** */

/* ****  EDIT TRIP CSS (REPO STYLESHEET)  **** */

.app-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1024px;
  margin: 0 auto;
  width: 100%;
}
.red-emphasis {
  color: var(--error);
  font-size: 1.1em;
  font-weight: bold;
}
.blue-emphasis {
  color: var(--cbat-primary);
  font-weight: 900;
}
.contact-link {
  text-decoration: underline;
  color: var(--cbat-primary);
  cursor: pointer;
}
.contact-link {
  width: 80% !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-comm-line {
  color: navy;
  font-weight: bold;
}
.message.small {
  font-size: 0.8em;
  text-align: center;
}
.back.button.save {
  display: block;
  margin: 1em 0;
  text-decoration: none;
}
/* STYLES FOR BOX ROWS */
.main-box-wrapper {
  border: 1px solid var(--borderColor);
  margin: 1em 0;
}

.main-box-title {
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
}

.main-box-item-title {
  width: 100%;
  text-align: right;
  padding: 0.25em 0.5em;
  color: var(--main-color);
  font-weight: 900;
  margin-bottom: 1em;
}

.main-box-form {
  display: flex;
  flex-wrap: wrap;
}

.main-box-form-group {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  margin: 5px;
}

.main-box-type {
  display: flex;
  flex-direction: column;
  margin: 0 50px 0 5px;
}

.main-box-type p {
  margin: 0;
}

.main-box-amount {
  min-width: 200px;
  max-width: 60%;
  flex: 1 1 0;
}

.main-box-amount p {
  margin: 0;
  font-weight: 900;
}

.main-box-amount-wrapper {
  flex: 1 1 0;
  display: flex;
  justify-content: center;
}

.main-box-amount.input {
  display: flex;
  flex-direction: column;
}

.main-box-amount.not-chosen,
.main-box-amount.definite-amount {
  background-color: lightgray;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
}

.main-box-button-row {
  width: 100%;
  padding: 5px;
}

.continue-row {
  width: 100%;
  display: flex;
  justify-content: center;
}

@media (max-width: 475px) {
  .main-box-body {
    align-items: flex-start;
    justify-content: center;
  }

  .main-box-body .gift-type {
    margin: 0 0 10px 0;
    max-width: none;
    width: 100%;
  }

  .main-box-amount.not-chosen,
  .main-box-amount.definite-amount {
    max-width: none;
    width: 100%;
    flex: 1 1 auto;
  }
}
/* END STYLES FOR BOX ROWS */

/* START ADD DOCUMENT */

#document_list_item,
.delete_file {
  display: inline-block;
}

#document_list_item {
  margin-bottom: 2em;
  width: 80%;
  margin-left: 5%;
  background-color: #8093a7; /* ci-exempt fc-ignore: document list item background */
  display: inline-block;
  height: 20px;
}

#document_list_link {
  background-color: var(--cbat-primary);
  color: var(--cbat-text-on-primary);
  display: block;
  height: 2.25em;
}

.document_info_line {
  display: inline-block;
}

#document_title {
  margin-left: 1%;
}

.document_add_line {
  margin-top: 10px !important;
}

#add_doc_icon {
  padding-right: 10px;
}

#document_user_name {
  width: 30%;
  float: right;
}

#second_add_line {
  text-align: right;
}

#document_date {
  width: 20%;
  float: right;
  margin-right: 1%;
}

#third_add_line {
  text-align: right;
}

.delete_file {
  width: 5%;
  height: 2.5em;
  padding: 0.25em 0.5em;
  border-bottom: 1px solid var(--borderColor);
  margin-bottom: 1em;
  color: white;
  font-weight: bold;
  background-color: rgb(192, 57, 43);
  cursor: pointer;
  margin-left: 5%;
  border: none;
  outline: inherit;
  border-radius: 5px;
}

.view_group {
  width: 10%;
  height: 2.5em;
  padding: 0.5em 0.5em;
  border-bottom: 1px solid var(--borderColor);
  margin-bottom: 1em;
  color: white;
  background-color: var(--successColor);
  cursor: pointer;
  margin-left: 2.5%;
  border: none;
  outline: inherit;
  font-family: var(--cbat-font-heading);
  border-radius: 5px;
  text-decoration: none !important;
}

@media (max-width: 475px) {
  #second_add_line,
  #third_add_line {
    display: none;
  }
}

@media (max-width: 475px) {
  #document_list_item {
    width: 65%;
  }
}

@media (max-width: 475px) {
  .delete_file {
    width: 10%;
    margin-left: 2.5%;
  }
}

/* END ADD DOCUMENT */

.view_trip_booking_message {
  margin-top: 0% !important;
  margin-bottom: 0% !important;
}

@media (max-width: 475px) {
  .view_trip_booking_message {
    display: none;
  }
}

@media (max-width: 475px) {
  .vt_button {
    width: 95% !important;
    display: block;
    margin: 2% auto !important;
  }
}

@media (max-width: 475px) {
  .view_trip_footer_buttons {
    width: 80% !important;
    display: block;
    margin: 2% auto !important;
  }
}

@media (max-width: 475px) {
  .documents_add_button {
    width: 45% !important;
    margin: 2% auto !important;
  }
}

/* VUE Loading Button */

.vue_spinner {
  width: 30px;
  height: 30px;
  border: 5px solid var(--main-color);
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#add_note_vue_spinner {
  padding-right: 10%;
}

/* ViewTrip Summary/Bookinginfo styles */

.summary-wrapper,
.booking-wrapper {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cbat-border);
  border-radius: var(--borderRadius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* ci-exempt - decorative shadow */
  overflow: hidden;
  margin: 1em 0;
  width: 100%;
}

.summary-title,
.booking-title {
  width: 100%;
  padding: 0.5em 1.25em;
  border-bottom: 1px solid var(--cbat-border);
  font-weight: 900;
  margin-bottom: 0;
}
.summary-title {
  color: var(--cbat-text-on-primary);
}
.booking-title {
  color: var(--cbat-primary);
}
.booking-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.summary-title h3,
.booking-title h3 {
  margin: 0;
}

.summary-title.cancelled {
  background: var(--cbat-bg-secondary);
}
.summary-title.cancelled h3 {
  color: var(--cbat-text);
}
.summary-contents {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  font-size: var(--cbat-font-size-base);
  justify-content: space-between;
  padding: 16px 20px;
}

.summary-group {
  flex: 1;
  min-width: 180px;
}
.summary-group:not(:last-child) {
  border-right: 1px solid var(--cbat-border);
  padding-right: 20px;
}
.summary-group:not(:first-child) {
  padding-left: 20px;
}

.summary-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.summary-list li {
  padding: 0.35em 0;
  color: var(--cbat-text);
  font-weight: bold;
}
.summary-list b {
  color: var(--cbat-text-muted);
  font-size: var(--cbat-font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-right: 3px;
}
.summary-list li {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.title-info {
  font-weight: 900;
}

.product-title {
  margin-left: auto;
}

.booking-info-row {
  width: 100%;
  display: flex;
  border: 1px solid var(--borderColor);
  margin: 5px;
}

.booking-content {
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.vendor-block {
  width: 100%;
  display: flex;
}

.highlight-title {
  font-weight: 900;
  color: var(--cbat-primary);
  font-size: 1.2em;
  width: 100%;
  text-align: center;
}

.booking-content-group {
  display: flex;
  flex-direction: column;
}

.booking-list {
  list-style: none;
  padding: 0;
  margin-right: 10px;
}

.booking-info-row div {
  margin-right: 5px;
}

.button-row {
  width: 100%;
}
.button-row.wrapable {
  flex-wrap: wrap;
}

.booking-info-finance {
  display: flex;
  font-size: 0.9em;
  flex-wrap: wrap;
  border: 2px solid var(--cbat-primary);
  padding: 5px;
  margin-bottom: 10px;
}

.finance-item {
  display: flex;
  flex-direction: column;
  margin: 5px;
  padding: 10px;
  background-color: var(--cbat-primary);
  color: var(--cbat-text-on-primary);
  justify-content: center;
  width: 210px;
  cursor: pointer;
}

.booking-info-payments {
  border: 2px solid red;
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
  font-size: 0.9em;
}

.main-info {
  display: flex;
  padding: 5px;
  flex-wrap: wrap;
}

.booking-wrapper .pax-block,
.main-info .info-rows {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0.5em 0;
  border-bottom: 1px solid var(--borderColor);
  padding: 0.5em;
}

.booking-wrapper .pax-block h4 {
  padding: 0 0.5em 0 0;
  margin: 0;
}

.booking-wrapper .pax-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  border: none;
}

.booking-wrapper .pax-list li:after {
  content: ",  ";
}
.booking-wrapper .pax-list li:last-child:after {
  content: "";
}

.main-info .info-row {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
}

.main-info .info-item {
  background-color: var(--cbat-primary);
  color: var(--cbat-text-on-primary);
  margin: 0 5px 5px 0;
  padding: 5px;
  font-size: 0.8em;
  flex: 1;
  min-width: 220px;
  cursor: pointer;
}

.payment-block {
  border: 1px solid var(--cbat-border);
  margin: 5px;
  display: flex;
  padding: 0.5em;
  flex-wrap: wrap;
  font-size: 0.9em;
  justify-content: space-around;
}

.payment-item {
  color: var(--cbat-text);
  margin-right: 5px;
}

.edit-trip-button-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin: 10px 0 10px 0;
  flex-wrap: wrap;
}

.info-rows.cancelled {
  border: 2px solid lightgray;
}

.booking-title.cancelled {
  background-color: var(--errorColor);
}
.booking-title.cancelled h3,
.booking-title.cancelled .title-info {
  color: #ffffff; /* ci-exempt fc-ignore: white text on cancelled booking */
}

.info-item.cancelled {
  background-color: lightgray;
}

.payment-block.cancelled {
  border: 2px solid lightgray;
}

.payment-item.cancelled {
  color: lightgray;
}

.pax-block.cancelled h4 {
  color: white;
}

.highlight-title.cancelled {
  color: lightgray;
}

.pax-list.cancelled li {
  color: white;
}

.button.flat-primary-button.cancelled {
  background-color: lightgray;
  margin: 5px;
}

.prevent_color_bleed {
  color: white;
}

.trip_notes_note {
  white-space: pre-wrap;
}

@media only screen and (max-width: 942px) {
  .summary-contents {
    flex-direction: column;
  }
  .summary-group {
    margin: 0.25em 0;
    padding: 0.25em 0.5em;
    border-bottom: 1px solid var(--borderColor);
  }
  .payment-block {
    flex-direction: column;
  }
  .payment-item {
    padding: 0.25em 0.5em;
    border-bottom: 1px solid red;
  }
}
@media only screen and (max-width: 716px) {
  .main-info .info-row,
  .booking-title {
    flex-direction: column;
  }
  .edit-trip-button-row {
    justify-content: space-between;
  }
  .edit-trip-button-row .button {
    margin: 0.25em 0;
  }
  .title-info {
    margin: 0.5em 0;
  }
  .app-container .button-row {
    display: flex;
    justify-content: space-between;
  }
  .app-container .button-row .button {
    margin: 0.25em 0;
  }
}
@media only screen and (max-width: 350px) {
  .edit-trip-button-row,
  .app-container .button-row {
    flex-direction: column;
    align-items: center;
  }
}
/* END ViewTrip Summary/Bookinginfo styles */
/* Info modal popup */
.notify-row {
  text-align: center;
}
/* END Info modal popup */

/* TotalCommPayments styles */
.custom-modal-content {
  text-align: center;
}

.table-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 5px;
}

.summary-row {
  font-size: 1.1em;
  font-weight: 900;
}

.comm-table {
  border-collapse: collapse;
  border: 1px solid var(--borderColor);
}

.comm-table tr td {
  border: 1px solid var(--borderColor);
}

.blank-cell {
  border: none;
}
/* END TotalCommPayments */

/* Quote Module styles */
.quote-module-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.quote-wrapper {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--cbat-primary);
  padding: 10px;
}

.quote-header {
  width: 100%;
  text-align: center;
}

.quote-group {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  margin: 5px;
}

.quote-group label {
  font-weight: 900;
}

.quote-button {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.quote-button button {
  margin: 5px;
}

.quote-checkbox-group {
  display: flex;
  flex-direction: column;
  font-size: 0.8em;
  background-color: lightgray;
  margin-bottom: 5px;
}
/* END Quote module styles */
/* Edit Itinerary styles */
.edit-itinerary-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.edit-itinerary-wrapper {
  max-width: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.edit-itinerary-wrapper h4 {
  margin: 0 0 10px 0;
}

.edit-itinerary-button-row {
  width: 100%;
  display: flex;
  justify-content: center;
}

.edit-itinerary-button-row button {
  margin: 10px 5px 10px 5px;
}
/* END Edit Itinerary styles */

/* AddFlag styles */
.adminComment {
  max-width: 100%;
  min-width: 50%;
  min-height: 20vh;
}
/* END AddFlag styles */
/* AdminManageFlags styles */
.flag-paginator {
  width: 100%;
  display: flex;
  justify-content: center;
}

.pagination-link.large-pagination-link {
  width: 100px;
}

.pagination-link.large-pagination-link.pagination-link-selected {
  background-color: white;
  color: var(--cbat-primary);
  border: 2px solid var(--cbat-primary);
  box-sizing: border-box;
}
/* END AdminManageFlags styles */
/* Flag Module Styles */
.flag-wrapper {
  border: 2px solid var(--cbat-primary);
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
  margin: 5px;
}

.flag-group {
  display: flex;
  flex-direction: column;
  min-width: 150px;
  flex: 1 1 0;
  margin: 5px;
}

.flag-button-row {
  width: 100%;
}
/* END Flag Module Styles */
/* EntryMaster styles */
.entry-summary-container {
  width: 100%;
}

.entry-summary-paginator {
  display: flex;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 10px;
}

.entry-summary-button-row {
  width: 100%;
  text-align: center;
  justify-content: center !important;
}

.entry-summary-input-row {
  width: 100%;
}

.entry-summary-input-row form {
  text-align: center;
  margin-bottom: 5px;
}

.pagination-link.large-pagination-link {
  width: 100px;
}

.pagination-link.large-pagination-link.pagination-link-selected {
  background-color: white;
  color: var(--cbat-primary);
  border: 2px solid var(--cbat-primary);
  box-sizing: border-box;
}
/* END EntryMaster styles */
/* EntrySummary styles */

.entry-summary-group {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--borderColor);
  flex: 1 1 0;
  padding: 0.5em;
  margin: 0.5em 0;
}

.entry-summary-group ul {
  list-style: none;
  margin-top: 5px;
  padding: 0;
}

.entry-summary-item {
  font-weight: 900;
  font-size: 1.1em;
}
/* END EntrySummary styles */
/* ModsSummary styles */
.mods-table-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: auto;
}

.entry-summary-table {
  border-collapse: collapse;
}

.entry-summary-table tbody tr td {
  border: 2px solid gray;
  padding: 5px;
}

.entry-summary-table thead {
  background-color: var(--cbat-primary);
  color: var(--cbat-text-on-primary);
}
/* END ModsSummary styles */
/* AddContact/EditContactDetails styles */
.add-contact-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.add-contact-container .form-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 750px;
  flex: 1 1 0;
}

.add-contact-container .form-wrapper h4 {
  margin: 0 0 10px 0;
}

.add-contact-container .form-row {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-bottom: 5px;
}

.add-contact-container .form-group {
  display: flex;
  flex-direction: column;
  margin: 5px;
  flex: 1 1 0;
  min-width: 250px;
}

.add-contact-button-row {
  display: flex;
  justify-content: center;
  width: 100%;
}

.add-contact-button-row button {
  margin: 0;
}

.add-contact-button-row button:first-of-type {
  margin-right: 5px;
}
.add-contact-container .form-group.col2 {
  flex: 2 1 0;
}
.add-contact-container .form-group.col4 {
  flex: 4 1 0;
}
.add-contact-container .form-group.min50 {
  min-width: 50px;
}
/* END AddContact styles */
/* ChangeContact styles */
.change-contact-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.change-contact-container input {
  max-width: 400px;
  flex: 1 1 0;
}

.change-contact-button-row {
  width: 100%;
  display: flex;
  margin-top: 10px;
  justify-content: center;
}

.change-contact-button-row button {
  margin: 0;
}

.change-contact-button-row button:first-of-type {
  margin-right: 5px;
}

/* END ChangeContact styles */

/* ShowContact styles */
.show-contact {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.show-contact h4 {
  margin: 0 0 5px 0;
}

.show-contact-button-row {
  width: 100%;
  display: flex;
  justify-content: center;
}

.show-contact-button-row button {
  margin: 10px 5px 0 0;
}

.switch {
  background-color: #e6bb00; /* ci-exempt fc-ignore: switch toggle color */
}
/* END ShowContact styles */
/* CancelBooking styles */
.cancel-booking-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

.cancel-booking-content {
  display: flex;
  border: 1px solid var(--borderColor);
  flex-direction: column;
  align-items: center;
  padding: 5px;
  max-width: 850px;
}

.cancel-booking-row {
  display: flex;
  flex-wrap: wrap;
  margin: 10px;
  border: 2px solid var(--cbat-primary);
  align-items: flex-end;
}

.cancel-booking-group {
  flex: 1 1 0;
  margin: 5px;
  display: flex;
  flex-direction: column;
}
.cancel-booking-group.fullWidth {
  flex: 0 1 auto;
}
.cancel-booking-group.secondary {
  display: none;
}

.cancel-booking-button-row {
  width: 100%;
  display: flex;
  justify-content: center;
}

.cancel-booking-button-row button {
  margin: 5px;
}

.cancel-booking-title-row {
  width: 100%;
  background-color: var(--cbat-primary);
  color: var(--cbat-text-on-primary);
  font-size: 1.1em;
}

/* END CancelBooking styles */
/* EditFinalPaymentDate styles */
.final-edit {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
}
/* END EditFinalPaymentDate styles */

/* EditBooking styles */
.edit-booking-container .booking-section,
.summary.editbooking {
  border: 1px solid var(--borderColor);
  display: flex;
  flex-direction: column;
  margin: 1em 0;
}

.edit-booking-container .booking-section-title h3,
.editbooking .summary-section-title h3 {
  color: white;
  margin: 0;
  padding: 0.5em 1em;
  font-weight: normal;
  background-color: var(--main-color);
}

.edit-booking-container .booking-info-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  border: none;
}

.edit-booking-container .booking-info-data {
  display: flex;
  flex-direction: column;
  margin: 5px;
}

.edit-booking-container .booking-section-data {
  display: flex;
  flex-flow: column;
}

.edit-booking-container .booking-section-button {
  width: 100%;
  padding: 5px;
}

.edit-booking-container .pricing-section {
  display: flex;
  padding: 5px;
  justify-content: space-around;
  flex-wrap: wrap;
}

.edit-booking-container .pricing-group span:first-of-type {
  font-weight: 900;
}

.edit-booking-container .pricing-group {
  display: flex;
  flex-direction: column;
  margin: 10px;
}

.edit-booking-container .amenity-graphic {
  background-color: lightgray;
  color: var(--cbat-primary);
  height: 120px;
  width: 100px;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 5px;
  justify-content: center;
  margin: 5px;
}

.edit-booking-container .amenity-graphic span {
  margin-top: 5px;
  font-weight: 900;
}
.summary.editbooking .summary-group {
  padding: 0.25em 0.5em;
}
.summary.editbooking .summary-group span:first-child {
  width: 12em;
  display: inline-block;
  font-weight: bold;
  padding-right: 0.25em;
}
.summary.editbooking .summary-group span:last-child {
  width: 8em;
  text-align: right;
  display: inline-block;
}
@media only screen and (max-width: 956px) {
  .edit-booking-container .pricing-group,
  .edit-booking-container .booking-info-data,
  .edit-booking-container .booking-info-data {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid var(--borderColor);
    padding: 0.25em 0.5em;
    margin: 0;
  }
}
@media only screen and (max-width: 384px) {
  .summary.editbooking .summary-group {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid var(--borderColor);
    padding: 0.25em 0.5em;
    margin: 0;
    display: flex;
  }
}
/* END EditBooking styles */

/* commissions/AgentCommissions styles */

.comm-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.comm-chart-container {
  border: 1px solid var(--borderColor);
  display: flex;
  flex-direction: column;
  max-width: 400px;
}

.comm-chart-header {
  color: var(--cbat-text-on-primary);
  background-color: var(--cbat-primary);
  width: 100%;
  display: flex;
}

.comm-chart-body {
  display: flex;
  flex-direction: column;
}

.comm-chart-row {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.comm-chart-cell {
  text-align: center;
  flex: 1 1 0;
  border: 1px solid var(--borderColor);
}
/* END commissions/AgentCommissions styles */
/* gifts/EditGifts styles */
.gift-item {
  display: flex;
  justify-content: center;
}

.main-box-wrapper.gift-wrapper {
  max-width: 800px;
  flex: 1 1 0;
}

.main-box-form-group p {
  margin: 0;
}
/* END gifts/EditGifts styles */

/* info/EditInfo styles */
.type-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.type-wrapper {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--cbat-primary);
  padding: 10px;
  max-width: 530px;
  flex: 1 1 0;
}

.type-header {
  width: 100%;
  text-align: center;
}

.type-group {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  margin: 5px;
}

.type-group label {
  font-weight: 900;
}

.type-button {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.type-button button {
  margin: 5px;
}
@media only screen and (max-width: 400px) {
  .type-button {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .type-button button {
    margin: 1em 0;
  }
}
/* END info/EditInfo styles */
/* passenger/EditPax styles */
.pax-row {
  width: fit-content !important;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--cbat-primary);
  margin-bottom: 5px;
  flex-wrap: wrap;
  min-width: 100%;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  box-shadow: var(--box-shadow-level1);
  margin: 0.5em 0;
  padding: 0.5em;
  border-radius: var(--borderRadius);
}

.pax-title {
  width: 100%;
}

.pax-title h3 {
  color: var(--cbat-primary);
}

.pax-row-info {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
}

.pax-info-group {
  display: flex;
  flex-direction: column;
  background-color: var(--cbat-primary);
  color: var(--cbat-text-on-primary);
  height: 75px;
  margin: 5px;
  padding: 8px;
  flex: 1 1 auto;
}

.pax-info-label {
  font-weight: 900;
}

.pax-info-content {
  margin-top: auto;
}

.pax-info-buttons {
  margin: 5px;
  display: flex;
  margin-left: auto;
  width: 100%;
}

.pax-info-buttons button {
  margin: 0 5px 0 5px;
}
/* END passenger/EditPax styles */
/* passenger/EditThisPax styles */
.edit-pax-row {
  padding: 5px;
}

.pax-replace-content {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
}

.pax-replace-group {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 220px;
  margin: 5px;
}
/* END passenger/EditThisPax styles */
/* passenger/ReplacePax styles */
.pax-replace-content {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  padding: 8px;
}

.pax-replace-flavor h4 {
  margin: 0;
}

.pax-replace-group {
  display: flex;
  flex-direction: column;
  margin: 5px;
}

.pax-replace-buttons {
  margin-left: auto;
  display: flex;
}

.pax-replace-buttons button {
  margin: 0 5px 0 5px;
}
/* END passenger/ReplacePax styles */
/* pricing/EditPricing styles */
.edit-pricing-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.edit-pricing-column {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 200px;
  padding: 10px;
  border: 1px solid var(--borderColor);
  justify-content: space-between;
  margin: 0.5em;
}

.edit-pricing-item {
  display: flex;
  flex-direction: column;
}

.info-label {
  font-weight: 900;
}

.edit-pricing-buttons {
  width: 100%;
  display: flex;
  justify-content: center;
}

.edit-pricing-buttons button {
  margin: 5px;
}

.red {
  font-weight: 900;
  font-size: 1.2em;
}
/* END EditPricing styles */
/* ReadOnlyBooking styles */
.read-only-container {
  display: flex;
  align-items: center;
  width: 100%;
  flex-direction: column;
}

.read-only-wrapper {
  border: 2px solid var(--cbat-primary);
  padding: 10px;
  margin: 5px;
}
/* END ReadOnlyBooking styles */

/* addbooking/AddBookingMaster styles */
.booking-nav-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  margin-top: 15px;
}

.booking-nav-holder {
  display: flex;
  flex-wrap: wrap;
}

.booking-nav-holder div:first-of-type {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.booking-nav-holder div:last-of-type {
  border-right: none;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.booking-nav-item {
  background-color: var(--cbat-primary);
  color: var(--cbat-text-on-primary);
  border-right: 1px solid white;
  cursor: pointer;
  transition: background-color 0.5s ease;
  margin: 1px 0;
}
.booking-nav-item span {
  padding: 0.5em 1em;
  display: block;
}
@media only screen and (max-width: 980px) {
  .booking-nav-item span {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .booking-nav-item {
    flex: 1;
  }
}
@media only screen and (max-width: 845px) {
  .booking-nav-item span {
    padding: 0.25em 0.5em;
  }
}

.booking-nav-item.booking-nav-active {
  background-color: var(--successColor);
}

.booking-nav-item.disabled {
  background-color: #8093a7; /* ci-exempt fc-ignore: disabled nav item */
  pointer-events: none;
}
/* END addbooking/AddBookingMaster styles */
/* addbooking/AddPax styles */
.add-booking-pax-container {
  display: flex;
  flex-wrap: wrap;
}

.add-booking-pax-wrapper {
  background-color: lightgray;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  color: var(--cbat-primary);
  align-items: center;
  padding: 5px;
  cursor: pointer;
  margin: 10px;
  transition: all 0.5s ease;
  width: 255px;
}

.add-booking-pax-wrapper div {
  margin: 5px;
}

.add-booking-pax-wrapper.selected {
  background-color: var(--successColor);
  color: white;
}

.add-booking-pax-wrapper.selected h3 {
  color: white;
}

.shrink-expand-enter,
.shrink-expand-leave-to {
  width: 0;
  height: 0;
}

.shrink-expand-enter-active,
.shrink-expand-leave-active {
  transition: all 0.5s ease;
}
/* END addbooking/AddPax styles */
/* prcing/AddPricing styles */
.pricing-module-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.pricing-module-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 200px;
  max-width: 500px;
  border: 2px solid var(--cbat-primary);
  padding: 10px;
}

.pricing-module-group {
  display: flex;
  flex-direction: column;
  margin: 5px;
}

.pricing-module-buttons {
  width: 100%;
  text-align: center;
}

.pricing-summary-table {
  width: 100%;
  display: flex;
  justify-content: center;
}

.pricing-summary-table-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 5px;
  background-color: lightgray;
  padding: 5px;
}

.math {
  font-size: 2em;
  font-weight: 900;
}
@media only screen and (max-width: 507px) {
  .pricing-summary-table {
    flex-direction: column;
    align-items: flex-end;
  }
  .pricing-summary-table-item {
    padding: 0 5px;
  }
}
/* END pricing/AddPricing styles */
/* addbooking/summary/Summary styles */
.add-summary-container {
  width: 100%;
  display: flex;
  justify-content: center;
}
.add-summary-wrapper {
  border: 2px solid var(--cbat-primary);
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.commission {
  color: red;
}
/* END addbooking/summary/Summary styles */
/* addbooking/summary/DupeModal styles */

.dupe-modal-button-row {
  display: flex;
  justify-content: center;
}
/* END addbooking/summary/DupeModal styles */
.component-container .summary {
  padding: 1em;
  border: 1px solid var(--borderColor);
  margin: 0.5em 0;
  border-radius: var(--borderRadius);
}
.component-container .summary .summary-group span:first-child {
  width: 15em;
  display: inline-block;
  max-width: 50%;
}

div.editBooking_summary {
  padding: 1em;
  border: 1px solid var(--borderColor);
  margin: 0.5em 0;
  border-radius: var(--borderRadius);
}
div.editBooking_summary .summary-group span:first-child {
  width: 15em;
  display: inline-block;
  max-width: 50%;
}

@media only screen and (max-height: 600px) {
  .app-container .component-container > div {
    display: flex;
    flex-direction: column;
  }
  .app-container .component-container .booking-nav-wrapper {
    order: 1;
  }
  .app-container .component-container > div > div:last-child {
    order: 2;
  }
  .app-container .component-container .summary {
    order: 3;
  }
}

/* ****  END EDIT TRIP CSS (REPO STYLESHEET)  **** */

/* ****  TRIP INFO VUE  **** */

.trip-info-wrapper {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  border: 1px solid black;
  flex-wrap: wrap;
  padding: 5px;
}

.trip-info-group {
  display: flex;
  flex-direction: column;
  min-width: 150px;
  max-width: 40%;
  flex: 1 1 0;
  margin: 5px;
}

.trip-info-button-row {
  width: 100%;
}

@media (max-width: 431px) {
  .trip-info-group {
    max-width: 100%;
  }
}

/* ****  END TRIP INFO VUE  **** */

/* ****  CRUISE DETAIL VUE  **** */

.cruise-detail-row {
  display: flex;
  flex-direction: column;
  max-width: 800px;
  align-items: center;
}

.cruise-detail-row form {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
}

.detail-group {
  display: flex;
  flex-direction: column;
  max-width: 500px;
  align-items: center;
  margin-bottom: 5px;
  width: 100%;
}

.detail-group input,
.detail-group select {
  width: 100%;
}

.warning {
  font-size: 1.2em;
  font-weight: 900;
  color: red;
}

/* ****  END CRUISE DETAIL VUE  **** */

/* ****  LAND DETAIL VUE  **** */

.info-detail-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.info-detail-wrapper {
  max-width: 800px;
  display: flex;
  justify-content: center;
}

.info-detail-column {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  border: 2px solid var(--cbat-primary);
  padding: 5px;
}

.info-group {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  margin: 5px;
}

.info-button-row {
  width: 100%;
  text-align: center;
}

/* ****  END LAND DETAIL VUE  **** */

/* ****  VENDOR SELECT VUE  **** */

#group-select {
  width: inherit;
}

/* ****  END VENDOR SELECT VUE  **** */

/* ****  ALTERNATE AGENT VUE  **** */

.agent-form-container {
  max-width: 75%;
  border: 1px solid var(--cbat-primary);
  border-radius: 5px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.agent-form-container > div {
  display: flex;
  flex-direction: column;
}

/* ****  END ALTERNATE AGENT VUE  **** */

/* ****  ADD RESERVATION CSS (REPO STYLESHEET)  **** */

#body-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  min-height: 100vh;
}
@media only screen and (max-width: 700px) {
  #body-content {
    flex-direction: column;
  }
}
/* New navigation - on desktop to left on phone across top */
.sidebar {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-top: 1em;
  padding: 1em;
  background-color: #e8e6d9; /* ci-exempt fc-ignore: sidebar background */
  margin-right: 1em;
  z-index: 100;
  box-shadow: var(--box-shadow-level2);
}
html[data-theme="dark"] .sidebar {
  background-color: var(--cbat-bg-secondary);
}

html[data-theme="dark"] .result-box {
  background-color: var(--cbat-bg-secondary);
  color: var(--cbat-text);
}

html[data-theme="dark"] .message.info {
  color: var(--cbat-text) !important;
}

html[data-theme="dark"] .amenity_card_heading {
  color: var(--cbat-text) !important;
}

html[data-theme="dark"] .amenity_content_text {
  color: var(--cbat-text) !important;
}

html[data-theme="dark"] .amenity_card_label {
  color: var(--cbat-text) !important;
}

html[data-theme="dark"] .edit_booking_amenity_content {
  color: var(--cbat-text);
}

/* ******  START QUICK CRUISE SIDEBAR ****** */

.quick_cruise_sidebar {
  background-color: #2a75ac; /* ci-exempt fc-ignore: quick cruise sidebar */
}

#quick_cruise_ul {
  padding-left: 10px !important;
}

.quick_cruise_li {
  list-style: none;
  margin-bottom: 10%;
}

.quick_cruise_a {
  text-decoration: none;
  font-size: 1.4em;
  font-weight: bolder !important;
}

.quick_cruise_box {
  padding: 1em !important;
  width: 97.5% !important;
}

.quick_cruise_sidebar_title {
  color: white;
  font-size: 1.5em;
  font-weight: bolder;
}

/* ******  END QUICK CRUISE SIDEBAR ****** */

/* ******  START QUICK CRUISE PAGES ****** */

.quick_cruise_container {
  display: flex;
}
.sidebar_div {
  flex: 1;
  width: 20%;
  height: 100vh;
  background-color: #2a75ac; /* ci-exempt fc-ignore: quick cruise sidebar */
  /* border: 1px solid red; */
}
.content_div {
  flex: 2;
  width: 48%;
  height: 100vh;
  border: 1px solid green;
  position: relative;
}

#edit_prebooking {
  top: 20vh;
}

#vendor_prebooking {
  top: 12.5vh;
}

#details_prebooking {
  top: 10vh;
}

#payment_prebooking {
  top: 5vh;
}

.prebooking_center {
  width: 75%; /* Can be in percentage also. */
  height: auto;
  margin: 0 auto;
  padding: 10px;
  position: relative;
  border: 20px double goldenrod;
}

.qc_image {
  display: block;
  margin: 0 auto;
  margin-bottom: 2%;
  padding-top: 5%;
}

.qc_title {
  font-size: 2.65em;
  font-family: var(--cbat-font-heading);
  font-weight: bolder;
  color: var(--error);
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
}

.qc_label {
  color: var(--main-color);
  text-align: center;
  font-size: 1.8em;
}

.qc_drop_down {
  text-align: center;
}

.qc_input_container {
  text-align: center;
  margin-bottom: 5%;
}

.qc_input {
  color: white;
  background-color: #f59831; /* ci-exempt fc-ignore: quick cruise input button */
  padding-right: 15%;
  padding-left: 15%;
  font-size: 1.25em;
}

.qc_section_title {
  text-align: center;
}

.qc_payment_form_child {
  display: inline-block;
  width: 48%;
}

.pay_button {
  width: "100%";
}

/* ******  END QUICK CRUISE PAGES ****** */

.sidebar #steps ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  font-size: 0.9em;
}
.sidebar #steps ul li a {
  text-decoration: none;
  color: var(--body-font-color);
  width: 100%;
  height: 100%;
  display: block;
  padding: 0.5em;
}
.sidebar #steps ul li a.active-crumb {
  color: #ffffff; /* ci-exempt fc-ignore: white text on active breadcrumb */
  background-color: var(--main-color);
}
.sidebar #steps ul li a.active {
  color: #ffffff; /* ci-exempt fc-ignore: white text on active step */
  background-color: var(--successColor);
}
.sidebar #steps ul li a.disabled {
  pointer-events: none;
  cursor: default;
  color: var(--cbat-border);
}
.sidebar #steps ul li i {
  margin-right: 0.5em;
}

.result-box {
  background-color: #ffffff; /* ci-exempt fc-ignore: white result box bg */
  color: var(--body-font-color);
  width: 100%;
  padding: 0.5em;
  box-shadow: var(--box-shadow-level1);
  font-size: 0.85em;
}
.result-box p {
  margin: 0.5em 0;
}
.result-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.result-box h5 {
  margin: 0;
}
.result-box ul li {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  padding: 0.25em 0;
}
.sub-label {
  font-weight: bold;
  font-weight: bold;
  width: 11em;
}

.result-box.agent-box {
  background-color: red;
  color: #ffffff; /* ci-exempt fc-ignore: white text on red agent box */
}
.autocomplete {
  display: none;
}
.viewMore {
  display: none;
}
@media only screen and (max-width: 1175px) {
  .sidebar {
    padding: 0.5em;
  }
}
@media only screen and (max-width: 980px) {
  .sidebar {
    flex: 2;
  }
}
@media only screen and (max-width: 700px) {
  .sidebar {
    padding: 0;
    flex: 0 1 auto;
    margin: 0;
    position: sticky;
    top: 0;
  }
  .sidebar #steps ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
  }

  .sidebar #steps ul li a {
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0.5em 0;
  }
  .sidebar #steps ul li:last-child {
    width: 100%;
  }
  .sidebar .result-box {
    display: none;
  }
}
/* Main area styling */
.main-area {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: 4;
}

.main-area div.formArea,
.main-area .roll-out-autocomplete,
.main-area form.formArea {
  max-width: 80%;
  margin: 0 auto;
}
.roll-out-autocomplete table {
  border-collapse: collapse;
}
.roll-out-autocomplete table tr td {
  cursor: pointer;
  padding: 0.25em 0.5em;
}
.roll-out-autocomplete table tr:hover td {
  background-color: var(--main-color);
  color: #ffffff; /* ci-exempt fc-ignore: white text on autocomplete hover */
}
.error-text {
  color: var(--errorColor);
  font-style: italic;
  margin: 0;
  font-size: 0.65em;
}

input.error-field {
  background-color: var(--errorBGColor);
  border-color: var(--errorColor);
}

label.error-label {
  color: var(--errorColor);
  font-style: italic;
}

/* Add Contact */
#contact-selected-button-container .instructions {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#contact-selected-button-container .instructions > * {
  margin: 1em auto;
}
/* END Add Contact */
/* Passenger selection page */
.slidergroup {
  width: 100%;
}
.pax-main-row {
  margin: 0 auto;
  width: 100%;
}

.pax-main-row .icon-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pax-main-row .icon-row .message {
  margin: 0.5em 0;
}
.pax-main-row .icon-row h3 {
  margin: 0;
}
.pax-main-row .button-row {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 0.5em 0;
}
.pax-main-row .info-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0.5em 0;
  padding: 0.5em;
  border: 1px solid var(--successColor);
  background-color: var(--successBGColor);
  border-radius: var(--borderRadius);
}
.pax-main-row .info-row h4 {
  margin-right: 0.5em;
}
.final-row .add-pax {
  color: #ffffff; /* ci-exempt fc-ignore: white add passenger text */
}
.pax-group {
  display: flex;
  flex-direction: column;
  position: relative;
}

.pax_add_passenger_wrapper {
  display: flex;
}

.pax_add_passenger {
  width: 33%;
}

.ap_input {
  max-width: 250px;
}

.ap_ac {
  max-width: 250px !important;
}

#add_passenger_final_row {
  margin-top: 5%;
}

#save-button-1 {
  margin-right: 1.5%;
}

.add_passenger_button_row {
  display: flex;
  justify-content: flex-end !important;
  margin-top: 2%;
  margin-bottom: 1%;
}

#add_reservation_outside_wrapper {
  min-width: 80%;
  margin: 0 auto;
}

@media only screen and (max-width: 500px) {
  #add_reservation_outside_wrapper {
    max-width: 96% !important;
    margin: 0 auto;
  }
}

.pax-autocomplete {
  max-height: 200px;
  position: absolute;
  z-index: 100;
  background-color: white;
  border: 1px solid var(--borderColor);
  box-shadow: var(--box-shadow-level2);
  border-radius: 5px;
  top: 100%;
  left: 0;
  width: 150%;
  overflow-y: auto;
  overflow-x: auto;
  -webkit-transition: max-height 1s ease;
  -o-transition: max-height 1s ease;
  transition: max-height 1s ease;
}

.pax-autocomplete-animation-enter {
  max-height: 0px;
  overflow: hidden;
}

.pax-autocomplete-animation-enter-active {
  overflow: hidden;
}

.pax-autocomplete-animation-leave-active {
  max-height: 0px;
  overflow: hidden;
}

.autocomplete-rows-wrapper {
  display: flex;
  flex-direction: column;
  padding: 0.25em;
}

.autocomplete-row {
  display: flex;
  justify-content: flex-start;
  font-size: 0.85em;
  border-bottom: 1px solid var(--borderColor);
}
.autocomplete-row > * {
  margin-right: 0.5em;
}

.autocomplete-row:hover {
  color: white;
  background-color: var(--cbat-primary);
  cursor: pointer;
}

.autocomplete-row p {
  display: inline-block;
}
.pax-dupe-row {
  display: flex;
  width: 100%;
  flex-direction: column;
  text-align: center;
  align-items: center;
}

.highlight {
  font-size: 1.2em;
  font-weight: 900;
}

.pax-dupe-button-row {
  display: flex;
  width: 100%;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}
@media only screen and (max-width: 680px) {
  .final-row.flex-row {
    margin: 1em 0;
    display: flex;
    flex-direction: row;
  }
}
/* END Passenger selection page */

/* Confirm new contact */
.emphasize {
  font-size: 1.1em;
  font-weight: 900;
}

.confirm-new-button-row {
  width: 100%;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}
/* End Confirm New Contact */

/* Product Vendor/Select */
.vendor-group {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin: 0.5em auto;
  align-items: center;
  flex-wrap: wrap;
}
.vendor-group label {
  width: 10em;
}
.vendor-group .buttonrow {
  width: 100%;
}

/* END Product Vendor/Select */
/* Pricing styles */

.price-box {
  display: flex;
  justify-content: center;
  margin: 1em 0;
}

.price-column {
  display: flex;
  flex-direction: column;
  width: 50%;
}
.price-column .message {
  width: 100%;
  max-width: 100%;
  margin: 0.5em 0;
}
.price-box div:first-of-type {
  padding-right: 2em;
  /* border: 1px solid var(--borderColor); */
}

.price-column label {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 0.5em 0;
}
.price-column label i {
  padding-left: 0.5em;
}
.tooltip {
  position: relative;
}

.tooltip:hover:after {
  background: #333; /* ci-exempt fc-ignore: dark tooltip bg */
  background: rgba(0, 0, 0, 0.8);
  border-radius: 5px;
  bottom: 26px;
  color: #fff; /* ci-exempt - white text on dark tooltip */
  content: attr(title);
  right: 20px;
  padding: 5px 15px;
  position: absolute;
  z-index: 98;
  width: 220px;
  font-size: 0.8em;
  font-weight: normal;
}

.price-box div:first-of-type .tooltip:hover:after {
  left: -10px;
}

.profit-explain-text {
  font-size: 0.9em;
  margin: 5px 0 0 0;
}
.profit-explain-text span {
  font-weight: bold;
  font-size: 1.1em;
}
.price-column h5 {
  margin: 0;
  padding: 0;
}

.vendor-confirm-container img {
  width: 100%;
}

@media (max-width: 400px) {
  .price-row p {
    font-size: 0.8em;
  }

  .price-box {
    flex-wrap: wrap;
  }

  .price-box .price-column {
    width: 100%;
    flex-basis: 100%;
  }

  .price-box .price-column input {
    max-width: 100%;
    width: 100%;
  }

  .price-box div:first-of-type .tooltip:hover:after {
    left: -160px;
  }

  .price-box div:first-of-type {
    border: 0;
    border-right: 0px;
    margin-right: 0px;
    padding-right: 0px;
  }

  .slide-move {
    transition: all 0.5s ease;
  }
}

/* END Pricing styles */

/* Miscellaneous Popup Styles */
.misc-row {
  border: 2px solid var(--cbat-primary);
  margin: 5px;
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
}

.misc-num-row {
  width: 100%;
  text-align: right;
  background-color: var(--cbat-primary);
  color: var(--cbat-text-on-primary);
  font-weight: 900;
  padding-right: 5px;
  margin-bottom: 5px;
}
/* END Miscellaneous Popup Styles */

/* Transfer Popup Styles */

/* END Transfer Popup Styles */
/* Add Gift Styles */

.gift-title {
  width: 100%;
  text-align: center;
  margin-bottom: 0.75em;
}

.gift-wrapper {
  border: 1px solid var(--borderColor);
  margin-bottom: 2em;
}

.gift-item-title {
  width: 100%;
  color: var(--cbat-primary);
  padding: 0.25em 0.5em;
  font-weight: 900;
  margin-bottom: 0.75em;
  border-bottom: 1px solid var(--borderColor);
}

.gift-body {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 0.75em;
}

.gift-type {
  display: flex;
  flex-direction: column;
  margin: 0 3em;
}

.gift-type p {
  margin: 0;
}

.gift-amount {
  min-width: 200px;
  max-width: 60%;
  flex: 1 1 0;
}

.gift-amount p {
  margin: 0;
  font-weight: 900;
}

.gift-amount-wrapper {
  flex: 1 1 0;
  display: flex;
  justify-content: center;
}

.gift-amount.input {
  display: flex;
  flex-direction: column;
}

.gift-amount.not-chosen,
.gift-amount.definite-amount {
  background-color: lightgray;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
}

.gift-button-row {
  width: 100%;
  padding: 5px;
}

@media (max-width: 475px) {
  .gift-body {
    align-items: flex-start;
    justify-content: center;
  }

  .gift-body .gift-type {
    margin: 0 0 0.75em 0;
    max-width: none;
    width: 100%;
  }

  .gift-amount.not-chosen,
  .gift-amount.definite-amount {
    max-width: none;
    width: 100%;
    flex: 1 1 auto;
  }
}
/* END Add Gift Styles */
/* Confirm Gift Styles */
.confirm-wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.confirm-button-row {
  display: flex;
  width: 100%;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}
/* END Confirm Gift Styles */

/* Payment Page Styles */

.add-button-row {
  width: 100%;
  text-align: center;
  margin-bottom: 0.75em;
}

.payment-wrapper {
  border: 1px solid black;
  margin-bottom: 0.75em;
}

.payment-title {
  width: 100%;
  color: var(--cbat-primary);
  padding: 0.25em 0.5em;
  font-weight: 900;
  margin-bottom: 0.75em;
  border-bottom: 1px solid var(--borderColor);
}

.payment-body {
  display: flex;
  flex-wrap: wrap;
  padding: 0.25em;
  justify-content: space-between;
  align-items: flex-end;
}

.payment-group {
  display: flex;
  flex-direction: column;
  min-width: 150px;
  max-width: 170px;
  flex: 1 1 0;
  margin-right: 0.25em;
}

.big-label {
  font-size: 1.2em;
}

.payment-row-buttons {
  width: 100%;
  margin: 0 0 0.25em 0.25em;
  text-align: left;
}

@media (max-width: 600px) {
  .payment-group {
    max-width: none;
    width: 100%;
    flex: 1 1 auto;
  }
}
/* END Payment Page Styles */

/* Confirmation Page Styles */
.modify-item {
  color: red;
  cursor: pointer;
  text-decoration: underline;
  font-size: 1.1em;
  font-weight: 900;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1.2em;
  color: var(--cbat-primary);
  font-weight: 900;
}
.confirm-container p {
  padding: 0 0.5em;
}
/* END Confirmation Page Styles */

/* Confirmation Page Popup Styles */
/* Difference */
.green {
  font-weight: 900;
  color: green;
}

.blue {
  font-weight: 900;
  color: navy;
}

.difference-container {
  text-align: center;
}

.difference-form {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid black;
  padding: 5px;
  justify-content: space-between;
}

.difference-group {
  min-width: 150px;
  max-width: 40%;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
}

.difference-button-row {
  width: 100%;
}

/* Profit */

.custom-link {
  color: red;
  text-decoration: underline;
  cursor: pointer;
  font-weight: 900;
  font-size: 1.1em;
}

.change-profit-form {
  display: flex;
  justify-content: space-between;
  border: 1px solid var(--borderColor);
  padding: 5px;
  flex-wrap: wrap;
}

.change-profit-group {
  display: flex;
  flex-direction: column;
  min-width: 150px;
  max-width: 30%;
  flex: 1 1 0;
}

.change-profit-title {
  width: 100%;
  text-align: center;
}

.change-profit-container {
  text-align: center;
}

.change-profit-button-row {
  width: 100%;
  margin-top: 5px;
}
/* Customer Balance */
.cust-bal-container {
  text-align: center;
}

.cust-bal-body {
  text-align: center;
}

.cust-bal-form-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 5px;
  border: 1px solid black;
}

.cust-bal-group {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 150px;
  max-width: 30%;
}

.seperator {
  font-size: 1.5em;
  font-weight: 900;
}

.cust-bal-button-row {
  width: 100%;
}

@media (max-width: 600px) {
  .cust-bal-group {
    max-width: none;
    flex: 0 0 100%;
  }
}
/* Dupe booking */

/* Commission */
.vendor-price-container {
  text-align: center;
}

.vendor-price-form {
  border: 1px solid black;
  display: flex;
  justify-content: center;
  padding: 5px;
  flex-wrap: wrap;
}

.vendor-price-group {
  display: flex;
  flex-direction: column;
  width: 60%;
  margin-bottom: 5px;
}

.vendor-price-button-row {
  width: 100%;
}

/* END Confirmation Page Popup Styles */
.custom-modal-content div[class*="button-row"] {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
/* ****  END ADD RESERVATION CSS (REPO STYLESHEET)  **** */

/* ****  ARTICLE TEMPLATE VUE  **** */

/* .article-template-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ****  END ARTICLE TEMPLATE VUE  **** */

/* ****  HOME VUE (from training-app)  **** */

.training-search-row {
  padding-left: 10px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

/* .input-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 1 1 0;
  max-width: 300px;
} */

.input-container input {
  width: 100%;
}

/* ****  END HOME VUE (from training-app)  **** */

/* ****  START CBAT CSS STYLE TAG REMOVAL  **** */

/* ****  START ACCOUNTING  **** */

/* **** start templates/accounting/upload_pending_commissions.html  **** */

/* upload_pending_commissions.html — styles moved to template <style> block */

/* **** end templates/accounting/upload_pending_commissions.html  **** */

/* ****  END ACCOUNTING  **** */

/* ****  START GROUPS  **** */

/* start templates/groups/add_edit_leadform.html */

.leadform_hr {
  width: 50%;
  margin-top: 25px;
  margin-bottom: -10px;
}

/* end templates/groups/add_edit_leadform.html */

/* start templates/groups/add_group_finance_agent_comm.html */

.add-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.add-container form,
.description-container {
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border: 2px solid var(--cbat-primary);
  border-radius: 10px;
  padding: 10px;
  margin-top: 20px;
}

.add-container form > div {
  display: flex;
  flex-direction: column;
}

.description-container > ul {
  list-style: none;
}

.description-container > ul > li > span {
  font-weight: 900;
  font-size: 1.1em;
  color: var(--cbat-primary);
}

/* .auto-complete-suggestions {
  position: absolute;
  cursor: pointer;
  border: 2px solid var(--cbat-border-light);
  border-top: none;
  z-index: 99;
  top: 90%;
  left: 0;
  right: 0;
  background-color: #fff;
  display: none;
  border-radius: 5px;
}

.auto-complete-suggestions > div {
  padding: 2px;
  border-top: 1px solid #000;
  transition: 1s all ease;
} */
/*
.auto-complete-suggestions > div:hover {
  background-color: #256EB7;
  color: #fff;
} */

/* end templates/groups/add_group_finance_agent_comm.html */

/* ****  END GROUPS  **** */

/* ****  START MARKETING  **** */

/* start templates/marketing/coming_soon.html */

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

/* end templates/marketing/coming_soon.html */

/* start templates/marketing/group_flyer.html */

.tooltip:hover:after {
  background: #333; /* ci-exempt fc-ignore: dark tooltip bg */
  background: rgba(0, 0, 0, 0.8);
  border-radius: 5px;
  bottom: 26px;
  color: #fff; /* ci-exempt - white text on dark tooltip */
  content: attr(title);
  left: 20%;
  /* right: 20px; */
  padding: 5px 15px;
  position: absolute;
  z-index: 98;
  width: 220px;
  font-size: 0.8em;
}

/* end templates/marketing/group_flyer.html */

/* ****  END MARKETING  **** */

/* ****  START REPORTS  **** */

/* start templates/reports/potential_group_report.html */

.pgr_td {
  text-align: center;
}

/* end templates/reports/potential_group_report.html */

/* ****  END REPORTS  **** */

/* ****  END CBAT CSS STYLE TAG REMOVAL  **** */

/* *****  START ICLEAD.CSS  ***** */

.view-lead-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.lead-info {
  margin-right: 2em;
  flex: 1;
}

.lead-actions {
  flex: 2;
}

.action-group {
  border: 1px solid var(--borderColor);
  border-radius: 6px;
  padding: 0.5em;
  margin: 0.5em 0;
}

.action-group h3 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.action-group .toggle {
  cursor: pointer;
}

.action-group .results table {
  width: 100%;
}

.action-group .results {
  padding: 10px 15px;
}

.action-group .results,
.action-group .fa-caret-square-up,
.action-group.open .fa-caret-square-down,
.lead-info .fa-caret-square-up,
.lead-info.open .fa-caret-square-down {
  display: none;
}

.action-group.open .results,
.action-group.open .fa-caret-square-up,
.lead-info.open .fa-caret-square-up {
  display: block;
}

.lead-info .toggle {
  display: none;
}

.lead-info .buttonrow {
  gap: 0.5em;
  margin-top: 1.5em;
}

@media only screen and (max-width: 1150px) {
  .view-lead-wrapper {
    flex-direction: column;
  }
  .lead-info {
    padding: 0.5em;
    margin: 0.5em 0;
  }
  .lead-info h3 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
}

/* ICLEAD Calendar */

table.calendar {
  table-layout: fixed;
  width: 100%;
  border: 1px solid var(--borderColor);
  border-collapse: collapse;
}

table.calendar td {
  vertical-align: top;
  text-align: left;
  height: 150px;
}

table.calendar td ul {
  height: 150px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  overflow-y: auto;
}

table.calendar td ul li {
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: var(--body-font-color);
  background-color: transparent;
  padding: 0.25em 0.5em;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  color: var(--body-font-color);
}

table.calendar td ul li a {
  font-size: 0.9em;
}

table.calendar td ul li:before {
  font-family: "Font Awesome 5 Pro"; /* ci-exempt - icon font (vendor) */
  font-size: 16px;
  content: "\f017";
  margin-right: 0.25em;
}

table.calendar td ul li.past-not-completed {
  background-color: var(--errorColor);
  color: #ffffff; /* ci-exempt fc-ignore: white text on past incomplete */
}

table.calendar td ul li.past-completed {
  background-color: var(--successColor);
  color: #ffffff; /* ci-exempt fc-ignore: white text on past completed */
}

table.calendar td ul li.past-not-completed:before {
  content: "\f2ee";
}

table.calendar td ul li.past-completed:before {
  content: "\f058";
}

table.calendar td ul li a,
table.calendar a {
  text-decoration: none;
  color: inherit;
}

.no-day {
  border: 1px solid var(--borderColor);
  background-color: #ffffff; /* ci-exempt - white calendar cell bg (light mode) */
}

html[data-theme="dark"] .no-day {
  background-color: var(--cbat-bg-secondary);
}

.no-day > b {
  display: none;
}

.today {
  border: 2px dashed var(--successColor);
  background-color: var(--successBGColor);
}

.past {
  background-color: red; /* ci-exempt - legacy stub, superseded by .past-not-completed/.past-completed */
}

.calendarHeader {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.calendarHeader > * {
  margin: 0 0.5em;
}

.calendarHeader h3 {
  font-size: 2em;
}

/* *****  END ICLEAD.CSS  ***** */

/* *****  START MARKETING_CALENDAR.CSS  ***** */

.promo-day-item {
  border-bottom: 1px solid black;
}

/* *****  END MARKETING_CALENDAR.CSS  ***** */

/* *****  START QUESTIONNAIRE.CSS  ***** */

.questionnaire-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.info-block {
  width: 800px;
  margin-bottom: 15px;
}

.questionnaire-block {
  width: 50%;
  /* max-width: 400px; */
  /* width: 800px; */
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media screen and (max-width: 1210px) {
  .questionnaire-block {
    width: 75%;
  }
}

@media screen and (max-width: 815px) {
  .questionnaire-block {
    width: 100%;
  }
}

.form-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  border: 5px solid var(--cbat-primary);
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 25px;
}

.questionnaire_label {
  color: #00008b !important; /* ci-exempt fc-ignore: questionnaire label styling */
  font-weight: 900;
  font-size: 1em;
  margin-bottom: 5px;
  display: block;
}

#questionnaire_part_one input,
select {
  color: var(--cbat-text-muted);
  font-size: 1em;
  margin-bottom: 15px;
}

.questionnaire_hide {
  display: none;
}

.error-text {
  color: red;
  font-style: italic;
  font-size: 0.9em;
  font-weight: 900;
}

.phone-decorator {
  font-size: 1.2em;
  font-weight: 900;
}

#questionnaire_part_one_button {
  background-color: orange !important;
  font-size: 1.2em !important;
}

.questionnaire_part_one_button_spacer {
  margin-top: 25px;
}

.questionnaire_label_center {
  margin-left: auto;
  margin-right: auto;
}

#questionnaire_team_leader input {
  color: var(--cbat-text-muted);
  font-size: 1em;
  margin-bottom: 15px;
}

#questionnaire_team_leader_button {
  background-color: orange !important;
  font-size: 1.2em !important;
  margin-top: 10px !important;
}

.questionnaire_sub_title {
  font-size: 1.5em !important;
  margin-top: 1px !important;
  text-decoration: underline !important;
}

.questionnaire_warning {
  font-size: 0.9em;
  font-weight: bold;
  color: var(--error) !important;
  line-height: 1.5em;
}

#questionnaire_part_two input,
select {
  color: var(--cbat-text-muted);
  font-size: 1em;
  margin-bottom: 15px;
}

#set_tax_id {
  font-size: 1.2em !important;
  margin-top: 10px !important;
  margin-bottom: 19px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.bank_info_container {
  display: flex;
}

#dd_enroll_div {
  flex: 1;
}

#id_routing_number {
  margin-bottom: 5px !important;
}

.dd_warning {
  color: var(--error) !important;
  font-size: 0.9em;
  font-weight: bold;
}

#set_dd_id {
  font-size: 1em !important;
  margin: 1em 0em !important;
  padding-left: 33px !important;
  padding-right: 33px !important;
}

#dd_check_example {
  margin: 0 auto;
}

.dd_check_image {
  width: 400px;
  height: auto;
}

@media screen and (max-width: 799px) {
  .bank_info_container {
    display: block;
  }
}

@media screen and (max-width: 799px) {
  #dd_enroll_div {
    margin-bottom: 5%;
  }
}

@media screen and (max-width: 799px) {
  #set_dd_id {
    margin-top: 5%;
  }
}

#questionnaire_complete_button {
  font-size: 1.2em !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* updated questionnaire styles 10/15/24 */

.hide_address_fields {
  display: none;
}

#questionnaire_address_results {
  margin-left: 2%;
  margin-top: 2.5%;
}

.fa-refresh {
  color: white;
}

/* Pop up modals located on questionnaire_part_2.html */

/* ***** tax modal ***** */

.questionnaire_modal_label {
  color: #00008b !important; /* ci-exempt fc-ignore: questionnaire label styling */
  font-weight: 900;
  font-size: 1.25em;
  margin-bottom: 5px;
  text-align: center;
}

#tax_id_exists_label,
#bank_account_exists_label {
  color: var(--cbat-text-muted) !important;
  font-weight: 900;
  font-size: 1.25em;
  margin-top: 20px;
  margin-bottom: 5px;
  text-align: center;
}

.questionnaire_modal_buttons {
  display: inline-block;
  width: 100%;
  text-align: center;
}

#submit_tax_id_btn,
#close_tax_id_btn {
  width: 250px;
  margin-bottom: 25px;
}

/* ***** direct deposit modal ***** */

#dd_modal_content {
  border: 5px solid #256eb7 !important; /* ci-exempt fc-ignore: modal primary border */
  border-radius: 10px !important;
}

#dd_valid {
  margin-top: 2.5%;
}

.dd_modal_warning {
  color: var(--error) !important;
  font-size: 0.9em;
  font-weight: bold;
  margin-bottom: 2.5%;
}

.modal_check_div {
  margin-bottom: 5%;
}

#submit_dd_id_btn,
#close_dd_id_btn {
  width: 250px;
  margin-bottom: 25px;
}

#city_address {
  font-size: 1.3em !important;
  padding: 0.5em;
  width: fit-content;
  /* min-width: 120px; */
}

/* end Pop up modals located on questionnaire_part_2.html */

/* *****  END QUESTIONNAIRE.CSS  ***** */

/* *****  START PROMO-RATE-LINK-TOOLTIP.CSS  ***** */

.promo-rate-link {
  font-size: 14px;
  color: black;
  position: relative;
}

.promo-rate-link::before,
.promo-rate-link::after {
  --scale: 0;
  position: absolute;
  top: -0.25rem;
  left: 50%;
  color: black;
  transform: translateX(-50%) translateY(-100%) scale(var(--scale));
  transition: 50ms transform;
}

.promo-rate-link::before {
  content: attr(data-tooltip);
  height: 20px;
  padding: 0.5rem;
  width: max-content;
  background: #99ccff; /* ci-exempt fc-ignore: tooltip background */
  border-radius: 0.3rem;
  text-align: center;
}
.promo-rate-link:hover::before {
  --scale: 1;
}

/* *****  END PROMO-RATE-LINK-TOOLTIP.CSS  ***** */

/* *****  START VIEW_BLAST.HTML  ***** */

#view_blast_name {
  color: var(--cbat-primary) !important;
  font-weight: bold !important;
  font-size: var(--cbat-font-size-xl) !important;
  text-align: center !important;
}

.view_blast_heading {
  font-weight: bold !important;
  color: var(--cbat-text) !important;
  font-size: var(--cbat-font-size-xl) !important;
}

.vb_side_dashboard {
  background-color: var(--cbat-bg-secondary);
  border: 2.75px solid var(--cbat-primary);
  border-radius: 10.5px;
  box-shadow: 5px 2.5px 2.5px var(--cbat-border);
  padding: 2.5% !important;
}

.vb_top_dashboard {
  margin-bottom: 2.5% !important;
}

.view_blast_action_group_heading {
  font-weight: bold !important;
  color: var(--cbat-primary) !important;
  font-size: var(--cbat-font-size-xl) !important;
  margin-left: 10px !important;
}

.view_blast_toggle {
  color: var(--cbat-primary) !important;
  font-size: var(--cbat-font-size-xl) !important;
  font-weight: bold !important;
  margin-right: 20px !important;
}

.vb_toggle_alt {
  color: var(--cbat-primary) !important;
  margin-top: 1% !important;
  margin-right: 20px !important;
  font-size: var(--cbat-font-size-xl) !important;
  font-weight: bold !important;
}

.inner_tr {
  border: none !important;
}

.blast_inner_th {
  border: none !important;
}

.view_blast_table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--cbat-border);
}

.view_blast_table th,
.view_blast_table td {
  border: 1px solid var(--cbat-border);
  padding: 0.25em 0.5em;
}

.vb_side_label,
.vb_side_value {
  font-size: var(--cbat-font-size-base) !important;
  line-height: 1.4 !important;
}

.vb_side_label {
  width: 10em !important;
  flex-shrink: 0;
  color: var(--cbat-primary) !important;
  font-weight: bold !important;
}

.vb_side_value {
  color: var(--cbat-text) !important;
  font-weight: bold !important;
}

.view_blast_value {
  color: var(--cbat-text) !important;
  font-size: var(--cbat-font-size-base);
  font-weight: bold;
  text-align: center;
}

.bounce_spam_report_variable {
  color: var(--error);
}

.vb_background {
  background-color: var(--cbat-bg-secondary);
}

#view_blast_button {
  margin-top: 0 !important;
  min-width: 250px !important;
  font-size: var(--cbat-font-size-lg) !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  color: var(--cbat-text-on-primary) !important;
}

.active_btn {
  background-color: var(--success);
}

.cancel_btn {
  background-color: var(--error);
}

@media only screen and (max-width: 500px) {
  .vb_summary_table {
    font-size: var(--cbat-font-size-sm);
    max-width: 480px;
  }
}

/* *****  END VIEW_BLAST.HTML  ***** */

/* ***** start icleads/thank you ***** */
#thank_you_container {
  margin-top: 25px;
}

#questionnaire_part_one_button {
  margin-top: 10px;
}

#thank_you_video_link {
  text-align: center;
}

.ty_video_link_text {
  font-family: var(--cbat-font-heading);
  font-size: 1.5em;
}

.ty_video_link_text_span {
  color: var(--main-color);
  font-weight: 900;
}
/* ***** end icleads/thank you ***** */

.view_lead_link_button {
  background: none !important;
  border: none;
  padding: 0 !important;
  color: var(--main-color);
  text-decoration: underline;
  cursor: pointer;
  font-size: 22.5px;
  margin-left: -70px !important;
}

#view_lead_lead_actions {
  margin-top: 4%;
}

.view_lead_action_button {
  margin: 1% 1.5%;
  font-size: 1.2em;
  min-height: 40px;
  width: 90%;
  color: white;
  background-color: var(--main-color);
  border: 2.75px solid var(--main-color);
  border-radius: 10.5px;
  box-shadow: 5px 2.5px 2.5px silver;
  cursor: pointer;
}

/* *****  iti_phone_styles  ***** */

.iti_input,
.iti_button {
  height: 35px;
  margin: 0;
  padding: 6px 12px;
  border-radius: 2px;
  font-family: inherit;
  font-size: 100%;
  color: inherit;

  &[disabled] {
    background-color: var(--cbat-bg-secondary);
  }
}

.iti_input,
.iti_select {
  border: 1px solid var(--cbat-border);
  border-radius: var(--borderRadius);
  width: 220px;
}
input::placeholder {
  color: var(--cbat-border-light);
}

.iti_button {
  color: #fff; /* ci-exempt - white text on legacy ITI button */
  background-color: #428bca; /* ci-exempt fc-ignore: legacy ITI button */
  border: 1px solid #357ebd; /* ci-exempt fc-ignore: legacy ITI button */
  border-radius: var(--borderRadius);
  margin-left: 5px;
  &:hover {
    background-color: #3276b1; /* ci-exempt fc-ignore: legacy ITI button hover */
    border-color: #285e8e; /* ci-exempt fc-ignore: legacy ITI button hover */
    cursor: pointer;
  }
}

.iti_hide {
  display: none;
}

.validate {
  max-width: 150px;
}

#iti_phone_validate_container {
  display: flex;
  flex-flow: row;
}

#valid-msg {
  margin-left: 10px;
  color: green;
  margin-top: 7.5px;
}

#error-msg {
  margin-left: 10px;
  color: var(--errorColor);
  margin-top: 7.5px;
}

.add_iclead_message {
  text-align: center;
  color: var(--errorColor);
  font-size: 20px;
}

/* *****  end iti_phone_styles  ***** */

/* ***** New Client / User Styles ***** */

#view_blast_name {
  color: var(--cbat-primary) !important;
  font-weight: bold !important;
  font-size: var(--cbat-font-size-xl) !important;
  text-align: center !important;
}

.view_blast_heading {
  font-weight: bold !important;
  color: var(--cbat-text) !important;
  font-size: var(--cbat-font-size-xl) !important;
}

.vb_side_dashboard {
  background-color: var(--cbat-bg-secondary);
  border: 2.75px solid var(--cbat-primary);
  border-radius: 10.5px;
  box-shadow: 5px 2.5px 2.5px var(--cbat-border);
  padding: 2.5% !important;
}

.vb_top_dashboard {
  margin-bottom: 2.5% !important;
}

.action-group {
  background-color: var(--cbat-bg-secondary);
}

.view_blast_action_group_heading {
  font-weight: bold !important;
  color: var(--cbat-primary) !important;
  font-size: var(--cbat-font-size-xl) !important;
  margin-left: 10px !important;
}

.view_blast_toggle {
  color: var(--cbat-primary) !important;
  font-size: var(--cbat-font-size-xl) !important;
  font-weight: bold !important;
  margin-right: 20px !important;
}

.vb_toggle_alt {
  color: var(--cbat-primary) !important;
  margin-top: 1% !important;
  margin-right: 20px !important;
  font-size: var(--cbat-font-size-xl) !important;
  font-weight: bold !important;
}

.inner_tr {
  border: none !important;
}

.blast_inner_th {
  border: none !important;
}

.view_blast_table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--cbat-border);
}

.view_blast_table th,
.view_blast_table td {
  border: 1px solid var(--cbat-border);
  padding: 0.25em 0.5em;
}

.vb_side_label,
.vb_side_value {
  font-size: var(--cbat-font-size-base) !important;
  line-height: 1.4 !important;
}

.vb_side_label {
  width: 10em !important;
  flex-shrink: 0;
  color: var(--cbat-primary) !important;
  font-weight: bold !important;
}

.vb_side_value {
  color: var(--cbat-text) !important;
  font-weight: bold !important;
}

.view_blast_value {
  color: var(--cbat-text) !important;
  font-size: var(--cbat-font-size-base);
  font-weight: bold;
  text-align: center;
}

.bounce_spam_report_variable {
  color: var(--error);
}

#view_blast_button {
  margin-top: 0 !important;
  min-width: 250px !important;
  font-size: var(--cbat-font-size-lg) !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  color: var(--cbat-text-on-primary) !important;
}

.active_btn {
  background-color: var(--success);
}

.cancel_btn {
  background-color: var(--error);
}

@media only screen and (max-width: 500px) {
  .vb_summary_table {
    font-size: var(--cbat-font-size-sm);
    max-width: 480px;
  }
}

.left_info {
  margin-right: 2em;
  -webkit-box-flex: 1;
  flex: 1;
  max-width: 490px !important;
}

#left_edit_user_dropdown {
  margin-top: 2.5%;
}

.eu_dropdown_spacer {
  margin-left: 2%;
}

#edit_user_left_column {
  background-color: var(--cbat-border-light);
  border: 2.75px solid var(--main-color);
  border-radius: 10.5px;
  box-shadow: 5px 2.5px 2.5px silver;
  padding: 1.5%;
  margin-top: 1.5%;
  padding-left: 3%;
}

#edit_user_column_main_body {
  margin-top: 2%;
}

#edit_user_top_dashboard {
  width: 100% !important;
  margin-top: 2% !important;
}

#edit_user_top_dashboard th,
#edit_user_top_dashboard td {
  border: 3.5px solid var(--cbat-border-light) !important;
}

.eu_top_label {
  padding: 0.25em;
  font-size: 1.25em;
  color: var(--main-color) !important;
}

#edit_user_access_message {
  color: var(--main-color) !important;
  margin-left: 2%;
  width: 100% !important;
}

#edit_user_lock_reason,
#edit_user_profile_notes {
  max-width: 300px !important;
}

#edit_user_add_update_btn {
  text-align: center;
  margin: 0 auto;
}

#edit_user_login_attempts_table {
  margin-left: 2%;
}

#edit_user_login_attempts_table th,
#edit_user_login_attempts_table td {
  border: 1px solid var(--main-color) !important;
}

#edit_user_reset_attempts_table {
  margin-left: 2%;
}

#edit_user_reset_attempts_table th,
#edit_user_reset_attempts_table td {
  border: 1px solid var(--main-color) !important;
}

#edit_user_reset_title {
  margin-left: 2%;
}

#edit_user_emails_table th,
#edit_user_emails_table td {
  border: 1px solid var(--main-color) !important;
  color: var(--main-color) !important ;
}

.inline_trip_link {
  display: inline-block;
  width: 45%;
  text-align: center;
}

.trips_table_title {
  margin-left: 2%;
}

.recent_trips_h3_data {
  color: var(--main-color) !important ;
}

.eu_payment_preference {
  display: inline-block;
  margin-left: 2% !important;
  margin-top: 0% !important;
  color: var(--cbat-text-secondary);
  font-size: 1.17em !important;
}

.user_border {
  border: 2.75px solid var(--main-color);
  border-radius: 10.5px;
  box-shadow: 5px 2.5px 2.5px silver;
}

#needs_approval_hide,
#inactive_hide,
#locked_hide,
#trained_hide,
#contract_exempt_hide,
#show_odysseus_admin_hide {
  display: none;
  font-size: 0.75em !important;
  top: 8.5vh;
  left: 30vw;
  position: absolute;
  word-wrap: break-word;
  word-break: break-word;
  background-color: var(--cbat-border-light) !important;
  text-align: left !important;
  margin-block-start: 0em !important;
  max-width: 75% !important;
}

#eu_needs_approval:hover #needs_approval_hide {
  display: block;
}

#eu_locked:hover #locked_hide {
  display: block;
}

#eu_inactive:hover #inactive_hide {
  display: block;
}

#eu_trained:hover #trained_hide {
  display: block;
}

#eu_contract_exempt:hover #contract_exempt_hide {
  display: block;
}

#eu_show_odysseus_admin:hover #show_odysseus_admin_hide {
  display: block;
}

.eu_no_reports {
  margin-right: 2%;
}

.eu_overflow {
  white-space: nowrap;
  width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  z-index: 555555;
}

.eu_overflow:hover {
  width: 100% !important;
  padding: 1.5% !important;
  border: 2.75px solid var(--main-color);
  border-radius: 10.5px;
  box-shadow: 5px 2.5px 2.5px silver;
  overflow: visible;
  position: relative;
  background-color: var(--cbat-border-light) !important;
}

.eu_address {
  display: inline-block;
  vertical-align: top;
}

.eu_emails_success {
  font-size: 18.5px !important;
  font-weight: bold !important;
}

.eu_success_line_break {
  padding-top: 2% !important;
  background-color: green !important;
}

.eu_emails_failed {
  font-size: 18.5px !important;
  font-weight: bold !important;
}

.eu_failed_line_break {
  padding-top: 2% !important;
  background-color: var(--error) !important;
}

.eu_emails_spam {
  font-size: 18.5px !important;
  font-weight: bold !important;
}

.eu_spam_line_break {
  padding-top: 2% !important;
  background-color: orange !important;
}

#eu_internal_notes {
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: break-word;
  width: 80%;
}

#eu_internal_notes_title {
  vertical-align: top;
  margin-top: 0px !important;
}

#eu_about_me {
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: break-word;
  width: 85%;
}

#eu_about_me_title {
  vertical-align: top;
  margin-top: 0px !important;
}

.view_client_button {
  width: 50%;
}

/* ***** end New Client / User Styles ***** */

/* *****  start view_people.html  ***** */

/* Scoped table styling — match the airy feel of search_trips */
#search_client_body table.booking-table thead th {
  background-color: var(--cbat-primary);
  color: var(--cbat-text-on-primary);
  padding: 0.6em 0.75em;
  font-size: var(--cbat-font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-color: var(--cbat-primary-dark);
}
#search_client_body table.booking-table tbody td {
  padding: 0.55em 0.75em;
  font-size: var(--cbat-font-size-base);
  font-weight: bold;
}

.search-people-btn-row {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
.search-people-btn-row .top_search_search_button {
  width: 160px;
}
/* Override hardcoded 250px width on autocomplete input when inside #top-search */
#top-search .custom-auto-complete { width: 100%; }
#top-search .auto-complete-input {
  width: 100% !important;
  height: 36px !important;
  padding: 0 10px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  border: 1px solid var(--cbat-border) !important;
  border-radius: 5px !important;
  font-size: 0.875rem !important;
  background: var(--cbat-bg) !important;
  color: var(--cbat-text) !important;
}

/* *****  end view_people.html  ***** */

/* *****  Skip to main content (a11y)  ***** */

.skip-to-main {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.skip-to-main:focus {
  clip: auto;
  clip-path: none;
  height: auto;
  overflow: visible;
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  white-space: normal;
  padding: 0.75em 1.5em;
  background: var(--cbat-primary);
  color: var(--cbat-text-on-primary);
  font-family: var(--cbat-font-body);
  font-size: var(--cbat-font-size-base);
  font-weight: 700;
  text-decoration: none;
  z-index: 9999;
  border-radius: 0 0 var(--borderRadius) 0;
  outline: 3px solid var(--cbat-accent);
  outline-offset: 2px;
}

/* *****  start new_edit_user.html styles  ***** */

.left_info {
  margin-right: 2em;
  -webkit-box-flex: 1;
  flex: 1;
  max-width: 490px !important;
}

/* eu-left-info: edit_user-specific class added alongside .left_info on
   new_edit_user.html only. Phase 1 (mobile fluid sidebar), Phase 2
   (mobile form layout), and Phase 2b (phone stack + wider profile notes
   at all widths). Scoped via this prefix so view_lead.html, view_client.html,
   new_add_user.html (which also use the underlying shared classes) are
   unaffected. */

/* All widths — apply on desktop AND mobile. */

/* Phone Number: input first, Text User link below. Same treatment desktop
   and mobile. inline-flex keeps the field inline with the label on desktop
   (so "Phone Number: (561) 425-8200" stays on one line and the Text User
   link drops below the input). !important needed because the global
   .eu_field rule has display: inline-block !important. */
.eu-left-info #edit_user_phone_number .eu_field {
  display: inline-flex !important;
  flex-direction: column;
  gap: 4px;
  vertical-align: top;
}
.eu-left-info #edit_user_phone_number .eu_field input {
  order: 1;
}
.eu-left-info #edit_user_phone_number .eu_field .uf-action-link,
.eu-left-info #edit_user_phone_number .eu_field .uf-warning-text {
  order: 2;
}

/* On mobile, .eu_field is part of the flex row (.edit_user_parent flex layout)
   so it needs to be a regular block-level flex container, not inline-flex. */
@media only screen and (max-width: 600px) {
  .eu-left-info #edit_user_phone_number .eu_field {
    display: flex !important;
  }
}

/* Profile Notes: textarea fills the sidebar width. Overrides the global
   #edit_user_profile_notes { max-width: 300px !important } cap. */
.eu-left-info #edit_user_profile_notes {
  max-width: none !important;
}
.eu-left-info #edit_user_profile_notes textarea {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}

/* Mobile-only — sidebar fluid width, form row flex layout, label-tightening. */
@media only screen and (max-width: 600px) {
  .eu-left-info {
    max-width: 100% !important;
    width: 100%;
    margin-right: 0;
  }

  /* Form rows: flex layout so long labels shrink the input cell instead of
     wrapping the whole row. Tighten font and spacing. Scoped to
     .eu-left-info so other pages using .edit_user_parent / .eu_title /
     .eu_field are unaffected. */
  .eu-left-info .edit_user_parent {
    display: flex !important;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin: 6px 8px;
    white-space: normal !important;
  }
  .eu-left-info .eu_title {
    flex: 0 0 auto;
    font-size: var(--cbat-font-size-base);
    padding: 0;
    margin: 0;
  }
  .eu-left-info .eu_field {
    flex: 1 1 0;
    min-width: 0;
    font-size: var(--cbat-font-size-base);
    padding: 0;
  }
  .eu-left-info .eu_field input,
  .eu-left-info .eu_field select,
  .eu-left-info .eu_field textarea {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
  }

  /* Profile Notes mobile-specific: row margin + label as block. */
  .eu-left-info #edit_user_profile_notes {
    margin: 8px;
  }
  .eu-left-info #edit_user_profile_notes .eu_title {
    display: block !important;
    margin-bottom: 4px;
  }

  /* Phase 3: prevent overlap of heading text + "Lifetime: $X" link + toggle
     in tab-content drop cards (Trips & Activity, Team Sales & Activity, etc).
     The global .action-group h3 is display: flex; justify-content:
     space-between with no wrap — at narrow viewports children collide. Scope
     to .eu-tab-content-wrapper so view_lead, view_client, etc. (which also
     use .action-group) are unaffected. */
  .eu-tab-content-wrapper .action-group h3 {
    flex-wrap: wrap;
    gap: 4px 8px;
    align-items: center;
  }

  /* Phase 4: stack side-by-side internal cards on mobile. eu_trips.html uses
     inline style="display: grid; grid-template-columns: 1fr 1fr" on
     .analytics-breakdown (Top Vendors + Entry Methods) and on inner grid
     divs (chart + table inside each .analytics-card). Inline styles need
     !important to override. Scope to .eu-tab-content-wrapper so other
     pages using .analytics-card are unaffected. */
  .eu-tab-content-wrapper .analytics-breakdown,
  .eu-tab-content-wrapper .analytics-card > div {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Phase 5: tables get horizontal scroll on mobile so wide content doesn't
     overflow the card edge. display: block makes <table> a block-level
     element that honors overflow-x; rows and cells keep their default
     table-row / table-cell display. Scope to .eu-tab-content-wrapper so
     tables on other pages (view_lead, view_client, etc.) are unaffected.
     white-space: nowrap on cells prevents columns wrapping awkwardly.
     Apply to ALL <table> elements in tab content (not just .booking-table)
     so .tl-data-table (TL Analytics excessive gifts) etc. are also covered. */
  .eu-tab-content-wrapper table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    font-size: 0.85em;
  }
  .eu-tab-content-wrapper table th,
  .eu-tab-content-wrapper table td {
    padding: 6px 4px;
    white-space: nowrap;
  }

  /* Phase 6: tile-grid polish for mobile. Gifts & Discounts has 4 stat tiles
     that stacked 1-up after Phase 4 — that's too tall. Switch to 2-up.
     Status checkbox row keeps its existing flex-wrap behavior; just allow
     labels to wrap if they don't fit on one line. */
  .eu-gifts-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .eu-checkbox-item .eu_top_label label {
    white-space: normal;
    word-break: break-word;
  }

  /* Phase 8: TL Analytics has Top Vendors and Booking Entry Methods sections
     that use .tl-chart-grid with inline style="grid-template-columns: 1fr 2fr"
     — the inline style overrides the existing 900px media-query fallback,
     so at narrow widths the donut chart and table get squeezed side-by-side
     (vendor names truncate, table columns truncate). Force 1-up with
     !important to override the inline style. .tl-chart-grid is scoped to
     eu_tl_analytics.html only. */
  .tl-chart-grid {
    grid-template-columns: 1fr !important;
  }

  /* Phase 9: visual scroll affordance for tables that overflow on mobile.
     Phase 5 made tables scrollable but the scrollbar is hidden by default
     on macOS/iOS — users don't realize they can swipe. Force a visible
     thin scrollbar AND add a subtle right-edge shadow that hints at more
     content. Scoped to .eu-tab-content-wrapper. */
  .eu-tab-content-wrapper table::-webkit-scrollbar {
    height: 6px;
    -webkit-appearance: none;
  }
  .eu-tab-content-wrapper table::-webkit-scrollbar-track {
    background: var(--cbat-bg-secondary);
    border-radius: 3px;
  }
  .eu-tab-content-wrapper table::-webkit-scrollbar-thumb {
    background: var(--cbat-border);
    border-radius: 3px;
  }
  .eu-tab-content-wrapper table::-webkit-scrollbar-thumb:hover {
    background: var(--cbat-text-muted);
  }
  /* Right-edge fade indicator — only visible when the table can scroll */
  .eu-tab-content-wrapper table {
    background-image: linear-gradient(to right, transparent, transparent 90%, rgba(0,0,0,0.08));
    background-repeat: no-repeat;
    background-attachment: local;
    background-size: 100% calc(100% - 8px);
  }

  /* Phase 10: TL Analytics inner tier rows (.tl-tier-row inside Sales Tier /
     Join Year / Commission Rate cards) have a 5-column grid (Tier label +
     Rev + Agent + TL + House) with gap: 2px. At 375px viewport the cells
     are ~65px each and right-aligned currency values like $434,150 and
     $25,815 visually touch each other. Bump gap and reduce font slightly
     so values have breathing room. */
  .tl-tier-row,
  .tl-tier-header-row {
    gap: 8px !important;
    font-size: 0.78em !important;
  }

  /* Phase 7a: touch targets ≥44px for mobile per WCAG 2.5.5. Tab buttons,
     status checkboxes, and accordion toggle arrows currently render too
     small to tap reliably. */

  /* Tabs: ensure ≥44px tappable height (existing inline rule sets
     padding: 10px 8px / font 12px which is ~38px tall). */
  .eu-tab-btn {
    min-height: 44px;
  }

  /* Status checkboxes (Needs Approval, Lock, etc.): bump from 1.2em (~17px)
     to 22px and add visible padding so the whole tile is tappable. */
  #edit_user_checkboxes input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
    cursor: pointer;
  }

  /* Accordion toggle (the caret-square arrow) — give it a 44×44 hit area
     so it's reliably tappable. The icon stays its current visual size. */
  .eu-tab-content-wrapper .toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
  }
}

#left_edit_user_dropdown {
  margin-top: 2.5%;
}

.eu_dropdown_spacer {
  margin-left: 2%;
}

#edit_user_left_column {
  background-color: var(--cbat-border-light);
  border: 2.75px solid var(--main-color);
  border-radius: 10.5px;
  box-shadow: 5px 2.5px 2.5px silver;
  padding: 1.5%;
  margin-top: 1.5%;
  padding-left: 3%;
}

#edit_user_column_main_body {
  margin-top: 2%;
}

#edit_user_top_dashboard {
  width: 100% !important;
  margin-top: 2% !important;
}

#edit_user_top_dashboard th,
#edit_user_top_dashboard td {
  border: 3.5px solid var(--cbat-border-light) !important;
}

.eu_top_label {
  padding: 0.25em;
  font-size: 1.25em;
  color: var(--main-color) !important;
}

#edit_user_access_message {
  color: var(--main-color) !important;
  margin-left: 2%;
  width: 100% !important;
}

#edit_user_lock_reason,
#edit_user_profile_notes {
  max-width: 300px !important;
}

#edit_user_add_update_btn {
  text-align: center;
  margin: 0 auto;
}

#edit_user_login_attempts_table {
  margin-left: 2%;
}

#edit_user_login_attempts_table th,
#edit_user_login_attempts_table td {
  border: 1px solid var(--main-color) !important;
}

#edit_user_reset_attempts_table {
  margin-left: 2%;
}

#edit_user_reset_attempts_table th,
#edit_user_reset_attempts_table td {
  border: 1px solid var(--main-color) !important;
}

#edit_user_reset_title {
  margin-left: 2%;
}

#edit_user_emails_table th,
#edit_user_emails_table td {
  border: 1px solid var(--main-color) !important;
  color: var(--main-color) !important ;
}

.inline_trip_link {
  display: inline-block;
  width: 45%;
  text-align: center;
}

.trips_table_title {
  margin-left: 2%;
}

.recent_trips_h3_data {
  color: var(--main-color) !important ;
}

.eu_payment_preference {
  display: inline-block;
  margin-left: 2% !important;
  margin-top: 0% !important;
  color: var(--cbat-text-secondary);
  font-size: 1.17em !important;
}

.user_border {
  border: 2.75px solid var(--main-color);
  border-radius: 10.5px;
  box-shadow: 5px 2.5px 2.5px silver;
}

#needs_approval_hide,
#inactive_hide,
#locked_hide,
#trained_hide,
#contract_exempt_hide,
#show_odysseus_admin_hide {
  display: none;
  font-size: 0.75em !important;
  top: 8.5vh;
  left: 30vw;
  position: absolute;
  word-wrap: break-word;
  word-break: break-word;
  background-color: var(--cbat-border-light) !important;
  text-align: left !important;
  margin-block-start: 0em !important;
  max-width: 75% !important;
}

#eu_needs_approval:hover #needs_approval_hide {
  display: block;
}

#eu_locked:hover #locked_hide {
  display: block;
}

#eu_inactive:hover #inactive_hide {
  display: block;
}

#eu_trained:hover #trained_hide {
  display: block;
}

#eu_contract_exempt:hover #contract_exempt_hide {
  display: block;
}

#eu_show_odysseus_admin:hover #show_odysseus_admin_hide {
  display: block;
}

.eu_no_reports {
  margin-right: 2%;
}

.eu_overflow {
  white-space: nowrap;
  width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  z-index: 555555;
}

.eu_overflow:hover {
  width: 100% !important;
  padding: 1.5% !important;
  border: 2.75px solid var(--main-color);
  border-radius: 10.5px;
  box-shadow: 5px 2.5px 2.5px silver;
  overflow: visible;
  position: relative;
  background-color: var(--cbat-border-light) !important;
}

.eu_address {
  display: inline-block;
  vertical-align: top;
}

.eu_emails_success {
  font-size: 18.5px !important;
  font-weight: bold !important;
}

.eu_success_line_break {
  padding-top: 2% !important;
  background-color: green !important;
}

.eu_emails_failed {
  font-size: 18.5px !important;
  font-weight: bold !important;
}

.eu_failed_line_break {
  padding-top: 2% !important;
  background-color: var(--error) !important;
}

.eu_emails_spam {
  font-size: 18.5px !important;
  font-weight: bold !important;
}

.eu_spam_line_break {
  padding-top: 2% !important;
  background-color: orange !important;
}

#eu_internal_notes {
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: break-word;
  width: 80%;
}

#eu_internal_notes_title {
  vertical-align: top;
  margin-top: 0px !important;
}

#eu_about_me {
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: break-word;
  width: 85%;
}

#eu_about_me_title {
  vertical-align: top;
  margin-top: 0px !important;
}

.action-group {
  background-color: var(--cbat-bg-secondary);
}

/* *****  end new_edit_user.html styles  ***** */

.address_row {
  display: flex;
}

.address_column {
  flex: 50%;
}

.address_column_70 {
  flex: 60%;
  margin-right: 2.5%;
}

.address_column_85 {
  flex: 75%;
  margin-right: 2.5%;
}

.address_column_30 {
  flex: 30%;
}

.address_column_15 {
  flex: 15%;
}

.label_btn_line {
  display: flex;
  flex-flow: row;
}

.questionnaire_refresh_link {
  margin-left: 84%;
}

@media screen and (max-width: 615px) {
  .questionnaire_refresh_link {
    margin-left: 76%;
  }
}

.questionnaire_refresh_button {
  background-color: var(--successColor);
  border: none;
  border-radius: 4px;
}

.questionnaire_input_full {
  width: 100%;
}

.questionnaire_input {
  width: 95%;
}

.questionnaire_spacer {
  height: 20px;
}

.no_background {
  padding: 1.5%;
}

.grey_background {
  background-color: #f5f2f2; /* ci-exempt fc-ignore: questionnaire background */
  padding: 1.5%;
  border-radius: 5px;
}

.q_readonly {
  background: #f5f2f2; /* ci-exempt fc-ignore: questionnaire readonly */
}

#edit_user_phone_number {
  margin-top: 2%;
}

.questionnaire_stack {
  margin-top: 2.5%;
}

@media screen and (max-width: 615px) {
  .q_mobile {
    display: block;
    width: 100%;
    margin-top: 1.5%;
  }
}

.questionnaire_title_div {
  background: rgb(255, 165, 0); /* ci-exempt fc-ignore: questionnaire title fallback */
  background: linear-gradient(
    90deg,
    rgba(255, 165, 0, 1) 0%, /* ci-exempt fc-ignore: decorative gradient */
    rgba(254, 208, 113, 1) 100% /* ci-exempt fc-ignore: decorative gradient */
  );
  color: white;
  border-radius: 5px;
}

.questionnaire_title_p {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
  margin-left: 8px !important;
  font-size: 1.2em !important;
}

.i_70 input {
  width: 90%;
}

.i_30 select {
  width: 90% !important;
}

.i_30 input {
  width: 90%;
}

.i_100 input {
  width: 100%;
}

.contact_form_link {
  text-align: center;
}

@media screen and (max-width: 435px) {
  .address_row {
    display: block;
  }
  .address_column_85,
  .address_column_70,
  .address_column_30 {
    width: 100%;
    display: block;
  }
  .address_column_85 {
    margin-bottom: 7.5px;
  }
}

/* .i_70,
#country {
  display: none;
} */

/* ***** todos dropcard ***** */

.dropcard_td,
.dropcard_th {
  border: 1px solid black !important;
}

.dropcard_th {
  background-color: var(--cbat-bg-secondary);
}

.dropcard_table {
  margin-bottom: 2%;
}

/* ***** end todos dropcard ***** */

/* ***** client notes dropcard ***** */

.client_notes_dropcard_th {
  border: none !important;
  background-color: var(--main-color);
  color: white;
}

.client_notes_dropcard_tr {
  border: none !important;
}

.client_notes_dropcard_td {
  border: none !important;
  padding-bottom: 2.5vh;
  background-color: var(--cbat-bg-secondary);
}

.client_note_btn {
  border: none !important;
  float: right;
}

#client_notes_results {
  width: 90%;
  margin: 0 auto;
}

.client_notes_button_div {
  margin-bottom: 3.5vh;
}

.agent_notes_button_div {
  margin-bottom: 3.5vh;
}

#agent_notes_results {
  width: 90%;
  margin: 0 auto;
}

.loading_text {
  display: none;
}

.loader {
  width: 120px;
  height: 20px;
  background: linear-gradient(var(--cbat-primary) 0 0) left -25% top 0 /20% 100% no-repeat
    var(--cbat-bg-secondary);
  animation: l7 1s infinite steps(6);
}
@keyframes l7 {
  100% {
    background-position: right -25% top 0;
  }
}

/* ***** end client notes dropcard ***** */
.top_deals_header_image {
  padding-top: 20px;
  display: block;
  margin: 0 auto;
  /* text-align: center; */
}
.top_deals_title {
  font-size: 2em !important;
  text-align: center;
  margin-bottom: 1px !important;
  margin-top: 10px !important;
}
.top_deal_sun {
  display: inline-block;
  font-size: larger;
  color: orangered;
}

.top_deals_tag_line {
  color: #228b22; /* ci-exempt fc-ignore: top deals branding */
  font-size: 1.5em !important;
  text-align: center;
  margin-top: 1px !important;
}

.top_deal_text {
  color: var(--cbat-text-muted) !important;
  text-align: center;
}

#top_deals_tables {
  margin-top: 50px;
}

.top_deal_table_heading {
  color: white;
  background-color: var(--main-color);
}

#top_deals_tables tr:nth-child(odd) td {
  background-color: #d5eef5; /* ci-exempt fc-ignore: table row striping */
}

#top_deals_tables tr:nth-child(odd):hover td {
  background-color: var(--main-color);
  color: white;
}

.view_client_button_delete {
  width: 140%;
}

#todos_drop_table th {
  border: 1px solid black;
}

#todos_drop_table td {
  border: 1px solid black;
}

/* *****  START SUBDOMAIN  ***** */

#edit_site_wrapper {
  /* display: none; */
  /* border: 1px solid blue; */
  margin-top: 5vh;
  margin-bottom: 5vh;
}

#edit_site_left_wrapper {
  /* display: none; */
  /* border: 1px solid red; */
  display: inline-block;
  width: 65%;
}

#edit_site_mock_up_wrapper {
  border: 4px solid #dbd4d4; /* ci-exempt fc-ignore: mock-up wrapper border */
  /* box-shadow: -5px 8px 45px 11px rgba(247, 249, 182, 0.8); fc-ignore: commented out shadow */
  /* -webkit-box-shadow: -5px 8px 45px 11px rgba(247, 249, 182, 0.8); fc-ignore: commented out shadow */
  /* -moz-box-shadow: -5px 8px 45px 11px rgba(247, 249, 182, 0.8); fc-ignore: commented out shadow */
  /* width: 90%; */
  margin: 0 auto;
  /* margin-top: 5vh;
  margin-bottom: 5vh; */
}

#mock_up_header {
  width: 100%;
  height: 4vh;
  background-color: var(--main-color);
}

#mock_up_header_img {
  display: inline-block;
  background-color: var(--main-color);
  margin-left: 5%;
  max-height: 4vh;
}

#mock_up_header_img img {
  height: 3.15vh;
  vertical-align: bottom;
}

#mock_up_header_url {
  display: inline-block;
  margin-left: 15%;
  width: 65%;
}

.url_text {
  background-color: white;
  border-radius: 10px;
  padding-left: 2.5%;
  margin-top: -10px !important;
  margin-bottom: 0px !important;
}

#custom_url_name {
  font-weight: bolder;
  color: darkblue;
}

#mock_up_personal {
  width: 100%;
  /* height: 225vh; */
}

#mock_up_photo {
  display: inline-block;
  width: 20.5%;
  vertical-align: top;
}

#mock_up_photo img {
  margin-left: 12.5%;
  margin-top: 5%;
  border-width: 3px;
  border-style: groove;
  border-color: lightgray;
}

#mock_up_socials {
  display: inline-block;
  width: 75%;
  vertical-align: top;
}

#personal_top_row p {
  font-size: 1.5em;
  margin-left: 7.5%;
}

#mock_up_name {
  color: var(--main-color);
  margin-right: 15%;
  font-weight: bolder;
}

.mock_up_social_icon a {
  color: var(--accent-color);
  margin-right: 5%;
}

.personal_br_card {
  display: inline-block;
  width: 26.5%;
  vertical-align: top;
  margin-left: 7.5%;
}

.personal_br_card_email {
  width: 26.5%;
  vertical-align: top;
  margin-left: 7.5%;
}

.personal_br_left {
  display: inline-block;
  width: 10.5%;
  vertical-align: top;
}

.personal_br_left i {
  color: var(--main-color);
  font-size: 1.65em;
  margin-top: 2.25vh;
}

.personal_br_right {
  display: inline-block;
  width: 82.5%;
  vertical-align: top;
}

.personal_br_right p {
  margin-left: 15%;
}

.pbr_line_one {
  margin-top: 1vh;
  margin-bottom: 0.85vh !important;
  font-size: 1.1em;
  font-weight: bolder;
}

.pbr_line_two {
  margin-top: 0.85vh !important;
  font-size: 0.95em;
  font-weight: bolder;
}

#mock_up_bio {
  width: 100%;
}

.mock_up_sub_wrapper {
  width: 94%;
  margin: 0 auto;
}

.mock_up_title {
  text-transform: uppercase;
  color: var(--main-color);
  font-weight: bolder;
  font-size: 1.2em;
  border-bottom: 0.5em solid var(--accent-color);
}

.mock_up_title_text {
  margin-bottom: 0.35em !important;
}

.booking_engine_tooltip {
  padding-left: 2.5%;
  padding-right: 2.5%;
  padding-top: 2.5%;
  padding-bottom: 2.5%;
  color: orange;
  font-size: 1.35em;
}

.booking_engine_tooltip .booking_engine_tooltip_text {
  visibility: hidden;
  width: 15vw;
  background-color: var(--main-color);
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  margin-left: 1%;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.booking_engine_tooltip:hover .booking_engine_tooltip_text {
  visibility: visible;
}

.mock_up_tooltip_inner_title {
  margin-top: 1vh !important;
  margin-bottom: 1vh !important;
}

.mock_up_tooltip_inner_text {
  text-transform: none !important;
  font-size: 0.5em !important;
  text-align: justify !important;
  margin-right: 7.5% !important;
  margin-left: 7.5% !important;
}

#mock_up_booking_engine_form {
  margin-top: 2.5%;
}

#booking_engine_first_input {
  margin-left: 7% !important;
}

.mock_up_booking_engine_input {
  margin-right: 2.5% !important;
}

.featured_cruises_tooltip {
  padding-left: 2.5%;
  padding-right: 2.5%;
  padding-top: 2.5%;
  padding-bottom: 2.5%;
  color: orange;
  font-size: 1.35em;
}

.featured_cruises_tooltip .featured_cruises_tooltip_text {
  visibility: hidden;
  width: 15vw;
  background-color: var(--main-color);
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  margin-left: 1%;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.featured_cruises_tooltip:hover .featured_cruises_tooltip_text {
  visibility: visible;
}

#mock_up_card_container {
  padding-left: 5%;
}

.mock_up_card {
  height: 34.5vh;
  width: 12vw;
  margin: 2%;
  display: inline-block;
  vertical-align: top;
}

/* .mu_card_text_container {
  min-height: 34.5vh;
  max-height: 34.5vh;
} */

.mu_card_title {
  color: white;
  text-align: center;
  margin-top: 1vh !important;
  font-size: 1.15em;
  font-weight: bolder;
}

.mu_card_description {
  width: 90%;
  color: white;
  margin: 0 auto;
  text-align: left;
  /* text-justify: inter-word; */
}

.muc_odd {
  background: var(--cbat-primary-light);
  background: linear-gradient(
    0deg,
    var(--cbat-primary-light) 0%,
    rgba(45, 108, 253, 1) 100% /* ci-exempt fc-ignore: decorative gradient */
  );
}

.muc_even {
  background: var(--cbat-primary-light);
  background: linear-gradient( /* ci-exempt fc-ignore: decorative gradient */
    0deg,
    rgba(45, 108, 253, 1) 0%, /* ci-exempt fc-ignore: gradient stop */
    var(--cbat-primary-light) 100%
  );
}

/* #mock_up_contact_awards_wrapper {

} */

#mock_up_contact_me_container {
  display: inline-block;
  width: 60%;
}

.contact_me_tooltip {
  padding-left: 2.5%;
  padding-right: 2.5%;
  padding-top: 2.5%;
  padding-bottom: 2.5%;
  color: orange;
  font-size: 1.35em;
}

.contact_me_tooltip .contact_me_tooltip_text {
  visibility: hidden;
  width: 15vw;
  background-color: var(--main-color);
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  margin-left: 1%;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.contact_me_tooltip:hover .contact_me_tooltip_text {
  visibility: visible;
}

#mock_up_contact_form {
  /* max-width: 420px; */
  margin: 0 auto;
  margin-top: 2.5%;
  width: 22.5vw;
}

.mock_up_contact_input {
  color: white;
  font-size: 1em;
  border-radius: 5px;
  background-color: transparent;
  border: 2px solid #cc6666; /* ci-exempt fc-ignore: mock-up contact form */
  transition: all 0.3s;
  padding: 0.5em;
  margin-bottom: 0.5em !important;
  width: 100%;
  box-sizing: border-box;
  outline: 0;
}

.mock_up_contact_input:focus {
  border: 2px solid #cc4949; /* ci-exempt fc-ignore: mock-up contact form focus */
}

#mu_form_textarea {
  height: 15vh;
  resize: vertical;
}

#mock_up_form_submit_button {
  width: 100%;
  background: #cc6666; /* ci-exempt fc-ignore: mock-up form submit button */
  border-radius: 5px;
  border: 0;
  cursor: pointer;
  color: white;
  font-size: 1.15em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  transition: all 0.3s;
}
#mock_up_form_submit_button:hover {
  background: #cc4949; /* ci-exempt fc-ignore: mock-up form submit hover */
}

#mock_up_awards_container {
  display: inline-block;
  vertical-align: top;
  margin-left: 5%;
  width: 34%;
}

.mock_up_specialties {
  list-style: none;
  color: grey;
  font-size: 1.25em;
  margin-bottom: 1.75vh;
}

#mock_up_footer {
  width: 100%;
  height: 4vh;
  background-color: var(--main-color);
  margin-top: 2%;
}

#edit_site_right_wrapper {
  margin-left: 1%;
  /* border: 1px solid red; */
  display: inline-block;
  width: 32.5%;
  vertical-align: top;
}

.mu_instructions_title {
  color: var(--main-color) !important;
  font-size: 1.7em !important;
  text-align: center;
  font-weight: bolder !important;
  margin-bottom: 1vh !important;
}

.mu_site_active {
  color: grey;
  font-size: 1.15em !important;
  text-align: center;
  font-weight: bolder !important;
}

.mock_up_uploads {
  width: 90%;
  margin: 0 auto;
}

.mock_up_right_lower {
  display: block;
  text-align: center;
}

.mu_right_lower_instructions {
  color: grey;
  font-size: 1.15em !important;
  text-align: center;
  font-weight: bolder !important;
  margin-bottom: 1vh !important;
}

.mu_right_lower_form {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

#mu_specialties {
  margin-top: 1.8em !important;
}

.mu_image_input {
  width: 75% !important;
}

.mu_socials_label {
  color: var(--main-color);
  font-size: 1.15em;
  font-weight: bolder;
}

.mu_socials_input_container {
  margin-top: 0.5vh !important;
}

.mu_socials_input_container input {
  width: 75%;
}

.mu_preview_button {
  color: #ffffff; /* ci-exempt fc-ignore: white preview button text */
  background-color: var(--successColor);
  transition: all 0.1s ease;
  cursor: pointer;
  margin: 0 0.5em !important;
}

.mu_button {
  min-width: 75% !important;
}

.subdomain_link_container {
  text-align: center;
  width: 75%;
  margin: 0 auto;
}

.subdomain_summary_link {
  background-color: #ce0606; /* ci-exempt fc-ignore: subdomain summary button */
  box-shadow: 0 5px 0 navy;
  color: white;
  padding: 1em 1.5em;
  text-decoration: none;
  text-transform: uppercase;
  display: block;
}

.subdomain_summary_link:hover {
  background-color: red;
}

.subdomain_summary_link:active {
  box-shadow: none;
  top: 5px;
}

/* *****  END SUBDOMAIN  ***** */

/* *****  EDIT USER ADMIN LINK  ***** */
.eu-admin-link-wrapper {
  margin-bottom: 10px;
}

.eu-admin-link {
  font-size: var(--cbat-font-size-sm);
  padding: 5px 10px;
}

/* *****  MODIFICATION REQUEST FILTERS  ***** */
.filter-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.late-filter-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: bold;
  white-space: nowrap;
  cursor: pointer;
}
.filter-clear-link {
  margin-left: 10px;
}

/* CID expiry badges (modification requests list) */
.cid-badge {
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 0.85em;
  white-space: nowrap;
}
.cid-badge--expired {
  background-color: var(--error-bg);
  color: var(--error);
  font-weight: bold;
}
.cid-badge--warning {
  background-color: var(--warning-bg);
  color: var(--warning-dark);
  font-weight: bold;
}
.cid-badge--ok {
  background-color: var(--success-bg);
  color: var(--success-dark);
}
.cid-badge--stripe {
  background-color: var(--cbat-bg-secondary);
  color: var(--cbat-text-muted);
}

/* CID expiry alert boxes (modification request detail) */
.cid-alert {
  padding: 15px;
  margin-top: 15px;
  border-radius: 4px;
  border-left: 4px solid;
}
.cid-alert h4 { margin-top: 0; }
.cid-alert p { margin-bottom: 0; }
.cid-alert--expired {
  background-color: var(--error-bg);
  border-left-color: var(--error);
}
.cid-alert--expired h4 { color: var(--error); }
.cid-alert--warning {
  background-color: var(--warning-bg);
  border-left-color: var(--warning);
}
.cid-alert--warning h4 { color: var(--warning-dark); }
.cid-alert--ok {
  background-color: var(--success-bg);
  border-left-color: var(--success);
}
.cid-alert--ok h4 { color: var(--success-dark); }

/* Banner expired text */
.banner-expired-text {
  color: var(--error);
}

/* Odysseus exempt toggle */
.inline-form { display: inline; }
.error-color { color: var(--errorColor); }
.odysseus-exempt-status { font-weight: bold; }
.odysseus-exempt-btn { margin-left: 8px; }
.odysseus-exempt-banner { margin-top: 5px; margin-bottom: 0; }
.odysseus-exempt-banner--flex { margin-top: 5px; margin-bottom: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.odysseus-exempt-banner .resume-btn { padding: 2px 10px; font-size: var(--cbat-font-size-xs); /* ci-exempt - compact banner button */ }
.odysseus-exempt-banner a { color: inherit; text-decoration: underline; }
.odysseus-imported-banner { margin-bottom: 0; }

/* Nav unread count badge (changelog) */
.nav-unread-badge {
    background: var(--error);
    color: white;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: var(--cbat-font-size-xs); /* was 11px — bumped to 12px minimum */
}

/* Nav beta label */
.nav-beta-label {
    font-size: var(--cbat-font-size-xs); /* was 10px — bumped to 12px minimum */
    color: var(--cbat-text-muted);
    display: block;
}