/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : 22-Oct-2019, 08:54:59
    Author     : navdeep.playa
*/

.online-pay-container {
  margin: 40px auto;
  max-width: 120rem;
  padding: 15px;
}

/* confirmation page */

.pay-confirm-left {
  width: 50%;
  padding: 20px 0px;
  display: inline-block;
}

.pay-confirm-right {
  width: 50%;
  padding: 20px;
  display: inline-block;
}

.pay-booking-print .print {
  background-color: #b92d32 !important;
  color: #fff !important;
  float: left;
  margin: 20px;
}

.pay-booking-payment-breakdown {
  margin: 20px 0px;
}

.pay-booking-payment-breakdown-cont {
  padding: 20px 0px;
  background-color: #EDECE9;
  width: 72%;
  font-size: 17px;
}

.pay-booking-payment-breakdown-cont ul {
  list-style-type: none;
  margin: 0px;
}

.pay-booking-payment-breakdown-cont li {
  margin: 5px 0px;
}

.pay-booking-payment-breakdown-cont .breakdown_txt,
.pay-booking-payment-breakdown-cont .breakdown_pay {
  display: inline-block;
  width: 50%;
}

.pay-booking-payment-breakdown-cont .breakdown_pay {
  width: 30%;
}

/*.pay-booking-payment-breakdown-cont
*/
/* confirmation page */


/* React Components */

.paymentSubmitButton {
  color: #fff;
  border-radius: 0px;
  border: none;
  padding: 10px 15px;
  margin: 20px 0;
}

.paymentTitle {
  margin-top: 20px;
  color: grey;
}

.notLeadPassengerInputField {
  width: 26% !important;
}

.circle {
  height: 45px;
  width: 45px;
  border-radius: 50%;
  border: 2px solid;
  position: relative;
  border-color: navy;
  background-color: navy;
  z-index: 9;
}

.circle:before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  color: navy;
  border: 1px dotted;
  border-width: 0 0 0 1px;
  width: 1px;
  height: 100px;
  margin: 3px 0;
}

.notLeadPassengerComponent .text {
  color: #1c2021;
  text-align: left;
}

.paymentInputWrapper button {
  padding-left: 0;
  min-width: 80px;
  padding: 0;
  margin: 0;
  background-color: #b92d32;
  height: 42px;
  border: 1px solid #b92d32;
}

.bookingSummaryWrapper {
  background-image: url('../images/Moorings-summarybg.png');
  background-position: top;
  background-size: 150%;
  border-radius: 5px;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.5);
  margin: 0 auto 20px;
  max-width: 1260px;
  padding: 150px 0 0;
  position: relative;
}

.bookingSummaryWrapper .gradientOverlay {
  border-radius: 5px;
  background: linear-gradient(0deg, rgba(0, 24, 65, 1) 30%, rgba(0, 0, 0, 0) 80%);
  height: 100%;
  padding: 150px 12px 18px;
  position: relative;
  width: 100%;
}

.bookingSummaryWrapper .summaryWrapper {
  padding: 0 20px;
  color: #fff;
}

.bookingSummaryWrapper .titleWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  height: 50px;
  flex-direction: column;
  margin-bottom: 40px;
}

.bookingSummaryWrapper .titleWrapper .title {
  font-size: 23px;
  margin: 0;
}

.summaryDetails .text {
  font-style: italic;
}

.bookingSummaryWrapper .titleWrapper .summary-date {
  font-size: 16px;
}

.bookingSummaryWrapper .summaryDetails {
  font-size: 14px;
}

.bookingSummaryWrapper .paymentDetails {
  /* display: flex; */
  margin-top: 10px;
  padding: 0 5px;
  width: 100%;
  /* flex-wrap: wrap; */
  /* flex-direction: column; */
  border-color: #fff;
}

.bookingSummary .actionsContainer {
  max-width: 1260px;
  margin: 0 auto;
}

.block-marine-my-account .actionsContainer h3 {
  font-size: 16px;
}

.bookingSummary {
  font-family: "NewBaskervilleW01-Roman", serif;
  max-width: 1280px;
  margin: 0 auto;
}

.bookingSummary .summaryButton {
  color: #001841;
  background-color: #fff;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.5);
}

.bookingSummary .summaryButton:hover {
  background-color: #EAEAEA;
}

.bookingSummary .summaryButton.done {
  color: #9b9b9b;
  background-color: #EAEAEA;
}

.infoContainer {
  background-color: #F7F7F7;
  color: #000000;
  flex: 1;
  font-size: 14px;
  border-radius: 5px;
  margin: 0 auto;
  padding: 20px;
}

.errorFieldMessage {
  color: #b92d32 !important;
  font-size: 14px;
}

