/* Minification failed. Returning unminified contents.
(3164,24): run-time error CSS1039: Token not allowed after unary operator: '-slider-padding'
(3168,27): run-time error CSS1039: Token not allowed after unary operator: '-slider-column-gap'
(3172,18): run-time error CSS1039: Token not allowed after unary operator: '-slide-width'
(3175,23): run-time error CSS1039: Token not allowed after unary operator: '-slider-column-gap'
 */
/*
   Planet cruise website variables
*/
/* Footer master file */
/*
----------------------------
    Footer -- Footer contact
----------------------------
*/
.footer__contact {
  width: 100%;
  text-align: center;
  display: block;
  padding: 8px 0;
}
.footer__contact .footer__contact--inner {
  width: 100%;
  max-width: 1400px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: nowrap;
  margin: auto;
}
@media (max-width: 1120px) {
  .footer__contact .footer__contact--inner .footer__abtalogos {
    display: none;
  }
}
@media (max-width: 760px) {
  .footer__contact .footer__contact--inner .footer__card {
    padding: 1rem 0.5rem;
    margin: 0.5rem;
    border-left: none;
  }
}
@media (max-width: 600px) {
  .footer__contact .footer__contact--inner {
    flex-wrap: wrap;
  }
}

.footer__card {
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  padding: 1rem 2rem;
  margin: 1rem;
  border-left: 1px solid #DFE3EF;
  text-align: left;
}

.footer-card__icon {
  min-width: 50px;
  margin-left: 24px;
  margin-right: 16px;
  font-size: 36px;
}
@media (max-width: 680px) {
  .footer-card__icon {
    font-size: 20px;
    min-width: 30px;
    margin-left: 14px;
    margin-right: 14px;
  }
}

.footer-card__content {
  text-align: left;
}
.footer-card__content p {
  padding: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.03em;
}
.footer-card__content p em {
  font-weight: 400;
  font-style: italic;
  text-decoration: none;
  display: block;
  padding: 0 0 4px 0;
}
.footer-card__content p em label {
  width: 100%;
  font-weight: 400;
}
.footer-card__content p a {
  color: #333;
  text-decoration: none;
}
.footer-card__content p:hover {
  text-decoration: underline;
}
.footer-card__content p.link-is-underlined {
  text-decoration: underline;
}
.footer-card__content strong {
  font-size: 14px;
  letter-spacing: 0.03em;
  font-weight: 700;
  margin-bottom: 10px;
}

.footer__cs-team .footer-card__icon {
  font-size: 30px;
}
@media (max-width: 680px) {
  .footer__cs-team .footer-card__icon {
    font-size: 20px;
  }
}

.footer__abtalogos {
  flex-wrap: wrap;
}
.footer__abtalogos strong {
  width: 100%;
  font-size: 14px;
  letter-spacing: 0.03em;
  font-weight: 700;
  margin-bottom: 10px;
}

.footer__opening-hours-link {
  display: inline-block;
  width: auto;
  font-size: 14px;
  letter-spacing: 0.03em;
  cursor: pointer;
  color: #333;
  text-decoration: underline;
  margin-bottom: 1.5rem;
}
@media (max-width: 800px) {
  .footer__opening-hours-link {
    display: none;
  }
}

/*
---------------------------------------------------
    Footer -- generic layout
---------------------------------------------------
*/
.footer {
  width: 100%;
  background-color: #F3F5FB;
}
.footer .footer__row:last-child {
  display: inline-block;
}
@media (max-width: 800px) {
  .footer .footer__row:last-child {
    margin-bottom: 70px;
  }
}

