.fancybox-inner .stateroom h4 {
  margin-bottom: 10px;
}

div.staterooms_container div.stateroom h4 {
  margin-bottom: 4px;
}

.rating_container {
  margin-top: 5px;
  color: #004a83;
}

.rating_container .title {
  font-size: 14px;
}

.rating_container .rating_number {
  font-size: 24px;
  color: #707070;
}

.fa-star,
.fa-star-half-o,
.fa-star-o,
.fa-star-sharp,
.fa-star-sharp-half-stroke {
  color: #ffe55f;
  font-size: 20px;
  margin: 0 1px;
}

.page_header .right {
  text-align: right;
}

#top_stats {
  margin-top: 30px;
  text-align: right;
  display: inline-block;
}

#main_img_container {
  position: relative;
}

#main_img_container .logo_cont {
  position: absolute;
  background-color: rgb(255 255 255 / 70%);
  width: 23.5%;
  height: 21%;
}

#main_img_container .logo_cont.top-right {
  top: 5px;
  right: 5px;
  border-radius: 0 0 0 30px;
  padding: 0 20px 5px 25px;
}

#main_img_container .logo_cont.top-left {
  top: 5px;
  left: 5px;
  border-radius: 0 0 30px;
  padding: 0 25px 5px 20px;
}

#main_img_container .logo_cont.bottom-right {
  bottom: 5px;
  right: 5px;
  border-radius: 30px 0 0;
  padding: 5px 20px 0 25px;
}

#main_img_container .logo_cont.bottom-left {
  bottom: 5px;
  left: 5px;
  border-radius: 0 30px 0 0;
  padding: 5px 25px 0 20px;
}

#main_img_container .logo_cont .logo {
  width: 100%;
  height: 100%;
}

#main_img_container .main_img {
  width: 100%;
}

.cruiseshipOverview img {
  border: 4px solid #eee;
  width: 315px;
  height: 210px;
  display: block;
}

.search_slides_section .swiper-slide img {
  width: auto;
}

.stateroom a.accommodationImg img {
  height: 100%;
  width: 100%;
  vertical-align: middle;
}

.fancybox-inner .stateroom a.accommodationImg img {
  max-width: 100%;
  max-height: 100%;
}

#main_img_container .main_img img {
  width: 100%;
}

#main_img_container .bordered_container {
  position: relative;
  width: 100%;
}

#main_img_container .border {
  border: 5px solid rgb(255 255 255 / 70%);
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

#main_img_container .context img {
  display: block;
}

#gallery_container {
  margin-top: 1%;
  border: 5px solid #ddd;
  height: 130px;
}

.gallery-swiper-container {
  height: 70%;
  padding: 5px 5px 0;
}

.search_slides_section .swiper-pagination-custom-container {
  margin-top: 0;
}

.search_slides_section .swiper-pagination-custom-container .pagination_surround {
  border: none;
  background-color: transparent;
}

.swiper-pagination-custom-container .swiper-pagination-bullet {
  width: 13px;
  height: 13px;
}

#facts_section {
  border: 1px solid #ccc;
  margin-top: 10px;
  padding: 10px;
  box-sizing: border-box;
}

#facts_section .title_box {
  margin-bottom: 20px;
}

#facts_section .title {
  font-size: 20px;
  font-weight: bold;
  color: #004a83;
  vertical-align: middle;
}

#facts_section #facts_list {
  text-align: center;
}

#facts_list .list_item {
  float: left;
  font-size: 11px;
  color: #707070;
  width: 25%;
}

#facts_list .list_item_container {
  margin: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid #ccc;
}

#facts_list .list_item label {
  text-transform: uppercase;
  font-weight: bold;
  float: left;
  text-align: left;
}

#facts_list .list_item span {
  float: right;
  text-align: right;
}

.facts_link {
  margin: 0 10px;
  display: inline-block;
  vertical-align: middle;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: bold;
  color: #c4c4c4;
  letter-spacing: 0.5px;
}