.submitErrorBlock {
  background-color: #b92d32;
  color: #fff;
  padding: 10px 20px;
}
.submitErrorBlock a{
  text-decoration: underline;
  color: #fff;
}
.submitErrorBlock a:hover{
  text-decoration: underline;
  color: #fff;
}
.submitErrorBlock ul {
  margin-bottom: 0;
}

.submitErrorBlock+.bookingDetails {
  margin-top: 20px;
}

#dIframe {
  width: 100%;
}

#dIframe iframe {
  height: 440px;
  border: 1px solid #edece9;
}

/* my account new design */
.block-marine-my-account {
  background: linear-gradient(180deg, #046CAC -38.83%, #00314E 81.54%);
  color: #fff;
  font-family: "NewBaskervilleW01-Roman", serif;
}

.block-marine-my-account h1,
.block-marine-my-account h2,
.block-marine-my-account h3 {
  color: #fff;
  font-size: 30px;
}

.bookingform label {
  color: #1c2021;
  margin-bottom: 0;
}

.bookingform label i {
  margin: 0 5px;
  color: #142346;
}

.bookingform input,
.bookingform input[type="text"],
.bookingform input[type="email"],
.bookingform input[type="tel"] {
  border-radius: 0 0 5px 5px;
  border: 0;
  color: #1c2021;
  font-weight: bold;
  margin-top: 0;
  padding: 0 12px 18px;
  width: 100%;
}

.bookingform input::placeholder {
  color: grey;
}

.bookingRefContainer__field,
.surnameContainer__field {
  border: none;
}

.submitContainer button[type="submit"] {
  color: #fff;
  font-weight: bold;
  margin-top: 20px;
  border-radius: 6px;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.5);
}

.bookingDetails .fa {
  margin-top: -10px;
  padding: 0px 5px;
  position: absolute;
}

.footer-collapse-trigger {
  color: #18799b;
  cursor: pointer;
  padding-bottom: 22px;
  text-align: center;
}

.footer-collapse-trigger .arrow {
  border: solid #18799b;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  margin-left: 5px;
}

.footer-collapse-trigger .arrow.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.my-account-logout-wrapper {
  font-family: "NewBaskervilleW01-Roman", serif;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 10px;
}

.my-account-logout-wrapper a {
  color: #fff;
  text-decoration: none;
}

.my-account-logout-wrapper a:hover {
  color: #fff;
  text-decoration: none;
}

/* MAIN CSS */

.balanceContainer {
  color: #000;
}

.paymentComponent .tableItem {
  font-weight: bold;
}

.my_account_footer .infoContainer h3 {
  color: #1c2021;
  font-weight: bold;
}

.my_account--right-container .infoContainer h3 {
  border-bottom: 1px solid #A99384;
  color: #001841;
  padding-bottom: 15px;
  font-weight: bold;
}

h2.my-account-container--header {
  font-size: 35px;
  margin: 0;
}

@media only screen and (min-width: 320px) and (max-width: 767px) {

  .notLeadPassengerComponent .text {
    text-align: center;
  }

  .notLeadPassengerInputField {
    width: auto !important;
  }

  .pay-confirm-left {
    width: 100%;
  }

  .pay-booking-payment-breakdown-cont {
    width: 100%;
  }

  .bookingSummaryWrapper {
    padding-top: 8px;
    background-size: cover;
  }

  .bookingSummaryWrapper .gradientOverlay {
    padding-top: 0px;
  }

  .my-account-logout-wrapper {
    padding: 0;
  }

  .bookingSummaryWrapper .titleWrapper {
    align-items: flex-start;
    margin-bottom: 30px;
    padding: 0 5px;
  }
}



@media only screen and (min-width: 768px) and (max-width: 991px) {
  .bookingSummaryWrapper .summaryDetails {
    font-size: 16px;
  }
}

@media only screen and (min-width: 992px) {
  .infoContainer {
    font-size: 16px;
  }

  .my_account--right-container .infoContainer {
    background-color: transparent;
    color: #001841;
    text-align: left;
  }

  .my_account--right-container .formContainerContent {
    background: left / contain no-repeat url('../images/Moorings-summaryinfo.png'), #fff;
    color: #1c2021;
  }

  .block-marine-my-account .actionsContainer h3 {
    font-size: 20px;
  }

  .bookingSummaryWrapper .summaryDetails {
    font-size: 16px;
  }
}

/* Booking Form */
.DayPicker {
  color: black;
}

.departureDateContainer .inputCalendar {
  color: #142346;
}

.submitErrorBlock {
  color: white;
}

.bookingRefContainer,
.surnameContainer,
.departureDateContainer {
  background-color: #fff;
  border-radius: 4px;
  color: #1c2021;
}

#bookingDetails-tooltip .tooltip-inner {
  color: #001841;
}

#bookingDetails-tooltip .tooltip-inner {
  background-color: #fff;
}

.tooltip.top div.tooltip-arrow {
  border-top-color: #fff;
}