/* @import url("marketing_app.css");
@import url("add_reservation.css");
@import url("edit_trip.css");
@import url("marketing_calendar.css");
@import url("iclead.css"); */

:root {
  --main-color: #256eb7;
  --accent-color: #d82c1f;
  --body-font-color: #222222;
  --body-font-family: "Montserrat", sans-serif;
  --header-font-family: "Rubik", sans-serif;
  --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;
}
html,
body {
  width: 100%;
  margin: 0;
  padding: 0;
}
/* set font size/padding/margin as base for body tag */
body {
  font-family: var(--body-font-family);
  font-size: 16px;
  color: var(--body-font-color);
}

/* BEGIN GENERIC STYLING */
div {
  margin: 0;
}
div.container.content {
  width: var(--maxWidth);
  margin: 0 auto;
}
@media only screen and (max-width: 500px) {
  div.container.content {
    width: 100%;
    /* max-width:  var(--maxWidth); */
    margin: 0 20px;
  }
  div.container.content * {
    max-width: 100%;
  }
}

h1,
h2 {
  color: var(--main-color);
  font-weight: 900;
  font-family: var(--header-font-family);
  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;
}

.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.8em;
}
.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;
  color: black !important;
  background-color: #f5f6f6 !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: #666666;
  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: #fefefe;
  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: #696969;
}

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

.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;
  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: #aaa;
  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%;
  }
}

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

/* 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;
  }

  table.responsivetable td {
    border: none;
    border-bottom: 1px solid #eee;
    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: Raleway, sans-serif;
  font-size: 1em;
}
.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;
}

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

.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;
  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;
  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;
  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;
  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: "Raleway", Helvetica, Arial, sans-serif;
  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;
}

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

/* 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 */
@media only screen and (max-width: 1525px) {
  .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;
  }
}

@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: 13px;
  }
  .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: 13px;
  }
  .main-nav:not(.cb_main_nav) .dropdown-link {
    padding: 6px 8px;
    font-size: 12px;
  }
  .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: #666;
  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: #333;
}

.payday-note {
  font-size: 0.9em;
  color: #888;
  font-style: italic;
  margin-top: 10px;
}

.payday-note-under-min {
  color: #e74c3c;
  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;
}

.home-container {
  width: var(--maxWidth);
  margin: 0 auto;
}

/* 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 */
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);
}
html[data-theme="dark"] .onboarding-banner-info {
  background-color: color-mix(in srgb, var(--info) 20%, #1a1a1a);
}
html[data-theme="dark"] .onboarding-banner-danger {
  background-color: color-mix(in srgb, var(--error) 20%, #1a1a1a);
}
html[data-theme="dark"] .onboarding-banner-primary {
  background-color: color-mix(in srgb, var(--cbat-primary) 20%, #1a1a1a);
}

/* Dark mode - Announcements text visibility */
html[data-theme="dark"] .announcements_text {
  color: var(--cbat-text);
}
html[data-theme="dark"] .announcements_text p,
html[data-theme="dark"] .announcements_text span,
html[data-theme="dark"] .announcements_text div,
html[data-theme="dark"] .announcements_text li,
html[data-theme="dark"] .announcements_text strong {
  color: var(--cbat-text);
}
html[data-theme="dark"] .announcements_text a {
  color: var(--cbat-primary);
}

/* Status badges for lead list */
.status-badge {
  display: inline-block;
  padding: 0.25em 0.5em;
  border-radius: 3px;
  font-size: 0.85em;
  font-weight: 600;
  white-space: nowrap;
  margin: 2px;
}
.status-needs-to-sign-contract {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}
.status-needs-to-complete-orientation {
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
}
.status-needs-payment-setup {
  background-color: #ffeaa7;
  color: #7d6608;
  border: 1px solid #fdcb6e;
}
.status-needs-training {
  background-color: #cce5ff;
  color: #004085;
  border: 1px solid #b8daff;
}
.status-active {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}
.status-lost {
  background-color: #dc3545;
  color: white;
  border: 1px solid #c82333;
  margin-left: 0.5em;
}

.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: white;
  background-color: var(--main-color);
  font-size: 1.4em;
  box-sizing: border-box;
  text-align: center;
}

.home-card-title h4 {
  margin: 0 0 0.4em 0;
}

.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: #256eb7;
}
td {
  font-size: 14px;
  padding: 3.5px;
}

.announcements_text {
  font-size: 13.5px;
  font-family: "Rubik";
}

.announcements_ul {
  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: #454545 !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: #454545;
}

.promo-link {
  text-decoration: none;
  color: #256eb7;
  margin-left: 1em;
  font-size: 15px;
  font-family: "Rubik";
}

.quick_links_green {
  color: rgb(0, 128, 0);
}

.quick_links_red {
  color: rgb(255, 0, 0) !important ;
}

.team_leaders_agent_update {
  margin-left: 10px;
  color: rgb(255, 0, 0);
}

.to_dos_table {
  width: 100%;
}

.to_dos_table_headings {
  font-size: 17.5px !important;
  font-family: "Rubik" !important;
}

.to_dos_table_link {
  font-size: 15px !important;
  font-family: "Rubik" !important;
}

.to_dos_table_data {
  font-size: 15px !important;
  font-family: "Rubik" !important;
}

.to_dos_table_icon {
  padding-left: 15px;
}

#no_to_dos {
  font-size: 17.5px !important;
  font-family: "Rubik" !important;
  color: rgb(255, 0, 0) !important;
}