.facts_link.active {
  color: #1a7dde;
}

.facts_link:hover:not(.active) {
  color: #1a7dde;
}

.facts_table {
  display: none;
}

.facts_table.active {
  display: block;
}

div.general_amenities ul {
  margin: 0.5em 0;
  padding-left: 6px;
  column-count: 2;
}

div.general_amenities ul li {
  margin: 1px 0;
}

div.staterooms_class div ul {
  margin: 5px 0;
  list-style-type: disc;
  list-style-position: inside;
}

.fancybox-inner .stateroom .description ul {
  margin-left: 20px;
  list-style: circle;
}

div.staterooms_class div ul li {
  margin: 5px;
}

.fancybox-inner .stateroom .description ul li {
  margin: 7px 0;
}

.fancybox-inner .stateroom .description ul li:last-child {
  margin-bottom: 0;
}

div.general_amenities ul li i.fa-star,
div.general_amenities ul li i.fa-star-sharp {
  color: #ff3048;
}

.staterooms_class {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
  visibility: visible;
}

.staterooms_class.no_border,
.staterooms_class:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.stateroom {
  padding: 20px;
}

.fancybox-inner .stateroom {
  padding: 0;
}

.stateroom a.accommodationImg {
  margin: 0 10px 5px 0;
  max-width: 297px;
  display: inline-block;
  border: 3px solid #d9d9d9;
}

.fancybox-inner .stateroom a.accommodationImg {
  float: none;
  margin: auto;
  border: 0;
  max-width: 100%;
}

.fancybox-inner .stateroom .description {
  display: block;
  line-height: normal;
  font-size: 14px;
  margin-top: 10px;
}

.fancybox-inner .stateroom .description p {
  margin-bottom: 10px;
}

.fancybox-inner .stateroom .description p:last-child {
  margin-bottom: 0;
}

.code_box {
  display: inline-block;
  padding: 1px 5px;
  min-width: 39px;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
  border: 1px solid #000;
}

/* Deck Plans Accommodation Gallery */
.category-owl-container .owl-nav button {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  position: absolute;
  top: 45%;
  background-color: black !important;
}

.category-owl-container .owl-nav button.disabled {
  display: none;
}

.category-owl-container .owl-nav button.owl-prev {
  margin-left: 10px;
}

.category-owl-container .owl-nav button.owl-next {
  right: 10px;
}

.category-owl-container .owl-nav button i {
  font-size: 40px;
  margin-top: -2px;
  display: inline-block;
  vertical-align: middle;
  color: #fff;
}

.category-owl-container .owl-nav button.owl-prev i {
  margin-left: -5px;
}

.category-owl-container .owl-nav button.owl-next i {
  margin-right: -5px;
}

div#mscExperiences ul {
  list-style: disc;
}

#gallery_container .custom_navigation_arrows img {
  vertical-align: middle;
  width: 25px;
}

#gallery_container .owl-carousel {
  height: 76%;
}

#gallery_container .owl-stage-outer,
#gallery_container .owl-stage,
#gallery_container .owl-item {
  height: 100%;
}

#gallery_container .owl-controls {
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  padding: 3px;
  background-color: white;
}

#gallery_container .owl-dots {
  margin: 0 3px;
}

#gallery_container .owl-dots .owl-dot {
  text-align: center;
  display: inline-block;
  zoom: 1;
  vertical-align: middle;
}

#gallery_container .owl-dots .owl-dot span {
  width: 13px;
  height: 13px;
  margin: 5px;
  background: #004a83;
  display: block;
  border-radius: 50%;
}

#gallery_container .owl-dots .owl-dot.active span {
  background: #ff3048;
  border: 2px solid white;
  height: 11px;
  width: 11px;
}

#gallery_container .owl-dots,
#gallery_container .custom_navigation_arrows {
  display: inline-block;
}

#gallery_container .custom_navigation_arrows {
  display: inline-block;
  cursor: pointer;
}

