@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:wght@300;400;600;800&family=Fira+Sans:wght@300;400&family=Playfair+Display+SC&family=Playfair+Display:ital,wght@0,400;0,500;1,400;1,500&display=swap');

/*    font-family: 'Fira Sans', sans-serif;
     font-family: 'Fira Sans Condensed', sans-serif;
     font-family: 'Playfair Display', serif;
     font-family: 'Playfair Display SC', serif;
*/

table.cfdebug { display: none; }

html {
     font-size: 16px;
}

.login_body.cp{ 
     background: url(../images/beach.jpg);
     background-position: center;
     background-repeat:none;
     background-size:cover;
}

.loginForm {
     background-color: #FFF;
}

#frmLogin {
    text-align: center;
}

.loginHeader {
    background-color: #090e2c;
    color: #FFF;
    padding: 10px;
    text-align: center;
    margin-bottom: 10px;
    
}

.cptitle {
    color: #BAE1ff;
}
   .navbar {
     background-color: #090e2c;
   }
   .search-form {
     width: 50%;
   }

   #sidebar {
     position: fixed;
     top: 0;
     bottom: 0;
     left: 0;
     z-index: 10;
     box-shadow: -1px 0 0 rgba(0, 0, 0, .1);
     max-width: 10vw;
     background-color: #e0f7ff;
     color: #000;
   }

   #sidebar i.fa.comingsoon {
     font-size: 1.7em;
     color: #666;
   }

   #sidebar i.fa {
     font-size: 1.7em;
     color: #0587a7;
   }

   #sidebar i.fa.hover {
     font-size: 2.7em;
     color: #FFF;
   }
   
   #sidebar .nav-item {
     text-align: center;
     padding: 3px 0;
   }
   
   #sidebar .nav-item a.comingsoon {
     color: #666;
     font-weight: 600;
   }

   #sidebar .nav-item a {
     color: #000;
     font-weight: 600;
   }
   
   #sidebar .nav-item a.active { 
     color: #000;
   }

   .vertical-nav {
     margin-top: 1vh;
   }

   .logo {
     max-height: 30px;
     margin: 25px 5px;
   }
   
   a.navbar-branding {
     display: block;
   }

   section {
     margin: 10px;
   }
   .main {
     padding-top: 2em;
    }

   .main .first-row, .main .second-row {
     padding-bottom: 3em;
   }
   
   .modal-title, .modal-header {
    background-color: #036;
    color: #FFF;
  }

  .taskalert {
      margin: 0 20px 0 20px;
      width: 150%;
  }
   .main .row .dashCard {
     height: 100%;
   }
   .card {
     border: 0;
     box-shadow: 2px 0 10px rgba(0, 0, 0, .1);
     max-height: 100%;
     margin-top:20px;
     background-color: #FFF;
   }
 
   .card-body {
     padding: 1.5em 1.5em 1.5em 1.5em;
     font-size: 1em;
     background-color: #FFF;
   }

   .card-img-top {
     height: 100%;
     width: 100%;
     border-radius: 100%;
   }

   .cof.card-img-top {
      border-radius: 0%;
   }

   .cofcard label.cp {
     /* font-size: .02em;*/
      margin-top: 10px;
   }

   .card-link > button {
      margin-bottom: 1em;
      width: 100%;
      margin-left: 0;
    }

   h1{
     font-family: 'Playfair';
   }

   .expired1 {
    color: #f11158;
   }

   .expired0 {
    color: #000;
   }

.pagetitle {
     margin-bottom: 1em;
}

.upcomingbooking {
     background-position: center center;
     background-repeat: no-repeat;
     background-size: cover;
}

span.lnkBookingDetail {
  text-decoration: underline;
  color: blue;
  margin-left: 5px;
}

#tripSupplier {
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 25px;
}

#tripConf {
  font-size: .85em;
  margin-top: 5px;
  margin-bottom: 25px;
}

#tripDate {
  font-weight: 600;
  font-size: 1.15em;
  /*margin-top: 10px;*/
}

#tripSummary {
     font-weight: 600;
     /*font-size: 1.5em;
     margin-top: 10px;*/
}

#tripShip {
     font-weight: 500;
    /* font-size: 1.25em;
     margin-bottom: 10px;*/
}

.tripDestImg {
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  border-radius:5px 0px 0px 5px;    
}