.card-button {
  border-radius: 8px;
  background-color: #256eb7;
  color: #ffffff;
  width: 50%;
  cursor: pointer;
  opacity: 0.5;
}

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

.data-row {
  font-family: var(--body-font-family);
  font-size: 16px;
  font-weight: bold;
  color: var(--main-color);
  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 */
#top-search {
  border-bottom: 2px solid gray;
  padding-bottom: 20px;
}

.top_search_search_button {
  max-width: 200px !important;
  max-height: 25px !important;
  margin-top: 2.5% !important;
}

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

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

table.booking-table,
table.default {
  border-collapse: collapse;
}

table.booking-table th,
table.booking-table td,
table.default th,
table.default td {
  text-align: center;
  border-bottom: 1px solid #ddd;
}

table.booking-table tbody tr,
table.booking-table tbody td,
table.default tbody tr,
table.default tbody td {
  border: 1px solid #ddd;
  font-size: 1em;
  padding: 0.25em 0.5em;
}
table.booking-table tbody tr:nth-child(odd) td,
table.default tbody tr:nth-child(odd) td {
  background-color: #f2f2f2;
}

table.booking-table tbody tr:hover td,
table.default tbody tr:hover td {
  background-color: var(--main-color);
  color: #ffffff;
}
table.booking-table tbody tr:hover td a,
table.default tbody tr:hover td a {
  color: inherit;
}
@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);
  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: rgb(1, 131, 201);
}

.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)
  );
  border-image-slice: 1;
  width: 100%;
}

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

.supporting_doc_file {
  color: #256eb7;
  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),
    rgba(6, 84, 170, 1)
  );
  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: #373d3f;
  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: rgb(6, 84, 170);
  background: linear-gradient(0deg, lightgray -10%, rgba(6, 84, 170, 1) 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: rgb(173, 221, 227);
}

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

.training-card,
#template_first {
  width: 280px;
  height: 200px;
  background: rgb(6, 84, 170);
  background: linear-gradient(
    135deg,
    rgba(6, 84, 170, 1) 0%,
    rgba(3, 143, 209, 0.95) 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 rgba(6, 84, 170, 0.25);
  position: relative;
  overflow: hidden;
}

.training-card:hover,
#template_first:hover {
  color: white;
  background: linear-gradient(
    135deg,
    rgba(3, 143, 209, 1) 0%,
    rgba(1, 184, 236, 0.95) 100%
  );
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(6, 84, 170, 0.35);
}

.training-card:nth-of-type(odd) {
  color: white;
  background: rgb(6, 84, 170);
  background: linear-gradient(
    315deg,
    rgba(6, 84, 170, 1) 0%,
    rgba(3, 143, 209, 0.95) 100%
  );
}