#destinations-grid-container .cbp-l-grid-work-title {
  padding: 10px;
  text-transform: none;
  font-weight: bold;
  color: #004a83;
}

#destinations_top_note {
  margin-bottom: 15px;
}

#destinations_bottom_note {
  font-size: 11px;
  margin-top: 15px;
}

#DDListPopUp {
  position: absolute;
}

div.staterooms_class sup {
  vertical-align: super;
  font-size: 7px;
}

div#overview.tab-overview ul {
  margin: 0 0 20px 10px;
  padding-left: 6px;
  list-style: disc;
}

div#mscExperiences ul li {
  margin: 8px 0 8px 19px;
}

div#overview.tab-overview ul li {
  margin: 8px 0;
}

div#overview.tab-overview ul li:first-child {
  margin: 0;
}

/* START - MSC Fancybox Content */
div#mscExperiences {
  display: none;
  max-width: 600px;
  max-height: 500px;
}

div#mscExperiences div#experienceHdr {
  font-size: 22px;
  margin: 5px 8px 18px;
  font-weight: bold;
  text-decoration: underline;
}

div#mscExperiences div#experienceJump {
  margin: 0 8px;
}

div#mscExperiences div#experienceJump a {
  color: blue;
}

div#mscExperiences div#experienceJump a:hover {
  text-decoration: underline;
  color: #ff3048;
}

div#mscExperiences table#conciergeInfo {
  width: 100%;
  background-color: #f2f9ff;
  color: #06c;
  border: thin solid #cee7ff;
  padding: 8px;
  font-size: 12px;
}

div#mscExperiences table#conciergeInfo td#cruiseShipCabinNav {
  padding-top: 5px;
  padding-bottom: 15px;
}

div#mscExperiences table#conciergeInfo td.cruiseShipCabinHdr {
  font-size: 18px;
  font-weight: bold;
  color: #06c;
  background-color: #cee7ff;
  padding: 8px;
}

div#mscExperiences table#conciergeInfo td.cruiseShipCabinHdrTop {
  font-size: 12px;
  font-weight: bold;
  text-align: right;
  color: #06c;
  background-color: #cee7ff;
  padding: 8px;
}

div#mscExperiences table#conciergeInfo td.cruiseShipCabinHdrDetail {
  font-size: 11px;
  font-style: normal;
  color: #06c;
  background-color: #f2f9ff;
  padding: 8px;
  border-left: thin solid #cee7ff;
  border-right: thin solid #cee7ff;
}

/* END - MSC Fancybox Content */

.cruiseshipOverview.right {
  float: right;
  margin: 8px 0 8px 8px;
}

.cruiseshipOverview.left {
  float: left;
  margin: 8px 8px 8px 0;
}

@keyframes blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/**** affects deals search box ****/

.showHideButton {
  display: none;
}

#searchDealsSideBar {
  position: relative;
  left: auto;
  top: auto;
}

#searchDealsSideBar.open {
  left: 0;
}

@media (width <= 1218px) {
  #DDListPopUp {
    position: fixed;
  }

  #gallery_container {
    height: auto;
  }

  #searchDealsSideBar {
    position: fixed;
    left: -340px;
    top: 266px;
  }

  .showHideButton {
    display: block;
  }

  .search_slides_section .left {
    float: none;
    width: 100%;
    height: auto;
  }

  .search_slides_section .right {
    background-color: #eee;
    padding: 10px;
    border: 2px solid #e2e2e2;
    float: none;
    width: auto;
    height: auto;
  }
}

@media (width <= 1000px) {
  #facts_list .list_item {
    width: 33.3%;
  }
}

@media (width <= 900px) {
  .search_slides_section .right .slides_wrapper {
    width: auto;
  }
}

@media (width <= 950px) {
  #facts_list .list_item {
    width: 50%;
  }
}

@media (width >= 760px) {
  div.mobile_tab_content_header {
    display: none;
  }
}

@media (width <= 759px) {
  div.mobile_tab_content_header {
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 5px;
    color: #004a83;
  }
}