.dashAlert {
     text-align: center;
}

.dashAlert:hover {
  cursor: pointer;
}

a.show_hide {
     display:block;
}

#contentSection {
     margin-top: 2vh;
}

.bookingdetailheader {
     position: fixed;
}

.vacationheader {
     padding-top:20px;
}

.comingsoon {
     color: #666;
}

.faqcontent{
     overflow: auto;
     height: 100px;
}

.dashFooter {
     background-color: #FFF;
     border-top: none;
     text-align:right;
 }

.card-header, .card-header h2{
     font-family: 'Fira Sans', sans-serif;
     text-transform: uppercase;
     background-color: #e0f7ff;
     font-size: 1.15em;
     font-weight: 600;
     padding: 1.25rem 0 0.9375rem 0.9375rem !important;
     border-radius: 0;
     /*box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.1);*/

 } 

 .cardicon {
     font-size: 2em;
 }

.paxcard.card-header  {
     background-color: #090e2c;
     color: #FFF;
}

.badge.cp, .badge .cp {
     border-radius: 500px;
     --bs-badge-border-radius:500px;
     background-color: #333;
    font-size: 18px;
}
.paxbadge.cp, .paxbadge .cp {
     background-color: #FFF !important;
     color: #090e2c;
}

.paxname.cp, .paxname .cp {
  color: #FFF;
}

.pagebody {
     margin-top: 1em;
     margin-left: 1em;
     /*background-color: #000;*/
}

 i.fa {
     color: #0587a7; 
 }

 button > i.fa {
  color: #FFF; 
}

 .menulink {
     font-size: 1.25em;
 }

 .online {
     font-family: 'Playfair Display', serif;
     text-transform:capitalize;
     font-style: italic;
     font-size: 1.25em;
 }

 .customerportal {
     font-family: 'Fira Sans Condensed', sans-serif;
     font-size: 2.58em;
     font-weight: 600;
     color: #e0f7ff;
 }

 .btn.btn-primary.cp {
     border: none;
     background-color: #0587a7 /*#FF8604*/;
     color: white;
     padding: .35em 1.75em;
     font-size: .95em;
     cursor: pointer;
     border-radius: 50px;
   }

.btn.btn-primary.cp:hover {
     background-color: #F0F0F0;
     border: none;
     color: #090e2c;
     padding: .35em 1.75em;
     font-size: .95em;
     cursor: pointer;
     border-radius: 50px;
 }

 tr.totalrow-booking {
     background-color: #090E2C;
     color: #FFF;
     
     -size: 16px;
 }

 tr.totalrow-paid {
     background-color: #FFF;
     color: #000;
     /*font-size: 16px;*/
 }
 
 .card.totalrow-due, tr.totalrow-due, .cancelledBooking {
     background-color: #f11158; /*red*/
     color: #FFF;
    /* font-size: 16px;*/
 }

 .resourcesupplierlink {
     margin-left: 10px;
     padding-top: 10px;
 }

 .resourcesupplierlink a, a.lnkDetails  {
     text-decoration: none;
 }

 .list_container_2 {
  overflow:hidden;
  -webkit-column-count:2;
  -moz-column-count:2;
  -o-column-count:2;
  column-count:2;
}

.list_container_4 {
  overflow:hidden;
  -webkit-column-count:4;
  -moz-column-count:4;
  -o-column-count:4;
  column-count:4;
}

 a.lnkDetails {
     font-weight:400;
 }

 a.lnkisalert1, a.lnkisalert1:hover {
  color: #000;
}

a.lnkisalert0 {
  color: #000;

}
 .resourceSupplier {
     font-size: 2em;
     font-family: 'Playfair';
 }

 .taskalert {
     margin: 0 20px 0 0;
     display: inline;
     
 }

 .alert {
     padding:9px;
 }

 .btnAction {
     font-size: .5em;
      
 }

 #msgError {
     background-color: #F11158;
     color: #fff;
     padding: 10px;
     font-weight: 600;
     /*font-size: 1.1em;*/
     margin-bottom: 10px;
     display: none;
 }

 .error {
     color: #F11158;
     font-weight: 600;
 }

 .fielderror {
     background: #F11158;
     color: #FFF;
     font-weight: 600;
 }

 .askquestion {
     font-size: 1.2em;
     margin-right:15px;
 }

 .bookingcard {
    background-color: #FFF;
    padding: 0px;
    border-radius: 5px;
    box-shadow: 2px 0 10px rgba(0, 0, 0, .1);
    height: 100%;
 }