.training-card:nth-of-type(odd):hover {
  color: white;
  background: linear-gradient(
    315deg,
    rgba(3, 143, 209, 1) 0%,
    rgba(1, 184, 236, 0.95) 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: #256eb7;
}

.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: #256eb7 !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";
  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: #256eb7;
  font-weight: 900;
}

.spinner {
  border: 6px solid #ccc;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border-top-color: #256eb7;
  border-left-color: #256eb7;
  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: "Rubik" !important;
  color: rgb(128, 5, 5) !important ;
}

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

.eu_agent_name,
.eu_team_leader_name {
  color: #454545;
}

#edit_user_top {
  padding-bottom: 25px;
}

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

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

.eu_title,
.eu_field {
  display: inline-block !important;
  font-family: "rubik";
  font-size: 18px;
  padding-right: 10px;
  color: var(--main-color);
}

.eu_field input {
  font-family: "rubik";
  font-size: 16.5px;
  padding: 0.25em;
  color: #454545;
}

#edit_user_first_name input {
  width: 14em;
}

#edit_user_last_name input {
  width: 14em;
}

#edit_user_state select {
  font-family: "rubik";
  font-size: 16.5px;
  padding: 0.25em;
  width: 16.5em;
  color: #454545;
}

#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: "rubik";
  font-size: 16.5px;
  color: #454545;
}

#edit_user_reminder_preference select {
  font-family: "rubik";
  font-size: 16.5px;
  padding: 0.25em;
  width: 5em;
  color: #454545;
}

#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: rgb(128, 5, 5) !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: "rubik";
  font-size: 16.5px;
  padding: 0.25em;
  color: #454545;
}

#add_user_user_type select {
  width: 15em !important;
  font-family: "rubik";
  font-size: 16.5px;
  padding: 0.25em;
  color: #454545;
}

#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: #c0392b;
}

@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: #c0392b;
  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: #f2f2f2;
  text-decoration: none;
  height: 30px;
  width: 300px;
  margin: 2%;
}

.report_button_link {
  text-decoration: none;
  text-transform: none;
  color: #f2f2f2;
  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: #696969;
  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;
  border-radius: 10px;
}

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

.financials_total {
  font-size: 1.1em;
  font-weight: bold !important;
  color: #c0392b;
  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: #c0392b;
}

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

.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: #256eb7;
  color: #fff;
  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: #c0392b !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(--header-font-family);
  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 #256eb7;
  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 #256eb7;
  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 #000;
  padding: 3px;
}

/* end group finance item */

/* 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: #c0392b !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(--header-font-family);
  margin-bottom: 0.35em;
  margin-top: 0.35em;
}

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

.custom-auto-complete #view_users_team_leader_label {
  margin-bottom: 35px;
}

@media only screen and (max-width: 500px) {
  .custom-auto-complete #view_users_team_leader_label {
    margin-bottom: 0px;
  }
}
.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 rgb(212, 212, 212) !important;
  border-bottom: 2px solid rgb(212, 212, 212) !important;
  border-left: 2px solid rgb(212, 212, 212) !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 rgb(212, 212, 212);
  padding-left: 1.5%;
}

#view_users_btn_div {
  text-align: center;
}

#view_users_search {
  width: 20% !important;
  font-size: 1.25em !important;
  margin-top: 1%;
  margin-bottom: 1%;
}

#download_my_agents {
  width: 20% !important;
  font-size: 1.25em !important;
  background-color: rgb(102, 177, 108) !important;
  margin-bottom: 2%;
}

@media only screen and (max-width: 500px) {
  #download_my_agents {
    margin-bottom: 2.5% !important;
  }
}

#download_my_agents a {
  color: rgb(255, 255, 255);
  text-decoration: none;
}

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

.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: #454545;
  font-size: larger;
}

.add_doc_label {
  color: #696969;
  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: #c0392b;
  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: "Raleway";
}

.view_group_summary_table {
  margin-bottom: 3%;
}

.upload_trip_document_wrapper {
  border: 5px solid #256eb7 !important;
  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: #c0392b;
  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;
  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: #454545;
  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: #454545;
  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: #256eb7;
}

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

.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: #aaa !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;
  outline: none;
  border-radius: 2px;
  cursor: pointer;
}

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

.spinner_button__text {
  font: 20px Raleway, sans-serif;
  color: #ffffff;
  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;
  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;
  animation: fadein 1.5s;
}

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

#cruise_brothers_modal_content {
  z-index: 500;
}

#cb_modal_container {
  border: 5px solid #256eb7 !important;
  border-radius: 10px !important;
  margin: 10% auto;
}

.cb_modal_image {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 7.5%;
}

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

#welcome_to_cbat_modal_container {
  border-image: linear-gradient(#2e70bc, #97d8da) 30;
  border-width: 5px;
  border-style: solid;
  width: 100% !important;
}

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

@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 */