@media (width <= 720px) {
  #DDListPopUp {
    position: absolute;
  }

  #searchDealsSideBar {
    position: relative;
    left: auto;
    top: auto;
  }

  #main_search_box.open {
    display: block;
  }

  #main_search_box {
    display: none;
  }

  #top_stats {
    margin: 10px;
    text-align: left;
  }

  .page_header .right {
    text-align: left;
  }

  #facts_selections {
    display: block;
  }
}

@media (width <= 550px) {
  #facts_list .list_item {
    float: none;
    width: 100%;
  }
}

@media (width <= 500px) {
  .stateroom a.ship_accommodations_fancybox,
  a.accommodationImg.accommodationComingImg {
    max-width: none;
  }
}

/* The rules above this point include the photo strip, main image frame and facts tabs of the
   older ship page markup, which adc-sites still serves from its copy of newadc's views. They stay
   until adc-sites copies the photo grid views below and ships (adc-api#3360); then a later
   release removes them. */

/* Photo grid beside the search box (ship/gallery.php): the main photo over four gallery photos. */

.sg {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: minmax(300px, 1fr) auto;
  gap: 6px;
}

.sg > .ship_gallery_photo,
.sg-none {
  position: relative;
  display: block;
  overflow: hidden;
  background-color: #dfe8f0;
}

.sg > .ship_gallery_photo[hidden] {
  display: none;
}

.sg .sg-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s;
}

.sg .ship_gallery_photo:hover .sg-img,
.sg .ship_gallery_photo:focus-visible .sg-img {
  transform: scale(1.03);
}

.sg-main {
  grid-column: 1 / -1;
}

.sg-thumb {
  aspect-ratio: 4 / 3;
}

.sg-none {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 30px;
  background-color: #ccc;
}

.sg-logo {
  position: absolute;
  box-sizing: border-box;
  width: 22%;
  max-width: 190px;
  padding: 6px 10px;
  border-radius: 4px;
  background-color: rgb(255 255 255 / 90%);
}

.sg-logo .sg-logo-img {
  display: block;
  width: 100%;
  height: auto;
}

.sg-logo.top-left {
  top: 10px;
  left: 10px;
}

.sg-logo.top-right {
  top: 10px;
  right: 10px;
}

.sg-logo.bottom-left {
  bottom: 10px;
  left: 10px;
}

.sg-logo.bottom-right {
  right: 10px;
  bottom: 10px;
}

.sg-more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  background-color: rgb(0 40 75 / 62%);
}

.fancybox-title .sg-count {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #707070;
}

/* The grid fills the search box's height while the two sit side by side. Scoped to the grid's
   section, so adc-sites' copy of the older markup (the photo strip) keeps its layout until it
   copies these views (adc-api#3360). */
@media (width > 1218px) {
  .search_slides_section.sg-section {
    display: flex;
    align-items: stretch;
  }

  .search_slides_section.sg-section > .left,
  .search_slides_section.sg-section > .right {
    float: none;
    height: auto;
  }

  .search_slides_section.sg-section > .right {
    display: flex;
    flex-direction: column;
    padding-left: 10px;
  }

  .search_slides_section.sg-section > .right .sg {
    flex: 1 1 auto;
  }

  .search_slides_section.sg-section > .clear_float {
    display: none;
  }
}

@media (width <= 1218px) {
  .sg {
    grid-template-rows: auto auto;
  }

  .sg-main {
    aspect-ratio: 16 / 9;
  }
}

/* The ship at a glance, under the photos (ship/glance.php). */

.sg-glance {
  display: flex;
  align-items: center;
  margin-top: 14px;
  padding: 14px 8px 14px 0;
  border: 1px solid #e1e7ec;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 1px 3px rgb(16 40 64 / 8%), 0 4px 14px rgb(16 40 64 / 5%);
}

.sg-stat {
  box-sizing: border-box;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 0 12px;
  text-align: center;
  border-right: 1px solid #dbe6ee;
}