.bookingcard:hover {
  background-color: aliceblue;
}

 .tripData {
  margin-bottom:3px;
 }

 td.paycallout, table.dataTable thead th.paycallout {
    background-color: #EEE;
    text-align: center;
    font-weight: 600;
 }

 .card .fieldgroup label.cp {
  width: 120px;
}

.card .fieldgroup span {
  font-weight: 600;
}

 .fieldgroup > label.tripdetails, label.cp {
    display: block;
    color: #999;
    width: 100%;
    font-size: .85em;
    font-weight: 400;
 }

 .fieldgroup > span.tripdetails {
    margin-bottom: 10px;
    font-size: 1em;
 }

 .fieldgroup {
  margin-bottom: 7px;
 }

 .achForm {
  background-color: #15262f;
  color: #FFF;
  padding: 20px;
  margin-bottom: 20px;
 }

 .achForm input, .achForm select {
  margin-bottom: 10px;
 }

 .achPrice {
  font-size: 1.5em;
  color: #f11158;
  font-weight: bold;
  text-align: center;
 }

/*
 td.paycallout.isPastDue, .table-striped>tbody>tr:nth-of-type(odd)> {
    color: red; 
 }*/
 
 #tainfo{
  font-size: 1.4em;
 }

 #tainfo:hover {
  cursor: pointer;
 }

 #noinfo{
  font-size: 1.4em;
 }

 #noinfo:hover {
  color: #1A9A06;
  cursor: pointer;
 }

 .show_hide {
    text-transform: none;
    text-decoration: none;
 }

 label.cp {
    font-weight: 600;
    font-size: .85em;
 }

 .cruisedetails1 {
    padding-left: 50px;
 }

#btnLoadMore {
  margin-top:30px;
  margin-bottom: 10px;
  
}

.faqanswer {
  background-color: rgb(0,0,0,.1);
  color: black;
  font-weight: 500;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 20px;
}

.paxinfo {
  color: #FFF;
  font-size: 1.3em;
}

.btnQlink {
  width: 100%;
}

.btnMarkComplete, .btnAction {
  font-size: 1.75em;
}

.btnMarkComplete:hover, .btnAction:hover {
  font-size: 1.75em;
  color: green;
  cursor:pointer;
  font-weight: 600;
}

table.dataTable>tbody>tr.alert-danger {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}

#divToggle{
  display: none;
}

.offcanvas {
  background-color: #E0F7FF;
  color: #000;
}

.navbar-dark .navbar-nav .nav-link, 
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active  {
  color: #000;
}

.offcanvas {
  display:none;
}

#btnQuestion {
  border-radius: 50px;
  background: #F6f6f6;
}

#btnQuestion i.fa {
  color: #0587a7;
}

/*Calendar*/

.calmonthyear{
  text-align: center;
  font-size: 3em;
}

.calday {
  text-align: center;
}

th.navMonth.previous {
  text-align: left;
}

th.navMonth.next {
  text-align: right;
}

#tblCalendar td {
  height: 150px;
  border: 1px solid #D3D3D3;
  vertical-align: top;
}

.blankdate {
  background-color: #D3D3D3;
}

.datedisplay {
  font-weight: 600;
  float: right;
  text-align: center;
  color: #000;
  padding: 6px;
}

.today {
  background-color: gray;
}

div.datedisplay.previousmonth, div.datedisplay.nextmonth {
  background-color: #D3D3D3;
  color: gray;
}

div.eventdisplay {
  float: none;
  display: block;
  margin: 20px;
}

.navbar.bookingdetailnavbar {
  z-index:999;
  width: 90%;
  padding-top: 10px;
  margin-left: -20px;
  margin-top: -25px;
  background-color: #F6f6f6;
  color: #000;
}

li.nav-item, #paxmetamenu{
  font-size: 1.3em;
  padding: 10px 5px 10px 5px;
}


.form-container {
  margin-top: 25px;
  margin-bottom: 25px;
  color: #FFF;
  padding: 10px 20px 15px;
  width: 100%;
}

.form-container table {
  margin: 0 auto;
  padding: 10px;
  color: #FFF;
}