.view_blast_title {
  color: #256eb7;
}

.email_template_subject {
  color: #256eb7;
  /* color: #0e3359; */
}

/* end view_blast.html */

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

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

.bubble-card {
  border: 2px solid #256eb7;
  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 #000;
  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: #256eb7;
}

.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 #256eb7;
  max-width: 1500px;
  padding: 20px;
}

.booking-list-container table {
  border: 1px solid #000;
  border-collapse: collapse;
}

.booking-list-container table thead tr th,
.booking-list-container table tbody tr td {
  border: 1px solid #000;
  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;
  border-radius: 10px;
  z-index: 1;
  position: relative;
}
.bottom-banner {
  height: 110%;
  width: 80%;
  background-color: #a1c2f7;
  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);
  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%);
}

@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: rgb(96, 97, 97);
}

.reports_home_ul li a:hover {
  color: #b92229;
}

@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 {
  margin-top: 5%;
  margin-bottom: 5%;
  text-align: center;
}

#sales_report_search {
  width: 20% !important;
  font-size: 1.25em !important;
}

#sales_report_download {
  width: 20% !important;
  font-size: 1.25em !important;
  background-color: rgb(102, 177, 108) !important;
}

@media only screen and (max-width: 500px) {
  #sales_report_search,
  #sales_report_download {
    width: 40% !important;
    font-size: 1em !important;
  }
}

/* ****  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;
}

@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: #fafafa;
  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: #256eb7;
  color: white;
}
.day > div {
  width: 100%;
}
.beginning,
.ending {
  width: 100%;
  padding: 0.25em 0;
  text-align: center;
  color: #ffffff;
  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: #ffffff;
  box-shadow: var(--box-shadow-level3);
  padding: 0.5em;
  color: #666666;
}

.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;
  padding: 0 !important;
  color: #222222 !important;
  height: 400px;
  width: 250px;
  cursor: pointer;
  margin: 0.25em 1em 1em 0.25em;
  border: 1px solid #dddddd;
  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: #222;
  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;
  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 #dddddd;
  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(rgba(203, 199, 199, 0.4), rgba(9, 9, 9, 0.4)) 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,
    rgba(203, 199, 199, 0.4),
    rgba(9, 9, 9, 0.4)
  );
  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: #000;
  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";
}
.VueCarousel-navigation-prev[data-v-453ad8cd] {
  left: 0;
  transform: translateY(-50%) translateX(-100%);
  font-family: "system";
}
.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,
      rgba(203, 199, 199, 0.4),
      rgba(9, 9, 9, 0.4)
    );
    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;
  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: #f5f6f6;
  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 #256eb7;
  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: #256eb7;
  align-items: center;
  border-radius: 5px;
  cursor: pointer;
  background-color: #f5f6f6;
  padding: 5px;
  border: 2px solid #256eb7;
  box-shadow: 5px 2.5px 2.5px #256eb7;
}

.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: #f5f6f6;
  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: #256eb7;
  color: white;
  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: #256eb7;
  color: white;
  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: #256eb7;
  color: white;
  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: #256eb7;
  color: white;
  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: #256eb7;
  color: #fff;
  padding: 5px;
  cursor: pointer;
  transition: all 0.5s ease;
}

.comm-payments-row:hover {
  background-color: #fff;
  color: #256eb7;
}

/* ****  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: #256eb7;
  color: white;
}

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

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

.edit-gift-container table {
  border-collapse: collapse;
}
.edit-gift-container table tr td {
  border: 1px solid #000;
}

/* ****  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 #000;
}

.gift-cell {
  border: 1px solid #000;
  padding: 5px;
}

.gift-header-row .gift-cell {
  color: #fff;
  background-color: #256eb7;
  border: 1px solid #fff;
}

.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 #256eb7;
  border-collapse: collapse;
}

.payments-container table tr td {
  border: 1px solid #000;
}

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

.gift-voided {
  background-color: #808080;
}
/* ****  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: #256eb7;
  color: white;
}

.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 #256eb7;
  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: #256eb7;
  border: 1px solid #256eb7;
}

.payment-field {
  margin: 5px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #ebebeb;
  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: #256eb7;
  color: white;
}

.non-editable {
  background-color: #adadad;
}

/* ****  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 #256eb7;
  border-radius: 5px;
  padding: 5px;
}

.gl-wrapper table tr {
  border: 1px solid #ababab;
}

.gl-wrapper table tr:nth-child(even) {
  background-color: #ababab;
}

/* ****  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 #d4d4d4;
  border-top: none;
  z-index: 99;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
}

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

.dropdown-result {
  padding: 3px 0 3px 3px;
  border: 1px solid #d4d4d4;
  transition: 0.5s all ease;
  cursor: pointer;
}

.dropdown-result:hover {
  background-color: #256eb7;
  color: #fff;
}

.dropdown-result.selected {
  background-color: #256eb7;
  color: #fff;
}

.name-descriptor {
  color: #a6afbd;
  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: #256eb7;
  color: white;
}
/* ****  END CONTACT SEARCH RESULTS VUE  **** */

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

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