.sg-stat:last-of-type {
  border-right: 0;
}

.sg-stat b {
  color: #004a83;
  font-size: 21px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.sg-stat .sg-label {
  color: #5b6b78;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sg-stat.sg-wide {
  flex: 1.7 1 0;
}

.sg-stat.sg-wide b {
  font-size: 16px;
  line-height: 1.6;
  white-space: nowrap;
}

.sg-all {
  margin: 0 8px 0 12px;
  padding: 8px 14px;
  border: 1px solid #b9d3e8;
  border-radius: 20px;
  color: #004a83;
  font-size: 13px;
  font-weight: bold;
  white-space: nowrap;
  text-decoration: none;
  background-color: #fff;
}

.sg-all:hover,
.sg-all:focus-visible {
  background-color: #e8f1f8;
}

/* The ship's facts, below the deals (ship/facts.php). */

.sf {
  margin: var(--band, 20px) 0;
  padding: 16px 20px 18px;
  border: 1px solid #d6e0e8;
  scroll-margin-top: 70px;
}

.sf h2 {
  margin: 0 0 14px;
  color: #004a83;
  font-size: 24px;
}

.sf-groups {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 18px 28px;
  align-items: start;
}

.sf-group h3 {
  margin: 0 0 6px;
  padding-bottom: 4px;
  border-bottom: 2px solid #004a83;
  color: #004a83;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sf-group dl {
  margin: 0;
}

.sf-ship dl {
  column-gap: 24px;
  columns: 2 220px;
}

.sf-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid #d6e0e8;
  font-size: 13px;
  break-inside: avoid;
}

.sf-row dt {
  color: #5b6b78;
  font-weight: bold;
}

.sf-row dd {
  margin: 0;
  color: #1f2d3a;
  text-align: right;
}

.sf-has {
  margin: 0;
  padding: 0;
  font-size: 13px;
  list-style: none;
}

.sf-has .sf-item {
  display: flex;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #d6e0e8;
}

.sf-has .sf-item::before {
  content: "\2713";
  color: #1d7a46;
  font-weight: bold;
}

/* .sf-not is the "Not on this ship" line adc-sites' older copy of facts.php still writes;
   remove it once adc-sites has copied the note (adc-api#3360). */
.sf-not,
.sf-note {
  margin: 8px 0 0;
  color: #5b6b78;
  font-size: 12px;
}

@media (width <= 900px) {
  .sf-groups {
    grid-template-columns: 1fr;
  }
}

@media (width <= 760px) {
  .sg-glance {
    flex-wrap: wrap;
    row-gap: 14px;
    padding: 14px 0;
  }

  .sg-stat,
  .sg-stat.sg-wide {
    flex: 1 1 33%;
    border-right: 0;
  }

  .sg-stat.sg-wide b {
    white-space: normal;
  }

  /* "All ship facts" gets the card's last row to itself, so it can't run past the card's
     edge (adc-api#3360). */
  .sg-all {
    flex: 1 0 calc(100% - 28px);
    box-sizing: border-box;
    margin: 0 14px;
    padding: 9px 14px;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sg .sg-img {
    transition: none;
  }
}

/* Phones: the cruise line and ship menus side by side, full width, lined up with the price
   box and the sections below (adc-api#3344). */
@media (width <= 767px) {
  /* The header's two columns (master_cruiselines.css: 56% and 30% wide down to 601px) stack
     at full width, so the menus line up with the price box above. */
  .page_header:has(#top_stats) .left,
  .page_header .right:has(#top_stats) {
    float: none;
    width: 100%;
  }

  #top_stats {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 10px;
    margin: 16px 0 0;
  }

  #top_stats .adc_select_dropdown {
    width: auto;
    margin: 0;
  }

  #top_stats select {
    width: 100%;
  }

  /* The float-clearing div would be a grid row of its own, adding the gap under the menus. */
  #top_stats > .clear_float {
    display: none;
  }
}