.form-container td {
  text-align:left;
  padding: 3px;
  color: #FFF;
}
.form-container th {
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  color: #FFF;
}

.form-container tr {
  line-height: 200%;
  padding: 10px 20px 15px;
  color: #FFF;
}

.form-container td:first-child {

  font-weight: 600;
  text-align: right;
  color: #FFF;
}

.imgPmtMethod {
  width:  20%;
  height: 20%;
}

/* Small devices (portrait phones, 576px and up)*/
@media (max-width: 576px) {

  .pagebody {
    margin-top: 0;
    margin-left: 0;
}

  #paxmeta, .paxmeta, .logoimg {
    display: none;
  }

  .logoimgshort {
    display: inline-block;
    width: 80%;
  }

  .begindetail {
    margin-top: 100px;
  }
    
 .paxdob {
    display: none;
  }
    
.paxdobmobile {
    display: block;
  }

  .pagetitle h1 {
    margin-top:.5em;
  }

  .btn, #tripBtn {
    width: 100%;
  }

  span#cruiseline {
    font-size: 1.1em;
  }

  .card {
    margin-top: 45px;
  }

  .offcanvas {
    display:block;
  }

  .navbar-branding {
    text-align: center;
  }

  .navbar-branding {
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
    margin-right: 0;
    font-size: 1.25rem;
    text-decoration: none;
    white-space: nowrap;
    width:100%;
}

  .logoimg {
    width: 55%;
  }

  .customerportal {
    font-size: .9em;
  }

  #btnQuestion, .paxinfo {
    font-size: 10px;
    margin-right: 10px;
    margin-left: 10px;
  }

  #headerrow {
    display: block;
  }

  #sidebar {
    display: none; 
  }

  #divToggle{
    display: block;
  }

  .tripDestImg {
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    border-radius:5px 5px 0px 0px;   
    height: 250px; 
  }

  .card-header {
    font-size: .95em;
  }

  .resourceSupplier {
    font-size: 1.25em;
  }

  .navbar.bookingdetailnavbar {
    z-index:999;
    width: 100%;
    padding-top: 10px;
    padding-right: 20px;
    margin-top: -20px;
    margin-bottom: 55px;
    background-color: #F6f6f6;
    color: #000;
  }

  .container-fluid {
    padding-right: 10px;
    padding-left: 10px;
  }

  .calendarCard, .calendarSkipTo {
    display: none;
  }

  .cruisedetails1 {
    padding-left: 0px;
  }

  .imgPmtMethod {
    width:  10%;
    height: 10%;
  }

  .btnPmtMeth{
    display:  block;
  }



  /* Force table to not be like tables anymore */
	/* #tblCancelled table, 
	#tblCancelled thead, 
	#tblCancelled tbody, 
	#tblCancelled th, 
	#tblCancelled td, 
	#tblCancelled tr { 
		display: block; 
	} */
 
	/* Hide table headers (but not display: none;, for accessibility) */
/* 	#tblCancelled thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
  */
/* 	#tblCancelled tr { border: 1px solid #ccc; } */
 
/* Behave  like a "row" */
	/* #tblCancelled td { 
		
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
		white-space: normal;
		text-align:left;
	}
  */

  /* Now like a table header */
  	/* Top/left values mimic padding */
	/*#tblCancelled td:before { 
		
		position: absolute;
	
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
		text-align:left;
		font-weight: bold;
	}*/
 
	/*
	Label the data
	*/
/* 	#tblCancelled td:before { content: attr(data-title); }
  */ 
}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) { 

  
  #paxmeta,.paxmeta, .logoimg {
    display: none;
  }

  .logoimgshort {
    display: inline-block;
    width: 80%;
  }

 .paxdob {
    display: none;
  }
    
.paxdobmobile {
    display: block;
  }

  .card {
    margin-top: 0px;
  }

  #headerrow {
    display: block;
  }

  .offcanvas {
    display:block;
  }

  .navbar-branding {
    text-align: center;
  }

  #sidebar {
    display: none;
  }

  #divToggle{
    display: block;
  }

  .resourceSupplier {
    font-size: 1.5em;
  }

  .calendarCard, .calendarSkipTo {
    display: none;
  }

  .imgPmtMethod {
    width:  20%;
    height: 20%;
  }

    .begindetail {
    margin-top: 180px;
  }

  #imgSpacer {
    height: 200px;
  }
  
}