.summary-title {
  background-color: #256eb7;
  box-sizing: border-box;
}

.summary-title h3 {
  color: white;
}

.red-emphasis {
  font-weight: 900;
  color: red;
  font-size: 1.1em;
}

.blue-emphasis {
  color: navy;
  font-weight: 900;
}

.summary-title.cancelled {
  background-color: lightgray;
}

/* ****  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: red;
  font-size: 1.1em;
  font-weight: bold;
}
.blue-emphasis {
  color: navy;
  font-weight: 900;
}
.contact-link {
  text-decoration: underline;
  color: blue;
  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;
  display: inline-block;
  height: 20px;
}

#document_list_link {
  background-color: #256eb7;
  color: white;
  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: "Raleway";
  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(--borderColor);
  margin: 1em 0;
  width: 100%;
  padding-bottom: 0.5em;
}

.summary-title,
.booking-title {
  width: 100%;
  padding: 0.25em 0.5em;
  border-bottom: 1px solid var(--borderColor);
  font-weight: 900;
  margin-bottom: 1em;
  color: var(--main-color);
}
.booking-title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

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

.booking-title h3 {
  padding-top: 0.5%;
  vertical-align: middle !important;
  display: inline-block !important;
}

.summary-title.cancelled {
  background-color: lightgray;
}
.summary-contents {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  font-size: 0.8em;
  justify-content: space-around;
}

.summary-group {
  margin: 0 5px 0 5px;
}

.summary-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.summary-list li {
  padding: 0.25em 0;
}
.summary-list li {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#itinerary_link {
  max-width: 250px !important;
  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: #256eb7;
  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 #256eb7;
  padding: 5px;
  margin-bottom: 10px;
}

.finance-item {
  display: flex;
  flex-direction: column;
  margin: 5px;
  padding: 10px;
  background-color: #256eb7;
  color: white;
  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: #256eb7;
  color: white;
  margin: 0 5px 5px 0;
  padding: 5px;
  font-size: 0.8em;
  flex: 1;
  min-width: 220px;
  cursor: pointer;
}

.payment-block {
  border: 2px solid var(--main-color);
  margin: 5px;
  display: flex;
  padding: 0.5em;
  flex-wrap: wrap;
  font-size: 0.9em;
  justify-content: space-around;
}

.payment-item {
  color: red;
  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;
}

.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 #256eb7;
  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: #256eb7;
  border: 2px solid #256eb7;
  box-sizing: border-box;
}
/* END AdminManageFlags styles */
/* Flag Module Styles */
.flag-wrapper {
  border: 2px solid #256eb7;
  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: #256eb7;
  border: 2px solid #256eb7;
  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: #256eb7;
  color: white;
}
/* 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;
}
/* 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 #256eb7;
  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: #256eb7;
  color: white;
  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: #256eb7;
  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: white;
  background-color: #256eb7;
  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 #256eb7;
  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 #256eb7;
  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: #256eb7;
}

.pax-row-info {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
}

.pax-info-group {
  display: flex;
  flex-direction: column;
  background-color: #256eb7;
  color: white;
  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 #256eb7;
  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: #256eb7;
  color: white;
  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;
  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: #256eb7;
  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 #256eb7;
  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 #256eb7;
  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 #256eb7;
  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 #256eb7;
  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;
  margin-right: 1em;
  z-index: 100;
  box-shadow: var(--box-shadow-level2);
}

/* ******  START QUICK CRUISE SIDEBAR ****** */