.footer__row {
  width: 100%;
  text-align: center;
  background-color: #01658c;
}
@media (max-width: 1250px) {
  .footer__row {
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media (max-width: 800px) {
  .footer__row {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.footer__inner-row {
  width: 100%;
  max-width: 1200px;
  margin: auto;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.footer__inner-row.footer__social-row {
  flex-wrap: wrap;
}

.footer__hours {
  width: 50%;
  text-align: left;
}

/* Footer main row */
.footer-primary-row {
  background-color: #01658c;
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.footer-primary-row .footer__inner-row {
  width: 100%;
  max-width: 1400px;
}
@media (max-width: 1500px) {
  .footer-primary-row .footer__inner-row {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
@media (max-width: 960px) {
  .footer-primary-row .footer__inner-row {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .footer-primary-row .footer__inner-row .footer__links {
    width: 100%;
    color: #f4f4f4;
  }
}

/* Footer top message */
.footer-top-message {
  background-color: #F0F3FC;
  text-align: center;
}
.footer-top-message .footer__inner-row {
  font-size: 14px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 16px;
}
.footer-top-message .footer__inner-row strong, .footer-top-message .footer__inner-row p {
  font-size: 14px;
  padding: 4px;
  letter-spacing: 0.03em;
  margin: 0px;
}
.footer-top-message .footer__inner-row strong a, .footer-top-message .footer__inner-row p a {
  font-size: 14px;
  text-decoration: underline;
  color: #333;
}
@media (max-width: 600px) {
  .footer-top-message {
    display: none;
  }
}

.footer-top-message__logo {
  display: block;
  width: 100%;
  max-width: 280px;
  margin: 1rem auto 1rem auto;
}

/*
----------------------------
    Footer -- footer links
----------------------------
*/
.footer__links {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  width: 100%;
  align-items: normal;
  justify-content: center;
}
@media (max-width: 760px) {
  .footer__links {
    flex-wrap: wrap;
  }
}

.footer__nav {
  display: block;
  margin: 16px 0;
  width: 25%;
  text-align: left;
  margin-right: 8px;
  cursor: pointer;
}
@media (max-width: 760px) {
  .footer__nav {
    width: 100%;
  }
}
.footer__nav:hover .footer-arrow-collapse {
  -webkit-animation: hover-slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: hover-slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.footer__nav ul {
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer__nav ul li {
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 1px;
}
.footer__nav ul li a {
  width: 100%;
  display: block;
  font-size: 14px;
  letter-spacing: 0.03em;
  color: #f4f4f4;
  text-decoration: none;
  padding: 8px 0;
}
.footer__nav ul li a:hover {
  text-decoration: underline;
}
@media (min-width: 500px) and (max-width: 760px) {
  .footer__nav ul li {
    width: 50%;
    float: left;
  }
}

.footer__title {
  font-size: 18px;
  letter-spacing: 0.03em;
  color: #f4f4f4;
  font-weight: 600;
  text-transform: uppercase;
}

.js-footer__nav-title {
  width: 100%;
}
.js-footer__nav-title:hover h3 {
  color: #FFFFFF;
}
.js-footer__nav-title h3 {
  color: #F3F5FB;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
@media (max-width: 960px) {
  .js-footer__nav-title h3 {
    font-size: 14px;
  }
}
.js-footer__nav-title .footer-arrow-collapse {
  display: none;
}
@media (max-width: 760px) {
  .js-footer__nav-title {
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #5E8D9F;
  }
  .js-footer__nav-title .footer-arrow-collapse {
    display: block;
    width: 8px;
    height: 8px;
    margin-left: auto;
    margin-right: 0;
    border: solid white;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }
}

/*.js-footer__nav-links {
    @media (max-width:760px) {
        display: none;
    }
}*/
@media (max-width: 760px) {
  .js-footer-links--visible .js-footer__nav-title .footer-arrow-collapse {
    display: block;
    width: 13px;
    height: 13px;
    position: relative;
    margin-left: auto;
    margin-right: 0;
    border: none;
    border-width: 0 0 0 0;
    display: inline-block;
    padding: 0px;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
  .js-footer-links--visible .js-footer__nav-title .footer-arrow-collapse:before, .js-footer-links--visible .js-footer__nav-title .footer-arrow-collapse:after {
    position: absolute;
    left: 6px;
    content: " ";
    height: 13px;
    width: 1.5px;
    background-color: white;
  }
  .js-footer-links--visible .js-footer__nav-title .footer-arrow-collapse:before {
    transform: rotate(45deg);
  }
  .js-footer-links--visible .js-footer__nav-title .footer-arrow-collapse:after {
    transform: rotate(-45deg);
  }
  .js-footer-links--visible .js-footer__nav-links {
    display: block;
    margin-top: 1rem;
  }
}

@media (max-width: 760px) {
  .js-footer-links--hidden .js-footer__nav-links {
    display: none;
  }
}

/**
* ----------------------------------------
* animation hover-slide-top
* ----------------------------------------
*/
@-webkit-keyframes hover-slide-top {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes hover-slide-top {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
/*
----------------------------
    Footer -- Newsletter
----------------------------
*/
/* ---------------------------------------------------
  ROW 2 ( Newsletter ) ==== move into layout footer
--------------------------------------------------- */
.footer__stay-in-touch .footer__inner-row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* RIGHT - NEWSLETTER */
.footer__newsletter {
  margin-left: auto;
  margin-right: 0px;
  width: 100%;
  display: block;
}

.footer-newsletter__title {
  width: 100%;
  text-align: left;
}

.footer-newsletter__box {
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  text-align: right;
}
.footer-newsletter__box input[type=text] {
  width: 300px;
  padding: 12px;
  border-radius: 4px 0 0 4px;
  border: 0px;
  margin-left: auto;
}
.footer-newsletter__box input[type=submit] {
  width: 200px;
  padding: 12px 16px;
  border-radius: 0 4px 4px 0;
  border: 0px;
  margin-right: auto;
}
@media (max-width: 450px) {
  .footer-newsletter__box input[type=text] {
    width: 60%;
  }
  .footer-newsletter__box input[type=submit] {
    width: 40%;
  }
}

/*
----------------------------
    Footer -- Privacy menu
    NO LONGER IN USE


       <div class="footer__inner-row">
                <ul class="footer__privacy-links">
                    <li><a href="/">Sitemap</a></li>
                    <li><a href="/">Cookie & Privacy Policy</a></li>
                    <li><a href="/">Terms and conditions</a></li>
                </ul>
            </div>



----------------------------
*/
/*.footer__privacy-links {
    padding-left: 0;
    margin-left: auto;
    list-style: none;
    display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;

    li {
        margin: 0.5rem;
        padding: 0.5rem;

        a {
            color: #333;
            text-decoration: none;

            &:hover {
                text-decoration: underline;
            }
        }
    }
}*/
/*
----------------------------
    Footer -- Social media icons
----------------------------
*/
/* LEFT - SOCIAL ICONS */
.footer__social-icons {
  width: 100%;
  margin-left: 0px;
  padding-left: 0px;
  margin-right: auto;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 500px) {
  .footer__social-icons {
    flex-wrap: wrap;
  }
}
.footer__social-icons li {
  margin: 4px;
  padding: 0;
}
.footer__social-icons li a {
  color: #f4f4f4;
  text-decoration: none;
}
.footer__social-icons li a:hover {
  text-decoration: underline;
  color: #fff;
}
.footer__social-icons li a i {
  font-size: 30px;
  margin-right: 26px;
}
.footer__social-icons li a img {
  height: 20px;
  display: inline-block;
  text-decoration: none;
  margin-right: 1rem;
}
.footer__social-icons li:hover {
  -webkit-animation: hover-slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: hover-slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.footer__social-icons li:last-child:hover {
  -webkit-animation: none;
  animation: none;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

/*
----------------------------
    Footer -- aaa
----------------------------
*/
/*
-------------------------------------------
    Footer -- ABOUT US NAV
-------------------------------------------
*/
.footer__about-us-nav {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 1rem auto 2rem auto;
}
.footer__about-us-nav li {
  list-style: none;
  margin: 0.5rem;
  padding: 0;
}
.footer__about-us-nav li a {
  color: white;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-decoration: underline;
}

.footer__separator-1200 {
  display: block;
  width: 100%;
  max-width: 1200px;
  height: 1px;
  background-color: #5E8D9F;
  margin: auto;
}

html body .informizely-feedback-button {
  padding: 0px 15px 0px 10px;
  letter-spacing: 0.05em;
  z-index: 99;
}

/* 
    flash sale messaging 
    This is now moved as inline style
*/
/* 
    OPENING HOURS
    This table is visible in the opening hours modal accessible from footer and header
*/
#modal__openinghours .modal-header .close {
  margin-top: -18px;
}

/* MODAL LAYOUT */
.modal-openinghours__wrapper {
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.modal-openinghours__col {
  width: 50%;
  padding: 0rem 1rem 1rem 0;
  font-size: 14px;
}
.modal-openinghours__col:first-child {
  margin-right: 1rem;
  border-right: 1px solid #e5e5e5;
}
.modal-openinghours__col h5 {
  font-size: 18px;
}

.modal-openinghours__title {
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: 1px solid #f4f4f4;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  min-height: 90px;
}
.modal-openinghours__title i {
  display: block;
  font-size: 22px;
  float: left;
  margin-right: 1rem;
}
.modal-openinghours__title p, .modal-openinghours__title strong, .modal-openinghours__title a {
  margin: 0;
  padding: 0;
  color: #333;
}
.modal-openinghours__title a {
  font-weight: bold;
}

/* TABLE */
.opening-hours__table {
  width: 100%;
  padding: 1.5rem 0rem;
}

.opening-hours__row {
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  font-size: 14px;
  padding: 0.3rem 0.3rem 0.3rem 0;
}
.opening-hours__row:hover {
  background-color: #f4f4f4;
  cursor: pointer;
}
.opening-hours__row span {
  text-align: left;
  padding: 0 0.5rem;
}
.opening-hours__row span:first-child {
  display: block;
  width: 80px;
  min-width: 80px;
  text-align: left;
}
.opening-hours__row:nth-child(6) {
  font-weight: bold;
}
.opening-hours__row:nth-child(7) {
  font-weight: bold;
}

#modal__openinghours .modal-footer .btn.btn-secondary:hover, #modal__openinghours .modal-footer .btn.btn-secondary:active, #modal__openinghours .modal-footer .btn.btn-secondary:focus {
  color: white;
}

.modal-openinghours__close {
  float: right;
  font-size: 21px;
  font-weight: bold;
  line-height: 1;
  color: #222;
  text-shadow: 0 1px 0 #fff;
  zoom: 1;
  background-color: white;
  border: 0;
  margin-top: -20px;
}
.modal-openinghours__close:hover, .modal-openinghours__close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

/* --------------------------------------
    SALES POINT B VERSION
-------------------------------------- */
.sales-point {
  width: 100%;
  background-color: #fff;
  padding: 2rem 0;
  margin-top: 3rem;
  text-align: center;
  -webkit-box-shadow: 0px 0px 32px 32px rgba(0, 0, 0, 0.01);
  -moz-box-shadow: 0px 0px 32px 32px rgba(0, 0, 0, 0.01);
  box-shadow: 0px 0px 32px 32px rgba(0, 0, 0, 0.01);
}

/* --
sales-point__list
 -- */
.sales-point__list {
  width: 100%;
  text-align: center;
  margin-bottom: 1rem;
}
.sales-point__list ul {
  max-width: 800px;
  list-style: none;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #ccc;
}
.sales-point__list ul li {
  display: flex;
  width: 240px;
  max-width: 240px;
  align-items: center;
  margin: 1rem 1rem 1rem 0rem;
  padding: 1rem 1rem 1rem 1rem;
  border-right: 1px solid #ccc;
}
.sales-point__list ul li p {
  font-size: 14px;
  text-align: left;
  padding: 0;
  margin: 0;
  line-height: 1.4;
}
.sales-point__list ul li img {
  margin-right: 2rem;
}
.sales-point__list ul li:first-child {
  border-left: 0px;
  padding-left: 4rem;
}
.sales-point__list ul li:last-child {
  border-right: 0px;
  margin-right: 0;
}
@media (max-width: 700px) {
  .sales-point__list ul {
    flex-wrap: wrap;
    padding: 0;
  }
  .sales-point__list ul li {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    border: 0px;
    margin: 1rem 1rem 1rem 1rem;
    padding: 1rem 1rem 1rem 1rem;
  }
  .sales-point__list ul li:first-child, .sales-point__list ul li:last-child {
    margin: 1rem 1rem 1rem 1rem;
    padding: 1rem 1rem 1rem 1rem;
  }
  .sales-point__list ul li p {
    width: 100%;
  }
}
@media (max-width: 550px) {
  .sales-point__list ul li {
    width: 50%;
    margin: 0 !important;
  }
  .sales-point__list ul li img {
    max-width: 20px !important;
    margin-right: 0.5rem;
  }
  .sales-point__list ul li p {
    font-size: 0.7rem;
  }
  .sales-point__list ul li:last-child {
    width: 100%;
  }
}
@media (max-width: 320px) {
  .sales-point__list ul li {
    width: 100%;
  }
  .sales-point__list ul li p {
    font-size: 0.8rem;
  }
}

/* --
sales-point__logos
 -- */
.sales-point__logos ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sales-point__logos ul li {
  margin: 0.5rem;
  padding: 0.5rem;
  cursor: pointer;
}
.sales-point__logos ul li img {
  max-height: 40px !important;
}
@media (max-width: 450px) {
  .sales-point__logos ul {
    flex-wrap: wrap;
    padding: 0.2rem;
    margin: 0.2rem;
  }
  .sales-point__logos ul img {
    max-height: 30px !important;
  }
}

.tippy-tooltip {
  max-width: 200px;
  font-size: 14px !important;
  padding: 20px;
}

/* 
    REDUCED BOOTSTRAP STYLE.

    Contains:

    - STYLE FOR BOOTSTRAP DATE PICKER ( Used in every page )
    - STYLE FOR BOOTSTRAP MODAL ( used in 'opening hours' in the footer )

    This file replaces the classic boostrap CSS in the new 2020layout + Add some old bootstrap style that was in the legacy version.
    It works without bootstrap stylesheet, but deeply needs refactoring!

 */
.datepicker {
  padding: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  direction: ltr;
}

.datepicker-inline {
  width: 220px;
}

.datepicker.datepicker-rtl {
  direction: rtl;
}

.datepicker.datepicker-rtl table tr td span {
  float: right;
}

.datepicker-dropdown {
  top: 0;
  left: 0;
}

.datepicker-dropdown:before {
  content: "";
  display: inline-block;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-top: 0;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  position: absolute;
}

.datepicker-dropdown:after {
  content: "";
  display: inline-block;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #ffffff;
  border-top: 0;
  position: absolute;
}

.datepicker-dropdown.datepicker-orient-left:before {
  left: 6px;
}

.datepicker-dropdown.datepicker-orient-left:after {
  left: 7px;
}

.datepicker-dropdown.datepicker-orient-right:before {
  right: 6px;
}

.datepicker-dropdown.datepicker-orient-right:after {
  right: 7px;
}

.datepicker-dropdown.datepicker-orient-top:before {
  top: -7px;
}

.datepicker-dropdown.datepicker-orient-top:after {
  top: -6px;
}

.datepicker-dropdown.datepicker-orient-bottom:before {
  bottom: -7px;
  border-bottom: 0;
  border-top: 7px solid #999;
}

.datepicker-dropdown.datepicker-orient-bottom:after {
  bottom: -6px;
  border-bottom: 0;
  border-top: 6px solid #ffffff;
}

.datepicker > div {
  display: none;
}

.datepicker.days div.datepicker-days {
  display: block;
}

.datepicker.months div.datepicker-months {
  display: block;
}

.datepicker.years div.datepicker-years {
  display: block;
}

.datepicker table {
  margin: 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.datepicker td,
.datepicker th {
  text-align: center;
  width: 20px;
  height: 20px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border: none;
}

.table-striped .datepicker table tr td,
.table-striped .datepicker table tr th {
  background-color: transparent;
}

.datepicker table tr td.day:hover,
.datepicker table tr td.day.focused {
  background: #eeeeee;
  cursor: pointer;
}

.datepicker table tr td.old,
.datepicker table tr td.new {
  color: #999999;
}

.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
  background: none;
  color: #999999;
  cursor: default;
}

.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover {
  background-color: #fde19a;
  background-image: -moz-linear-gradient(top, #fdd49a, #fdf59a);
  background-image: -ms-linear-gradient(top, #fdd49a, #fdf59a);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdd49a), to(#fdf59a));
  background-image: -webkit-linear-gradient(top, #fdd49a, #fdf59a);
  background-image: -o-linear-gradient(top, #fdd49a, #fdf59a);
  background-image: linear-gradient(top, #fdd49a, #fdf59a);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fdd49a", endColorstr="#fdf59a", GradientType=0);
  border-color: #fdf59a #fdf59a #fbed50;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  color: #000;
}

.datepicker table tr td.today:hover,
.datepicker table tr td.today:hover:hover,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today.disabled:hover:hover,
.datepicker table tr td.today:active,
.datepicker table tr td.today:hover:active,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today.active,
.datepicker table tr td.today:hover.active,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today.disabled:hover.active,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today:hover.disabled,
.datepicker table tr td.today.disabled.disabled,
.datepicker table tr td.today.disabled:hover.disabled,
.datepicker table tr td.today[disabled],
.datepicker table tr td.today:hover[disabled],
.datepicker table tr td.today.disabled[disabled],
.datepicker table tr td.today.disabled:hover[disabled] {
  background-color: #fdf59a;
}

.datepicker table tr td.today:active,
.datepicker table tr td.today:hover:active,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today.active,
.datepicker table tr td.today:hover.active,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today.disabled:hover.active {
  background-color: #fbf069 \9 ;
}

.datepicker table tr td.today:hover:hover {
  color: #000;
}

.datepicker table tr td.today.active:hover {
  color: #fff;
}

.datepicker table tr td.range,
.datepicker table tr td.range:hover,
.datepicker table tr td.range.disabled,
.datepicker table tr td.range.disabled:hover {
  background: #eeeeee;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

.datepicker table tr td.range.today,
.datepicker table tr td.range.today:hover,
.datepicker table tr td.range.today.disabled,
.datepicker table tr td.range.today.disabled:hover {
  background-color: #f3d17a;
  background-image: -moz-linear-gradient(top, #f3c17a, #f3e97a);
  background-image: -ms-linear-gradient(top, #f3c17a, #f3e97a);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f3c17a), to(#f3e97a));
  background-image: -webkit-linear-gradient(top, #f3c17a, #f3e97a);
  background-image: -o-linear-gradient(top, #f3c17a, #f3e97a);
  background-image: linear-gradient(top, #f3c17a, #f3e97a);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f3c17a", endColorstr="#f3e97a", GradientType=0);
  border-color: #f3e97a #f3e97a #edde34;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

.datepicker table tr td.range.today:hover,
.datepicker table tr td.range.today:hover:hover,
.datepicker table tr td.range.today.disabled:hover,
.datepicker table tr td.range.today.disabled:hover:hover,
.datepicker table tr td.range.today:active,
.datepicker table tr td.range.today:hover:active,
.datepicker table tr td.range.today.disabled:active,
.datepicker table tr td.range.today.disabled:hover:active,
.datepicker table tr td.range.today.active,
.datepicker table tr td.range.today:hover.active,
.datepicker table tr td.range.today.disabled.active,
.datepicker table tr td.range.today.disabled:hover.active,
.datepicker table tr td.range.today.disabled,
.datepicker table tr td.range.today:hover.disabled,
.datepicker table tr td.range.today.disabled.disabled,
.datepicker table tr td.range.today.disabled:hover.disabled,
.datepicker table tr td.range.today[disabled],
.datepicker table tr td.range.today:hover[disabled],
.datepicker table tr td.range.today.disabled[disabled],
.datepicker table tr td.range.today.disabled:hover[disabled] {
  background-color: #f3e97a;
}

.datepicker table tr td.range.today:active,
.datepicker table tr td.range.today:hover:active,
.datepicker table tr td.range.today.disabled:active,
.datepicker table tr td.range.today.disabled:hover:active,
.datepicker table tr td.range.today.active,
.datepicker table tr td.range.today:hover.active,
.datepicker table tr td.range.today.disabled.active,
.datepicker table tr td.range.today.disabled:hover.active {
  background-color: #efe24b \9 ;
}

.datepicker table tr td.selected,
.datepicker table tr td.selected:hover,
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected.disabled:hover {
  background-color: #9e9e9e;
  background-image: -moz-linear-gradient(top, #b3b3b3, #808080);
  background-image: -ms-linear-gradient(top, #b3b3b3, #808080);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b3b3b3), to(#808080));
  background-image: -webkit-linear-gradient(top, #b3b3b3, #808080);
  background-image: -o-linear-gradient(top, #b3b3b3, #808080);
  background-image: linear-gradient(top, #b3b3b3, #808080);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b3b3b3", endColorstr="#808080", GradientType=0);
  border-color: #808080 #808080 #595959;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.datepicker table tr td.selected:hover,
.datepicker table tr td.selected:hover:hover,
.datepicker table tr td.selected.disabled:hover,
.datepicker table tr td.selected.disabled:hover:hover,
.datepicker table tr td.selected:active,
.datepicker table tr td.selected:hover:active,
.datepicker table tr td.selected.disabled:active,
.datepicker table tr td.selected.disabled:hover:active,
.datepicker table tr td.selected.active,
.datepicker table tr td.selected:hover.active,
.datepicker table tr td.selected.disabled.active,
.datepicker table tr td.selected.disabled:hover.active,
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected:hover.disabled,
.datepicker table tr td.selected.disabled.disabled,
.datepicker table tr td.selected.disabled:hover.disabled,
.datepicker table tr td.selected[disabled],
.datepicker table tr td.selected:hover[disabled],
.datepicker table tr td.selected.disabled[disabled],
.datepicker table tr td.selected.disabled:hover[disabled] {
  background-color: #808080;
}

.datepicker table tr td.selected:active,
.datepicker table tr td.selected:hover:active,
.datepicker table tr td.selected.disabled:active,
.datepicker table tr td.selected.disabled:hover:active,
.datepicker table tr td.selected.active,
.datepicker table tr td.selected:hover.active,
.datepicker table tr td.selected.disabled.active,
.datepicker table tr td.selected.disabled:hover.active {
  background-color: #666666 \9 ;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover {
  background-color: #006dcc;
  background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
  background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
  background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
  background-image: -o-linear-gradient(top, #0088cc, #0044cc);
  background-image: linear-gradient(top, #0088cc, #0044cc);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0088cc", endColorstr="#0044cc", GradientType=0);
  border-color: #0044cc #0044cc #002a80;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.datepicker table tr td.active:hover,
.datepicker table tr td.active:hover:hover,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.disabled:hover:hover,
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:hover.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active:hover.disabled,
.datepicker table tr td.active.disabled.disabled,
.datepicker table tr td.active.disabled:hover.disabled,
.datepicker table tr td.active[disabled],
.datepicker table tr td.active:hover[disabled],
.datepicker table tr td.active.disabled[disabled],
.datepicker table tr td.active.disabled:hover[disabled] {
  background-color: #0044cc;
}

.datepicker table tr td.active:active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:hover.active {
  background-color: #003399 \9 ;
}

.datepicker table tr td span {
  display: block;
  width: 23%;
  height: 54px;
  line-height: 54px;
  float: left;
  margin: 1%;
  cursor: pointer;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.datepicker table tr td span:hover {
  background: #eeeeee;
}

.datepicker table tr td span.disabled,
.datepicker table tr td span.disabled:hover {
  background: none;
  color: #999999;
  cursor: default;
}

.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover {
  background-color: #006dcc;
  background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
  background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
  background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
  background-image: -o-linear-gradient(top, #0088cc, #0044cc);
  background-image: linear-gradient(top, #0088cc, #0044cc);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0088cc", endColorstr="#0044cc", GradientType=0);
  border-color: #0044cc #0044cc #002a80;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.datepicker table tr td span.active:hover,
.datepicker table tr td span.active:hover:hover,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active.disabled:hover:hover,
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:hover.active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active:hover.disabled,
.datepicker table tr td span.active.disabled.disabled,
.datepicker table tr td span.active.disabled:hover.disabled,
.datepicker table tr td span.active[disabled],
.datepicker table tr td span.active:hover[disabled],
.datepicker table tr td span.active.disabled[disabled],
.datepicker table tr td span.active.disabled:hover[disabled] {
  background-color: #0044cc;
}

.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:hover.active {
  background-color: #003399 \9 ;
}

.datepicker table tr td span.old,
.datepicker table tr td span.new {
  color: #999999;
}

.datepicker th.datepicker-switch {
  width: 145px;
}

.datepicker thead tr:first-child th,
.datepicker tfoot tr th {
  cursor: pointer;
}

.datepicker thead tr:first-child th:hover,
.datepicker tfoot tr th:hover {
  background: #eeeeee;
}

.datepicker .cw {
  font-size: 10px;
  width: 12px;
  padding: 0 2px 0 5px;
  vertical-align: middle;
}

.datepicker thead tr:first-child th.cw {
  cursor: default;
  background-color: transparent;
}

.input-append.date .add-on i,
.input-prepend.date .add-on i {
  cursor: pointer;
  width: 16px;
  height: 16px;
}

.input-daterange input {
  text-align: center;
}

.input-daterange input:first-child {
  -webkit-border-radius: 3px 0 0 3px;
  -moz-border-radius: 3px 0 0 3px;
  border-radius: 3px 0 0 3px;
}

.input-daterange input:last-child {
  -webkit-border-radius: 0 3px 3px 0;
  -moz-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
}

.input-daterange .add-on {
  display: inline-block;
  width: auto;
  min-width: 16px;
  height: 20px;
  padding: 4px 5px;
  font-weight: normal;
  line-height: 20px;
  text-align: center;
  text-shadow: 0 1px 0 #ffffff;
  vertical-align: middle;
  background-color: #eeeeee;
  border: 1px solid #ccc;
  margin-left: -5px;
  margin-right: -5px;
}

.datepicker.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  float: left;
  display: none;
  min-width: 160px;
  list-style: none;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  *border-right-width: 2px;
  *border-bottom-width: 2px;
  color: #333333;
  font-size: 13px;
  line-height: 20px;
}

.datepicker.dropdown-menu th,
.datepicker.datepicker-inline th,
.datepicker.dropdown-menu td,
.datepicker.datepicker-inline td {
  padding: 4px 5px;
}

/* -----------------------------------------------------------
    DATEPICKER Legacy Style for new homepage
    this file is used in homepage B 2020 version only
----------------------------------------------------------- */
#search-datepicker {
  outline: none;
}

#search-criteria-mobile button {
  font-style: italic;
}

#search-criteria-mobile button.non-italic {
  font-style: normal;
}

.date-picker-table-head {
  height: 25px;
  font-size: 12px;
}

.date-picker-table-head .fa {
  cursor: pointer;
}

.datepicker-days {
  font-size: 12px !important;
}

.datepicker-dropdown {
  margin-top: 10px !important;
  box-shadow: none !important;
}

.month-name {
  text-align: center;
  padding: 0 !important;
  background-color: #fff !important;
}

div.datepicker.dropdown-menu table td {
  font-size: 12px;
  padding: 4px 7px !important;
}

.calendar-spacer td {
  border: none !important;
  padding-left: 0 !important;
}

.calendar-spacer {
  height: 10px;
}

.calendar-spacer button {
  font-size: 14px;
  height: 26px;
  padding: 2px;
  margin-right: 5%;
}

.calendar-spacer .calendar-whole-month {
  width: 100%;
  background-color: #0171a6 !important;
  border-color: #0171a6 !important;
}

.calendar-spacer .calendar-clear {
  width: 100%;
  background-color: #c90564 !important;
  border-color: #c90564 !important;
}

.disabled.day {
  background: #e9eef3 !important;
  color: #e9eef3 !important;
  opacity: 1 !important;
  cursor: default !important;
}

@media (max-width: 768px) {
  div.datepicker.dropdown-menu {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    margin-top: -150px !important;
    margin-left: -120px !important;
    z-index: 12121222 !important;
  }
  div.mobile-calendar-overlay {
    height: 105% !important;
    top: -15px !important;
    left: 0 !important;
  }
  body > header #main-header-bottom .caret-container .fa-calendar-o.date:before {
    color: #808080 !important;
  }
  body > header #main-header-bottom .caret-container {
    margin-top: 13px;
    background: none !important;
  }
}
/* ----------------------------------------------------------------------------------------------------------
    CSS FOR DATEPICKER & MODAL BOXES 

    This is legacy code that is transferred to home page B version to mak the datepicker work
---------------------------------------------------------------------------------------------------------- */
div.datepicker.dropdown-menu {
  padding: 0;
  overflow: hidden;
  position: absolute;
  background: transparent;
  border-radius: 0;
  border: none;
  z-index: 100 !important;
}
div.datepicker.dropdown-menu table {
  background: #dce5ee;
  border: 8px solid #dfe5ee;
  outline: none;
  color: #0171a6;
  border-collapse: separate;
}
div.datepicker.dropdown-menu table thead tr th.prev, div.datepicker.dropdown-menu table thead tr th.next {
  padding: 8px;
  display: block;
}
div.datepicker.dropdown-menu table thead tr th.datepicker-switch {
  padding-top: 4px;
}
div.datepicker.dropdown-menu table thead tr th.dow {
  border: 0px !important;
  background: transparent;
  color: #333;
  text-align: center;
}
div.datepicker.dropdown-menu table thead tr > th {
  height: 25px;
  background: transparent;
}
div.datepicker.dropdown-menu table thead tr > th small {
  border: 2px solid white;
  display: inline-block;
  width: 30px;
  height: 25px;
  padding-top: 2px;
}
div.datepicker.dropdown-menu table thead tr:first-child {
  border-bottom: 10px solid transparent;
}
div.datepicker.dropdown-menu table td {
  cursor: pointer;
  text-align: center;
  border: 1px solid #f4f4f4;
  background: #dce5ee;
  color: #0073a6;
  font-style: normal;
  font-weight: 900;
  border-radius: 0;
  padding: 6px;
  opacity: 1 !important;
}
div.datepicker.dropdown-menu table td.day {
  color: #444;
  font-weight: 400;
}
div.datepicker.dropdown-menu table td.day:hover {
  background: #0073a6;
  color: #ffffff;
}
div.datepicker.dropdown-menu table td.active {
  background: #0073a6;
  color: #ffffff;
}
div.datepicker.dropdown-menu table td.new {
  color: #dce5ee;
  background-color: #e9eef3;
}
div.datepicker.dropdown-menu table td.old {
  cursor: default;
  color: #808080;
  background-color: #e9eef3;
}
div.datepicker.dropdown-menu table td.old:hover {
  color: #808080 !important;
}

.calendar-spacer .calendar-whole-month {
  color: white;
  border: 0;
  -webkit-appearance: none;
}

.calendar-spacer .calendar-clear {
  color: white;
  border: 0;
  -webkit-appearance: none;
}

/* 
    MODAL BOOTSTRAP CODE TO BE MOVED 
*/
.modal-open {
  overflow: hidden;
}

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  display: none;
  overflow: auto;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  outline: 0;
}

.modal.fade .modal-dialog {
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -moz-transition: -moz-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  -webkit-transform: translate(0, -25%);
  -ms-transform: translate(0, -25%);
  transform: translate(0, -25%);
}

.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: 10px;
}

.modal-content {
  position: relative;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  outline: none;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
}

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000;
}

.modal-backdrop.fade {
  filter: alpha(opacity=0);
  opacity: 0;
}

.modal-backdrop.in {
  filter: alpha(opacity=50);
  opacity: 0.5;
}

.modal-header {
  min-height: 16.42857143px;
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
}

.modal-header .close {
  margin-top: -2px;
}

.modal-title {
  margin: 0;
  line-height: 1.42857143;
}

.modal-body {
  position: relative;
  padding: 20px;
}

.modal-footer {
  padding: 19px 20px 20px;
  margin-top: 15px;
  text-align: right;
  border-top: 1px solid #e5e5e5;
}

.modal-footer .btn + .btn {
  margin-bottom: 0;
  margin-left: 5px;
}

.modal-footer .btn-group .btn + .btn {
  margin-left: -1px;
}

.modal-footer .btn-block + .btn-block {
  margin-left: 0;
}

@media (min-width: 768px) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto;
  }
  .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  }
  .modal-sm {
    width: 300px;
  }
}
@media (min-width: 992px) {
  .modal-lg {
    width: 900px;
  }
}
/*----------------------------
BLACK FRIDAY TRUSTBAR BANNER

    The top blackfriday banner is now using inline style
    This CSS is only used for hte black label in search and most of the style could be cleaned up.
----------------------------*/
.plnt-blackfriday-bar {
  background: #000;
  color: #FFF;
  text-align: center;
  width: 100%;
}

.plnt-blackfriday-bar a, .plnt-blackfriday-bar a:hover {
  text-decoration: none;
}

.plnt-blackfriday-bar__inner {
  font-weight: 500;
  padding: 12px;
}

.plnt-blackfriday-bar__inner .blackfriday-title {
  font-size: 28px;
  color: #fff;
}

.plnt-blackfriday-bar__inner .blackfriday-description {
  display: inline-block;
  font-weight: 400;
  font-size: 14px;
  position: relative;
  top: -2px;
  font-family: sans-serif;
  text-transform: uppercase;
  color: #ddd;
  padding-left: 12px;
  padding-right: 12px;
  letter-spacing: 0.2px;
}

@media screen and (max-width: 1000px) {
  .plnt-blackfriday-bar .blackfriday-description {
    top: 0;
    padding-top: 6px;
    margin-top: 6px;
    line-height: 16px;
    border-top: 0px solid #888;
  }
  .plnt-blackfriday-bar__inner {
    background: 0 0;
  }
}
@media screen and (max-width: 668px) {
  .plnt-blackfriday-bar .blackfriday-description {
    border-top: 1px solid #888;
  }
  .plnt-blackfriday-bar__inner {
    background: 0 0;
  }
  .plnt-blackfriday-bar__inner .blackfriday-title {
    font-size: 18px;
    color: #fff;
  }
}
/*----------------------------
BLACK FRIDAY LABEL
----------------------------*/
.plnt-blackfriday-card-discount {
  background: #000;
  color: #FFF;
  text-align: center;
  padding: 4px 8px;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 5px;
}

.src-cruise-info {
  padding: 12px 16px 8px 16px;
}

@media only screen and (max-width: 600px) {
  .src-cruise-info {
    padding: 12px 8px;
  }
}
/*----------------------------
BLACK FRIDAY LABEL
----------------------------*/
.plnt-itin-blackfriday-discount {
  background: #000;
  color: #FFF;
  text-align: center;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 700;
  display: block;
  border-radius: 5px;
  clear: both;
}

/* TRUSTBANNER FOR CONTENT TEAM
//
// This CSS is used by the content team, hardcoded in html like this:

<div class="trustbanner__banner">
    <div class="trustbanner__left">
        <img data-orig="https://www.iglu.com\mailings\cruise\SIte\trust-left.png" class="lazy" src="https://www.iglu.com\mailings\cruise\SIte\trust-left.png" alt="ABTA / ATOL protected" />
    </div>

    <div class="trustbanner__right">
        <img data-orig="https://www.iglu.com\mailings\cruise\SIte\trust-right.png" class="lazy" src="https://www.iglu.com\mailings\cruise\SIte\trust-right.png" alt="20 years experience" />
    </div>
</div>
    */
.trustbanner__banner {
  width: 100%;
  max-width: 1200px;
  display: flex;
  margin: auto;
  background-color: #F3F3F3;
}
@media (max-width: 750px) {
  .trustbanner__banner {
    flex-wrap: wrap;
  }
  .trustbanner__banner .trustbanner__left, .trustbanner__banner .trustbanner__right {
    max-width: 100%;
    width: 100%;
    text-align: center;
  }
  .trustbanner__banner .trustbanner__left img, .trustbanner__banner .trustbanner__right img {
    width: 500px;
    max-width: 500px;
    margin: auto;
  }
}
@media (max-width: 520px) {
  .trustbanner__banner .trustbanner__left img, .trustbanner__banner .trustbanner__right img {
    width: 100%;
    max-width: 100%;
  }
}

.trustbanner__left,
.trustbanner__right {
  width: 50%;
  max-width: 50%;
  display: block;
}
.trustbanner__left img,
.trustbanner__right img {
  width: 100%;
}

/* ------------------------------------------------------------------------------------------------
    FCC Rebook message in Search result page
------------------------------------------------------------------------------------------------ */
/* 
FCC rebook-page-message
*/
.rebook-page-message {
  width: 100%;
  color: #333;
  background: #D92B6A;
  padding: 5px;
  font-size: 16px;
  letter-spacing: 0.03em !important;
  margin-bottom: 1rem;
  float: left;
}
.rebook-page-message i {
  font-size: 28px;
  margin-left: 1rem;
  margin-right: 1rem;
  color: white;
}
@media (max-width: 600px) {
  .rebook-page-message {
    color: #D92B6A;
    background: white;
    padding: 5px 0;
    width: 100%;
  }
  .rebook-page-message i {
    display: none;
  }
  .rebook-page-message .rebook-page-message__content {
    color: #D92B6A;
  }
  .rebook-page-message .rebook-page-message__content p {
    color: #D92B6A;
  }
}

.rebook-page-message__available-credit {
  padding: 1.5rem 2rem;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rebook-page-message__available-credit p {
  font-size: 16px;
  margin: 0;
  padding: 0;
  color: inherit;
}
@media (max-width: 1100px) {
  .rebook-page-message__available-credit {
    padding: 0.5rem 0;
  }
  .rebook-page-message__available-credit p {
    font-size: 14px;
    line-height: 1.2;
  }
}
@media (max-width: 600px) {
  .rebook-page-message__available-credit {
    color: #E62600;
    text-align: left;
  }
  .rebook-page-message__available-credit i {
    display: none;
  }
}

.rebook-page-message__available-message {
  padding: 0.5rem 3rem 1.5rem 3rem;
  text-align: center;
  color: white;
  text-align: center;
  font-size: 14px;
  font-style: italic;
}
@media (max-width: 1100px) {
  .rebook-page-message__available-message {
    padding: 0.5rem 1rem;
  }
}
@media (max-width: 600px) {
  .rebook-page-message__available-message {
    padding: 0;
    color: #333;
    text-align: left;
    font-size: 12px;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
  }
}

.rebook-page-message__checkbox {
  margin-top: 10px;
  display: flex;
  align-items: center;
  width: 100%;
  cursor: pointer;
  color: white;
}
.rebook-page-message__checkbox input {
  margin-right: 10px;
}

/* 
FCC CARD MESSAGE
*/
.rebook-card-message {
  display: inline-flex;
  width: auto;
  clear: both;
  background: #D92B6A;
  border-radius: 20px;
  margin-right: auto;
  padding: 0.2rem 20px;
  margin-bottom: 14px;
  margin-left: 8px;
}
.rebook-card-message i {
  margin-right: 10px;
  font-size: 22px;
  color: white;
}
.rebook-card-message p {
  display: block;
  width: 100%;
  font-size: 12px !important;
  letter-spacing: 0.03em;
  text-align: left;
  padding: 0;
  margin: 0;
  color: white !important;
}
@media (max-width: 800px) {
  .rebook-card-message {
    width: 100%;
    margin-left: initial;
    margin-right: initial;
  }
  .rebook-card-message p {
    text-align: center;
  }
}

/* ----------------------------------------------
   Utility classes
 * ---------------------------------------------- */
.noscroll {
  overflow: hidden;
}

.darknight {
  display: none;
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  cursor: pointer;
}

/*

    1) Add a parent with .videoWrapper class around the iframe
    2) Remove width and height from the video iframe

    <div class="videoWrapper">
        <iframe src="https://www.youtube.com/embed/tsG1JSe-TMc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
    </div>

*/
.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.js-poster-video-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ----------------------------------------------

    DOUBLE VIDEO STRUCTURE 


    USAGE:
    ---------

    <div class="double-video">

    <div class="double-video__video1">
      <div class="videoWrapper">
            <iframe src="https://www.youtube.com/embed/tsG1JSe-TMc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
        </div>
    </div>

      <div class="double-video__video2">
      <div class="videoWrapper">
            <iframe src="https://www.youtube.com/embed/tsG1JSe-TMc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
        </div>
     </div>

    </div>


----------------------------------------- */
.double-video {
  width: 100%;
  max-width: 1200px;
  display: flex;
  text-align: center;
  margin: 1rem auto;
}
@media (max-width: 800px) {
  .double-video {
    flex-wrap: wrap;
  }
  .double-video .double-video__video1, .double-video .double-video__video2 {
    width: 100%;
    margin: 1rem 0 0 0;
  }
}

.double-video__video1 {
  width: 50%;
  margin-right: 0.5rem;
}

.double-video__video2 {
  width: 50%;
  margin-left: 0.5rem;
}

/* --------------------------------------------------------------------------------------------
   INTRODUCTION VIDEO 
   This is used by content team as generic class to add videos in the html content

    USAGE:
    ----------

    <div class="introduction-video">
        <div class="introduction-video__greybox">
   <div class="videoWrapper">
                <iframe src="https://www.youtube.com/embed/7qnRNUAA-5g" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
            </div>
        </div>
    </div>


 * -------------------------------------------------------------------------------------------- */
.introduction-video {
  position: relative;
}

.introduction-video__greybox {
  background-color: #f3f5fb;
  padding: 2rem;
  max-width: 800px;
  margin: 2rem auto 6rem auto;
  display: block;
  position: relative;
  border-radius: 1px;
}
@media (max-width: 750px) {
  .introduction-video__greybox {
    border-radius: 0px;
    margin-bottom: 3rem;
  }
}
@media (max-width: 550px) {
  .introduction-video__greybox {
    padding: 0;
  }
}

/* responsive table wrap */
.table-responsive-wrap {
  width: 100%;
  display: block;
  overflow-x: auto;
}

/* Animation */
.pulsate-fwd {
  -webkit-animation: pulsate-fwd 0.5s ease-in-out infinite both;
  animation: pulsate-fwd 0.5s ease-in-out infinite both;
}

/* ----------------------------------------------
 * Generated by Animista on 2020-10-28 14:51:51
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
/**
 * ----------------------------------------
 * animation pulsate-fwd
 * ----------------------------------------

    -webkit-animation: pulsate-fwd 0.5s ease-in-out infinite both;
    animation: pulsate-fwd 0.5s ease-in-out infinite both;


 */
@-webkit-keyframes pulsate-fwd {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes pulsate-fwd {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.kenburns-top {
  -webkit-animation: kenburns-top 5s ease-out both;
  animation: kenburns-top 5s ease-out both;
}

/* ----------------------------------------------
 * Generated by Animista on 2020-10-30 10:52:8
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
/**
 * ----------------------------------------
 * animation kenburns-top

    .kenburns-top {
	-webkit-animation: kenburns-top 5s ease-out both;
	        animation: kenburns-top 5s ease-out both;
}
 * ----------------------------------------
 */
@-webkit-keyframes kenburns-top {
  0% {
    -webkit-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
    transform-origin: 50% 16%;
  }
  100% {
    -webkit-transform: scale(1.25) translateY(-15px);
    transform: scale(1.25) translateY(-15px);
    -webkit-transform-origin: top;
    transform-origin: top;
  }
}
@keyframes kenburns-top {
  0% {
    -webkit-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
    transform-origin: 50% 16%;
  }
  100% {
    -webkit-transform: scale(1.25) translateY(-15px);
    transform: scale(1.25) translateY(-15px);
    -webkit-transform-origin: top;
    transform-origin: top;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2020-5-27 7:44:46
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
.slide-in-blurred-right {
  -webkit-animation: slide-in-blurred-right 6s cubic-bezier(0.23, 1, 0.32, 1) both;
  animation: slide-in-blurred-right 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
}

/**
 * ----------------------------------------
 * animation slide-in-blurred-right
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-blurred-right {
  0% {
    -webkit-transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
    transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-filter: blur(40px);
    filter: blur(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) scaleY(1) scaleX(1);
    transform: translateX(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1;
  }
}
@keyframes slide-in-blurred-right {
  0% {
    -webkit-transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
    transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-filter: blur(40px);
    filter: blur(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) scaleY(1) scaleX(1);
    transform: translateX(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1;
  }
}
/* ----------------------------------------------
 * USED FOR COOKIE TOAST NOTIFICATION ENTRANCE
 * ---------------------------------------------- */
.slide-in-bottom {
  -webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/**
 * ----------------------------------------
 * animation slide-in-bottom
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
    transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
    transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}
.slide-in-right {
  -webkit-animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2020-6-24 12:40:23
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
/**
 * ----------------------------------------
 * animation slide-in-right
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(1000px);
    transform: translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(1000px);
    transform: translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
.slide-in-bottom {
  -webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.swing-in-bottom-fwd {
  -webkit-animation: swing-in-bottom-fwd 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  animation: swing-in-bottom-fwd 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2020-7-14 10:51:2
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
/**
 * ----------------------------------------
 * animation slide-in-bottom
 * ----------------------------------------

     -webkit-animation: swing-in-bottom-fwd 0.3s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
    animation: swing-in-bottom-fwd 0.3s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;


 */
@-webkit-keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
    transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
    transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}
.slide-in-bck-bottom {
  -webkit-animation: slide-in-bck-bottom 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-in-bck-bottom 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2020-11-2 8:26:3
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
/**
 * ----------------------------------------
 * animation slide-in-bck-bottom
    -webkit-animation: slide-in-bck-bottom 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-bck-bottom 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;


 * ----------------------------------------
 */
@-webkit-keyframes slide-in-bck-bottom {
  0% {
    -webkit-transform: translateZ(70px) translateY(30px);
    transform: translateZ(70px) translateY(30px);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateZ(20px) translateY(10px);
    transform: translateZ(20px) translateY(10px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0);
    transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-bck-bottom {
  0% {
    -webkit-transform: translateZ(70px) translateY(30px);
    transform: translateZ(70px) translateY(30px);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateZ(20px) translateY(10px);
    transform: translateZ(20px) translateY(10px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0);
    transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}
/* ----------------------------------------------
  ----------------------------------------
  animation slide-out-top
  ----------------------------------------

    USAGE:

    .slide-out-top {
	-webkit-animation: slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
 * ---------------------------------------------- */
.slide-out-top {
  -webkit-animation: slide-out-top 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
  animation: slide-out-top 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

@-webkit-keyframes slide-out-top {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-1000px);
    transform: translateY(-1000px);
    opacity: 0;
  }
}
@keyframes slide-out-top {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-1000px);
    transform: translateY(-1000px);
    opacity: 0;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2020-5-27 7:52:58
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
.flip-out-ver-right {
  -webkit-animation: flip-out-ver-right 0.45s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
  animation: flip-out-ver-right 0.45s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

/**
 * ----------------------------------------
 * @animation flip-out-ver-right
 * ----------------------------------------
 */
@-webkit-keyframes flip-out-ver-right {
  0% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateY(70deg);
    transform: rotateY(70deg);
    opacity: 0;
  }
}
@keyframes flip-out-ver-right {
  0% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateY(70deg);
    transform: rotateY(70deg);
    opacity: 0;
  }
}
/* ------------------------ 
      Button library
  ------------------------ 

  Theme variables ( IGLU )
  Merge with UI pattern library colours

      <a class="gaudi-btn gaudi-btn--primary gaudi-btn--small"></a>

          <a class="gaudi-btn gaudi-btn--primary gaudi-btn--fullwidth"></a>

          <a class="gaudi-btn gaudi-btn--ghost gaudi-btn--fullwidth"></a>
 */
/* Generic style button */
.gaudi-btn {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  outline: 0px;
  text-decoration: none;
  display: inline-block;
  background-color: transparent;
  padding: 1.2rem 2rem;
  letter-spacing: 0.04em;
  font-size: 1em;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2, 0.5, 0, 1);
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  text-decoration: none;
}
.gaudi-btn:hover {
  text-decoration: none;
}
.gaudi-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.gaudi-btn:hover:before {
  left: 0%;
  right: auto;
  width: 100%;
}
.gaudi-btn:before {
  content: "";
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  height: 100%;
  width: 0px;
  z-index: -1;
  transition: all 0.2s cubic-bezier(0.2, 0.5, 0, 1);
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++
   JUST TEXT 
++++++++++++++++++++++++++++++++++++++++++++++++++ */
.gaudi-btn--text {
  text-transform: initial;
}
.gaudi-btn--text:hover {
  color: #c9005e;
  text-decoration: underline;
}

.gaudi-btn--text-underline {
  text-transform: initial;
  text-decoration: underline;
  letter-spacing: 0.02em;
}
.gaudi-btn--text-underline:hover {
  color: #c9005e;
}

.gaudi-btn--text-uppercase {
  text-transform: uppercase;
  text-decoration: underline;
  color: #242427;
}
.gaudi-btn--text-uppercase:hover {
  color: #242427;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++
    PRIMARY BUTTON 
++++++++++++++++++++++++++++++++++++++++++++++++++ */
.gaudi-btn--primary {
  color: #ffffff;
  background: #c9005e;
  border-color: #c9005e;
}
.gaudi-btn--primary:hover, .gaudi-btn--primary:active, .gaudi-btn--primary:focus {
  border-color: #2d349e;
  color: #fefefe;
  background: rgb(109.2, 0, 51.0686567164);
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++
    SECONDARY BUTTON 
++++++++++++++++++++++++++++++++++++++++++++++++++ */
.gaudi-btn--secondary {
  color: #ffffff;
  background: #0171a6;
  border-color: #0171a6;
}
.gaudi-btn--secondary:hover, .gaudi-btn--secondary:active, .gaudi-btn--secondary:focus {
  border-color: #0171a6;
  color: #fefefe;
  background: rgb(0.4502994012, 50.8838323353, 74.7497005988);
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++
    ACCENT BUTTON 
++++++++++++++++++++++++++++++++++++++++++++++++++ */
.gaudi-btn--accent {
  color: #ffffff;
  background: #333;
  border-color: #333;
}
.gaudi-btn--accent:hover, .gaudi-btn--accent:active {
  border-color: #2d349e;
  color: #fefefe;
  background: rgb(5.1, 5.1, 5.1);
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++
    BLACK BUTTON 
++++++++++++++++++++++++++++++++++++++++++++++++++ */
.gaudi-btn--black {
  background-color: #242427;
  border-color: #242427;
  color: #ffffff;
}
.gaudi-btn--black:hover {
  background: rgb(11.52, 11.52, 12.48);
}
.gaudi-btn--black:active {
  background: black;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++
    GHOST BUTTON 
++++++++++++++++++++++++++++++++++++++++++++++++++ */
.gaudi-btn--ghost {
  background-color: transparent;
  color: #c9005e;
  border: 1px solid #c9005e;
}
.gaudi-btn--ghost:hover {
  background: rgb(150, 0, 70.1492537313);
  color: #ffffff;
}
.gaudi-btn--ghost:active {
  background: rgb(226.5, 0, 105.9253731343);
  color: #ffffff;
}
.gaudi-btn--ghost:focus {
  background: rgb(226.5, 0, 105.9253731343);
  color: #ffffff;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++
    GHOST BUTTON BLACK
++++++++++++++++++++++++++++++++++++++++++++++++++ */
.gaudi-btn--ghost-black {
  background-color: transparent;
  color: #242427;
  border: 1px solid #242427;
}
.gaudi-btn--ghost-black:hover {
  background: rgb(11.52, 11.52, 12.48);
  color: #ffffff;
}
.gaudi-btn--ghost-black:active {
  background: rgb(48.24, 48.24, 52.26);
  color: #ffffff;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++
    TYPE
++++++++++++++++++++++++++++++++++++++++++++++++++ */
.gaudi-btn--rounded {
  border-radius: 50px;
}

.gaudi-btn--fullwidth {
  width: 100%;
  text-align: center;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++
    SIZE 
++++++++++++++++++++++++++++++++++++++++++++++++++ */
.gaudi-btn--small {
  font-size: 0.8em;
  padding: 8px 18px;
}

/* Support for IMG and SVG inside buttons  */
.gaudi-btn__icon {
  width: 20px;
  height: 20px;
  margin-right: 0.5rem;
  position: relative;
  float: left;
}
.gaudi-btn__icon img, .gaudi-btn__icon svg {
  max-width: 100%;
}

/* 
    Support for icon font inside buttons 
    btn__i btn__i--left
*/
.btn__i {
  width: 20px;
  height: 20px;
  position: relative;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn__i--left {
  width: auto;
  float: left;
  margin-right: 0.5rem;
}

.btn__i--right {
  width: auto;
  float: right;
  margin-left: 0.5rem;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++
    GENERIC BTN GROUP
    You can wrap buttons in a parent called .btn-group class
    If you need anything more then center or right alignment I suggest you create a dedicated class in your component.



    CENTER ALIGNMENT:
    ---------------------------------------------------
        <div class="btn-group btn-group--center">
                <button class="">Cancel</button>
                <button class="">Okey Doki</button>
        </div>


    LEFT or RIGHT ALIGNMENT:
    ---------------------------------------------------
        <div class="btn-group btn-group--center">
                <button class="">Cancel</button>
                <button class="">Okey Doki</button>
        </div>



    SPLIT: one to the left and one to the right:
    ---------------------------------------------------
    <div class="btn-group btn-group--split">
            <button class="">Cancel</button>
            <button class="">Okey Doki</button>
    </div>

++++++++++++++++++++++++++++++++++++++++++++++++++ */
.btn-group {
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  align-items: center;
}
.btn-group gaudi-btn {
  margin: 1rem;
}

/* Group modifier to get 1 or more buttons center aligned 
        <div class="btn-group btn-group--center">
            <button class="">Cancel</button>
            <button class="">Okey Doki</button>
        </div>
*/
.btn-group--center {
  justify-content: center;
}

/* Group modifier to get 1 or more buttons to the left */
.btn-group--left {
  justify-content: flex-start;
}

/* Group modifier to get 1 or more buttons to the right 
        <div class="btn-group btn-group--right">
            <button class="">Okey Doki</button>
        </div>

*/
.btn-group--right {
  justify-content: flex-end;
}

/* Group modifier for split: 1 btn to the left, one btn to the right */
.btn-group--split button:first-child, .btn-group--split a:first-child {
  margin-right: auto;
}
.btn-group--split button:last-child, .btn-group--split a:last-child {
  margin-left: auto;
}

/* Group modifier to set full with on mobile */
@media (max-width: 575px) {
  .btn-group--fullwidth-mobile .gaudi-btn {
    width: 100%;
  }
}

/* class to align buttons */
.btn-align--left {
  margin-right: auto;
}

.btn-align--right {
  margin-left: auto;
}

/* 
    ----------------------------------------
    BUTTONS LOADER
    ----------------------------------------

    This is an hidden spinner inside the button,
    activated by toggling the class .btn-is-loading in the button itself.


    USAGE:
    ---------------------
    Here is how to implement loading functionality when a button is clicked:


    STEP 1) 
            step1 - LEGACY METHOD ( Do not use please )

            Toggle this class to the button using JS, only when you want the loading to be seen:
            .btn-is-loading

            step2 - NEW RECOMMENDED METHOD:

            set the data attribute to TRUE"
            data-btn-is-loading="true"

    STEP 2) 
            Add the spinner inside any button, at the left of the text:
            We have two version of spinners that are currently supported:

            If button is dark:
                <img className="btn-is-loading__icon" src="/Content/img/icons/spinner-for-dark-bg.svg" />

            if button is light/white:
                <img className="btn-is-loading__icon" src="/Content/img/icons/spinner-for-white-bg.svg" />

*/
.btn-is-loading__icon {
  display: none;
}

.btn-is-loading, [data-btn-is-loading=true] {
  display: flex;
  opacity: 1;
  cursor: default;
  align-items: center;
  justify-content: center;
}
.btn-is-loading .btn-is-loading__icon, [data-btn-is-loading=true] .btn-is-loading__icon {
  display: inline-block;
  max-width: 26px;
  margin-right: 5px;
}
.btn-is-loading .btn__i, .btn-is-loading .gaudi-btn__icon, [data-btn-is-loading=true] .btn__i, [data-btn-is-loading=true] .gaudi-btn__icon {
  display: none;
}

/* 
    IGLU SNAPPER 'CSS FIRST' CAROUSEL
    Generic style applied to all carousels

    List of current carousels:

    - Price napper (Itinerary page)
    - Offer snapper (Itinerary page)
    - Ship deals ( Deckplan page )

    HOW TO USE:
    ---------------------------------------------------------------------

    <div class="WIDGETNAME-snapper" data-slider-container>
            <button data-slider-prev disabled aria-label="Previous" title="Previous">
                <svg viewBox="0 0 100 100">
                    <title>Previous</title>
                    <path d="M 10, 50 L 60, 100 L 65, 95 L 20, 50 L 65, 5 L 60, 0  Z" class="arrow"></path>
                </svg>
            </button>
            <button data-slider-next aria-label="Next" title="Next">
                <svg viewBox="0 0 100 100">
                    <path d="M 10,50 L 60,100 L 65,95 L 20,50  L 65,5 L 60,0 Z" class="arrow" transform="translate(100, 100) rotate(180) ">
                    </path>
                </svg>
            </button>
            <div data-slider class="WIDGETNAME-snapper__slider">
                <ul class="WIDGETNAME-snapper__track" data-slider-track>
                        <li data-slider-item>
                            <div class="WIDGETNAME-snapper__slide active">
                                SLIDE NUBER 1
                            </div>
                        </li>
                </ul>

            </div>
        </div>

*/
[data-slider] {
  display: block;
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

[data-slider-track] {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-inline: var(--slider-padding);
  scroll-behavior: smooth;
  list-style-type: none;
  padding: 0;
  margin-right: calc(var(--slider-column-gap) * -1);
  scrollbar-width: none;
}
[data-slider-track] > * {
  flex: 0 0 var(--slide-width);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  padding-right: var(--slider-column-gap);
}
[data-slider-track]::-webkit-scrollbar {
  display: none;
}

[data-slider-prev], [data-slider-next] {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 50%;
  margin-top: -18px;
  background-color: #fff;
  border: none;
  appearance: none;
  border-radius: 44px;
  padding: 0.4rem;
  width: 36px;
  height: 36px;
  z-index: 2;
  outline: none;
  box-shadow: 0 0 0 1px transparent, 0 0 0 4px transparent, 0 2px 4px rgba(0, 0, 0, 0.35);
  transition: all 200ms ease;
}
[data-slider-prev]:hover, [data-slider-next]:hover {
  cursor: pointer;
}
[data-slider-prev]:active, [data-slider-next]:active {
  background-color: #fafafa;
}
[data-slider-prev][disabled], [data-slider-next][disabled] {
  opacity: 0;
  cursor: default;
}
[data-slider-prev] svg, [data-slider-next] svg {
  display: block;
  width: 16px;
  height: 16px;
  min-width: 18px;
  min-height: 18px;
  fill: #333;
  stroke: #333;
}

[data-slider-prev] {
  margin-left: -18px;
  margin-right: auto;
  left: 0;
}
@media (max-width: 800px) {
  [data-slider-prev] {
    left: 6px;
  }
}
[data-slider-prev] svg {
  margin-left: 0.2rem;
}

[data-slider-next] {
  margin-right: -18px;
  right: 0;
}
@media (max-width: 800px) {
  [data-slider-next] {
    right: 10px;
  }
}
[data-slider-next] svg {
  margin-left: 0.15rem;
}

/* 
    FCC MINIMESSAGE inside the main CTA button ( itinerary page )
*/
small.minimessage {
  width: 100%;
  display: block;
  padding: 1px;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-decoration: none;
}

a:hover .minimessage, button:hover .minimessage {
  text-decoration: none;
}

/* HP SUPPLIER - move it to a dedicated widget */
.supplier-logo-list__ul {
  width: 100%;
  background-color: #fff;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  padding: 1rem 0;
  margin: 1rem 0;
}
.supplier-logo-list__ul li {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin: 0 1rem 1rem 0;
}
.supplier-logo-list__ul li img {
  height: 30px;
  width: auto;
  background-color: white;
  padding: 0px;
}
.supplier-logo-list__ul li a {
  width: 100%;
  display: block;
  padding: 0px;
  margin: 0.5rem;
  position: relative;
}
.supplier-logo-list__ul li a:before {
  content: "";
  width: 2px;
  height: 30px;
  background-color: white;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: block;
  z-index: 1;
}
.supplier-logo-list__ul li a:after {
  content: "";
  width: 2px;
  height: 30px;
  background-color: white;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: block;
  z-index: 1;
}

@media (max-width: 1055px) {
  .supplier-logo-list__ul li {
    width: auto;
    padding: 0 1rem;
  }
  .supplier-logo-list__ul li img {
    width: auto;
    height: auto !important;
  }
  .supplier-logo-list__ul li a {
    display: block;
    width: 100%;
    color: black;
    text-decoration: underline;
  }
  .supplier-logo-list__ul li a > img {
    display: none;
  }
  .supplier-logo-list__ul li a:before {
    content: attr(suppliername);
  }
}
/* ------------------------------------------------------------------------
    test for responsive table site wide. 
    This class is used by the content team to create better tables.

    USAGE:
    --

        <table class="responsive-table responsive-table--800">
        [...]
        </table>
------------------------------------------------------------------------ */
.responsive-table {
  width: 100%;
  overflow-x: auto;
  min-width: 499px;
}
.responsive-table.responsive-table--500 {
  min-width: 500px;
}
.responsive-table.responsive-table--600 {
  min-width: 600px;
}
.responsive-table.responsive-table--800 {
  min-width: 800px;
}
.responsive-table.responsive-table--1000 {
  min-width: 1000px;
}

tr {
  padding: 1rem 0;
  border-bottom: 1px solid #ccc;
}

td, th {
  padding: 0.5rem;
  border-left: 1px solid #ccc;
  margin: 0.2rem;
  text-align: left;
  padding-right: 20px;
  color: #333;
}

th {
  border-left: 0px;
}
th strong {
  font-weight: 600;
  color: black;
}