/*  Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) { 

  .btnToggle {
    display: none;
  }
  
  .vertical-nav{
    margin-top: 1.5vh;
  }
  #sidebar i.fa {
    font-size: 1.4em;
  }

#sidebar .nav-item a {
    font-size: .8em;
  }
    
  #paxmeta, .paxmeta, .logoimg {
    display: block;
  }

  .logoimgshort {
    display: none;
  }

 .paxdob {
    display: none;
  }
    
.paxdobmobile {
    display: block;
  }


  .logoimg {
    width: 65%;
  }

  #sidebar {
    display: block;
    max-width: 14vw;
  }

  #divToggle{
    display: none;
  }

  .pagetitle h1 {
    margin-top:50px;
  }

  .navbar.bookingdetailnavbar {
    z-index:999;
    width: 90%;
    padding-top: 10px;
    margin-left: -20px;
    margin-top:0px;
    background-color: #F6f6f6;
    color: #000;
  }

  span#cruiseline {
    font-size: 1.5em;
  }

  #skipto {
    margin-right: 2em;
  }

  #imgSpacer {
    height: 200px;
  }

  #destImage.tripDestImg {
    border-radius:5px 5px 5px 5px;    
  }

  .cruisedetails1 {
    margin-top:20px;
  }

  td, th {
    font-size: .9em;
  }

  #divToggle,#offcanvasNavbar,.navbar-toggler{
    display: none;
  }

  .calendarCard, .calendarSkipTo {
    display: none;
  }

  .begindetail {
    position: relative;
    margin-top: 175px;
  }

  .imgPmtMethod {
    width:  75%;
    height: 75%;
  }

 }

/*  Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {  
  #paxmeta, .paxmeta, .logoimg {
    display: block;
  }

  .logoimgshort {
    display: none;
  }

 .paxdob {
    display: block;
  }
    
.paxdobmobile {
    display: none;
  }

  #divToggle,#offcanvasNavbar{
    display: none;
  }

  .calendarCard, .calendarSkipTo {
    display: block;
  }

  .imgPmtMethod {
    width:  20%;
    height: 20%;
  }
  
}

/*  X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {  
  #divToggle,#offcanvasNavbar{
    display: none;
  }
 .paxdob {
    display: block;
  }
    
.paxdobmobile {
    display: none;
  }

  .calendarCard, .calendarSkipTo {
    display: block;
  }

  .imgPmtMethod {
    width:  20%;
    height: 20%;
  }
  
}

/*  XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) { 
  #divToggle,#offcanvasNavbar{
    display: none;
  }
.paxdob {
    display: block;
  }
    
.paxdobmobile {
    display: none;
  }

  .imgPmtMethod {
    width:  20%;
    height: 20%;
  }
  
 }

 .fancybox__container .dialog_content textarea, .fancybox__container #beddingPref, .fancybox__container .dialog_content input:not([type="radio"]):not([type="checkbox"]) {
    width: 100%
 }
 .fancybox__container #beddingPref {
  height: 30px;
 }
 .fancybox__container span {
  font-size: 12px;
  font-weight: 600;
 }
 .fancybox__container .dialog_content p {
    text-align: center;    
 }
  .fancybox__container .requestButton, .requestButton {
    border: none;
    background-color: #0587a7 /*#FF8604*/;
    color: white;
    padding: 0.35em 0.75em;
    font-size: .95em;
    cursor: pointer;
    border-radius: 50px;
  }
 
  .fancybox__container .disabledButton {
    background-color: #8fb4bd;
  }
 
  .fancybox__container p {
    margin-top: 20px;
  }
 
  .fancybox__container .passportcalendar {
    border-width: 1px;
    border-style: inset;
    border-color: rgb(133, 133, 133);
  }
  .fancybox__container .fancybox__content {
    padding: 1rem;
  }
  .label-char-count {
    position: absolute;
    top: -10px;
    right: -15px;
    display: inline-block;
    background-color: #34BC9D;
    padding: 1px 3px 0px 3px;
    border-radius: 3px;
    color: #fff;
    font-size: 12px;
    z-index: 9999;
  }

  .fancybox__container .row div div{
    margin-bottom: 15px;
  }
  .fancybox__container .row .formTitle {
    text-align: center;    
    margin-bottom: 15px;
  }