.quick_cruise_sidebar {
  background-color: #2a75ac;
}

#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;
  /* 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: Rubik;
  font-weight: bolder;
  color: #e60f16;
  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;
  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;
  background-color: var(--main-color);
}
.sidebar #steps ul li a.active {
  color: #ffffff;
  background-color: var(--successColor);
}
.sidebar #steps ul li a.disabled {
  pointer-events: none;
  cursor: default;
  color: #999999;
}
.sidebar #steps ul li i {
  margin-right: 0.5em;
}

.result-box {
  background-color: #ffffff;
  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;
}
.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;
}
.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;
}
.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: #256eb7;
  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;
}
.price-column label.vendorprice,
span.vendorprice {
  color: #0e3359;
}
.price-column input.vendorprice {
  border-color: #0e3359;
}
.price-column label.clientprice,
span.clientprice {
  color: #215923;
}
.price-column input.clientprice {
  border-color: #215923;
}
.price-column label.commission,
span.commission {
  color: #c0392b;
}
.price-column input.commission {
  border-color: #c0392b;
}

.tooltip {
  position: relative;
}

.tooltip:hover:after {
  background: #333;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 5px;
  bottom: 26px;
  color: #fff;
  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 #256eb7;
  margin: 5px;
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
}

.misc-num-row {
  width: 100%;
  text-align: right;
  background-color: #256eb7;
  color: white;
  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: #256eb7;
  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: #256eb7;
  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: #256eb7;
  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-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  min-height: 700px;
}

#upload-container {
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #256eb7;
  border-radius: 10px;
  padding: 10px;
  align-self: center;
}

#upload-container > form > div {
  display: flex;
  flex-direction: column;
}

/* **** 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 #256eb7;
  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: #256eb7;
}

/* .auto-complete-suggestions {
  position: absolute;
  cursor: pointer;
  border: 2px solid #d4d4d4;
  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;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 5px;
  bottom: 26px;
  color: #fff;
  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);
  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,
.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;
}

@media only screen and (max-width: 1150px) {
  .view-lead-wrapper {
    flex-direction: column;
  }
  .lead-info .toggle {
    display: block;
    cursor: pointer;
  }
  .lead-info ul,
  .lead-info .buttonrow {
    display: none;
  }
  .lead-info.open ul {
    display: block;
  }
  .lead-info.open .buttonrow {
    display: flex;
  }
  .lead-info {
    border: 1px solid var(--borderColor);
    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: #fafafa;
  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";
  font-size: 16px;
  content: "\f017";
  margin-right: 0.25em;
}

table.calendar td ul li.past-not-completed {
  background-color: var(--errorColor);
  color: #ffffff;
}

table.calendar td ul li.past-completed {
  background-color: var(--successColor);
  color: #ffffff;
}

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

.few {
  border: 1px solid var(--borderColor);
  background-color: #8cc47a;
}

.moderate {
  border: 1px solid var(--borderColor);
  background-color: #ffff99;
}

.many {
  border: 1px solid var(--borderColor);
  background-color: #ffa07a;
}

.none {
  border: 1px solid var(--borderColor);
  background-color: #ffffff;
}

.no-day {
  border: 1px solid var(--borderColor);
  background-color: #ffffff;
}

.no-day > b {
  display: none;
}

.today {
  border: 2px dashed var(--successColor);
  background-color: var(--successBGColor);
}

.past {
  background-color: red;
}

.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;
  border: 5px solid #256eb7;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 25px;
}

.questionnaire_label {
  color: #00008b !important;
  font-weight: 900;
  font-size: 1em;
  margin-bottom: 5px;
  display: block;
}

#questionnaire_part_one input,
select {
  color: #696969;
  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: #696969;
  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: rgb(204, 0, 0) !important;
  line-height: 1.5em;
}

#questionnaire_part_two input,
select {
  color: #696969;
  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: rgb(204, 0, 0) !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;
  font-weight: 900;
  font-size: 1.25em;
  margin-bottom: 5px;
  text-align: center;
}

#tax_id_exists_label,
#bank_account_exists_label {
  color: #696969 !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;
  border-radius: 10px !important;
}

#dd_valid {
  margin-top: 2.5%;
}

.dd_modal_warning {
  color: rgb(204, 0, 0) !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;
  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(--main-color) !important;
  font-weight: bold !important;
  font-size: 22.5px !important;
  text-align: center !important;
}

.view_blast_heading {
  font-weight: bold !important;
  color: #616161 !important;
  font-size: 22.5px !important;
}

.vb_side_dashboard {
  background-color: #dedede;
  padding: 2.5% !important;
}

.vb_top_dashboard {
  margin-bottom: 2.5% !important;
}

.view_blast_action_group_heading {
  font-weight: bold !important;
  color: var(--main-color) !important;
  font-size: 22.5px !important;
  margin-left: 10px !important;
  margin-top: 22.5px;
  margin-bottom: 22.5px;
}

.view_blast_toggle {
  color: var(--main-color) !important;
  font-size: 30px !important;
  font-weight: bold !important;
  margin-right: 20px !important;
}

.vb_toggle_alt {
  color: var(--main-color) !important;
  margin-top: 1% !important;
  margin-right: 20px !important;
  font-size: 30px !important;
  font-weight: bold !important;
}

.inner_tr {
  border: none !important;
}

.blast_inner_th {
  border: none !important;
}

.view_blast_table {
  width: 100%;
}

.vb_side_label,
.vb_side_value {
  font-size: 20px !important;
  width: 50% !important;
  line-height: 2 !important;
}

.vb_side_label {
  color: var(--main-color) !important;
  font-weight: bold !important;
}

.vb_side_value {
  color: #616161 !important;
}

.view_blast_value {
  color: #616161 !important;
}

.bounce_spam_report_variable {
  color: #c0392b;
}

.vb_background {
  background-color: #dedede;
}

#view_blast_button {
  margin-top: 10% !important;
  min-width: 250px !important;
  font-size: 20px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  color: white !important;
}

.active_btn {
  background-color: green;
}

.cancel_btn {
  background-color: #c0392b;
}

@media only screen and (max-width: 500px) {
  .vb_summary_table {
    font-size: 14.5px;
    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(--header-font-family);
  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: #eee;
  }
}

.iti_input,
.iti_select {
  border: 1px solid #ccc;
  border-radius: var(--borderRadius);
  width: 220px;
}
input::placeholder {
  color: #bbb;
}

.iti_button {
  color: #fff;
  background-color: #428bca;
  border: 1px solid #357ebd;
  border-radius: var(--borderRadius);
  margin-left: 5px;
  &:hover {
    background-color: #3276b1;
    border-color: #285e8e;
    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(--main-color) !important;
  font-weight: bold !important;
  font-size: 22.5px !important;
  text-align: center !important;
}
.view_blast_heading {
  font-weight: bold !important;
  color: #616161 !important;
  font-size: 22.5px !important;
}

.vb_side_dashboard {
  background-color: #dedede;
  padding: 2.5% !important;
}

.vb_top_dashboard {
  margin-bottom: 2.5% !important;
}

.action-group {
  background-color: #dedede;
}

.view_blast_action_group_heading {
  font-weight: bold !important;
  color: var(--main-color) !important;
  font-size: 22.5px !important;
  margin-left: 10px !important;
}

.view_blast_toggle {
  color: var(--main-color) !important;
  font-size: 30px !important;
  font-weight: bold !important;
  margin-right: 20px !important;
}

.vb_toggle_alt {
  color: var(--main-color) !important;
  margin-top: 1% !important;
  margin-right: 20px !important;
  font-size: 30px !important;
  font-weight: bold !important;
}
.inner_tr {
  border: none !important;
}

.blast_inner_th {
  border: none !important;
}

.view_blast_table {
  width: 100%;
}

.vb_side_label,
.vb_side_value {
  font-size: 20px !important;
  width: 50% !important;
  line-height: 2 !important;
}

.vb_side_label {
  color: var(--main-color) !important;
  font-weight: bold !important;
}

.vb_side_value {
  color: #616161 !important;
}

.view_blast_value {
  color: #616161 !important;
}

.bounce_spam_report_variable {
  color: #c0392b;
}

#view_blast_button {
  margin-top: 10% !important;
  min-width: 250px !important;
  font-size: 20px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  color: white !important;
}

.active_btn {
  background-color: green;
}

.cancel_btn {
  background-color: #c0392b;
}

@media only screen and (max-width: 500px) {
  .vb_summary_table {
    font-size: 14.5px;
    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: #dedede;
  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 #dedede !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: #454545;
  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: #dedede !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: #dedede !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: #c0392b !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  ***** */

.search_client_container_a {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* flex: auto; */
  padding: 5px;
}

.search_client_container_b {
  width: 20%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* flex: auto; */
  padding: 5px;
}

#id_duplicates,
#id_contacts {
  height: 1.5em;
}

.search_client_btn {
  margin-top: 0.5% !important;
  min-width: 10%;
}

.search_contacts_label {
  padding-bottom: 3px;
  font-size: 1.05em;
}

@media only screen and (max-width: 1099px) {
  .search_client_container_a,
  .search_client_container_b {
    width: 100%;
  }
}

/* *****  end view_people.html  ***** */

/* *****  start new_edit_user.html styles  ***** */

.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: #dedede;
  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 #dedede !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: #454545;
  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: #dedede !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: #dedede !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: #c0392b !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: #dedede;
}

/* *****  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;
  padding: 1.5%;
  border-radius: 5px;
}

.q_readonly {
  background: #f5f2f2;
}

#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);
  background: linear-gradient(
    90deg,
    rgba(255, 165, 0, 1) 0%,
    rgba(254, 208, 113, 1) 100%
  );
  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: #f2f2f2;
}

.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: #f2f2f2;
}

.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(#256eb7 0 0) left -25% top 0 /20% 100% no-repeat
    #ddd;
  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;
  font-size: 1.5em !important;
  text-align: center;
  margin-top: 1px !important;
}

.top_deal_text {
  color: #444444 !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;
}

#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;
  /* box-shadow: -5px 8px 45px 11px rgba(247, 249, 182, 0.8);
  -webkit-box-shadow: -5px 8px 45px 11px rgba(247, 249, 182, 0.8);
  -moz-box-shadow: -5px 8px 45px 11px rgba(247, 249, 182, 0.8); */
  /* 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: rgb(184, 221, 244);
  background: linear-gradient(
    0deg,
    rgba(184, 221, 244, 0.8267682072829132) 0%,
    rgba(45, 108, 253, 1) 100%
  );
}

.muc_even {
  background: rgb(184, 221, 244);
  background: linear-gradient(
    0deg,
    rgba(45, 108, 253, 1) 0%,
    rgba(184, 221, 244, 0.8267682072829132) 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;
  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;
}

#mu_form_textarea {
  height: 15vh;
  resize: vertical;
}

#mock_up_form_submit_button {
  width: 100%;
  background: #cc6666;
  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;
}

#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;
  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;
  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: 12px;
  padding: 5px 10px;
}