#lean_overlay {
  position: fixed;
  z-index:1000;
  top: 0px;
  left: 0px;
  height:100%;
  width:100%;
  background: #000;
  display: none;
}

.leanModal {
  background-color:#ffffff;
  width: 750px;
  height:496px;
}

.leanModal .modalHeader {
  background-color:#FFDC00;
  float:left;
  width:97.4%;
  padding:10px;
}

.leanModal .modalHeader h1 {
  color:#00499C;
  float:left;
  width:80%;
  cursor:default;
}

.leanModal .modalHeader a {
  text-decoration:none;
  color: #FFDC00;
  background-color: #00499C;
  float: right;
  font-size: 25px;
  font-weight: bold;
  margin-top: 5px;
  margin-right: 5px;
  padding: 10px;
  padding-top: 6px;
}

.leanModal .modalHeader a:hover {
  color: #00499C;
  background-color: #ffffff;
}

.leanModal .modalInner {
  float:left;
  width: 100%;
  overflow-y:scroll;
  height: 80%;
  -webkit-overflow-scrolling: touch;  
}

.leanModal .modalContainer {
  float:left;
  width:51%;
  padding:30px;
}

.leanModal .modalContainer h2 {
  margin:0px;
  font-size:18px;
  padding: 0px 0px 10px 0px;
}

.leanModal .modalInner .cmEventRow .cmerLeft table.table {
  font-size:12px;
}

.leanModal .modalContainer table.table {
  font-size:14px;
}

.leanModal .modalContainer table.table tr th {
  text-align:left;
  padding:5px;
}

.leanModal .modalContainer table.table tr td {
  padding:5px;
}

.leanModal .modalContainer table.table tr.on{
  background-color:#F5F5F5;
}

.leanModal .modalContainer table.table tr.off {
  background-color:#F2F2F2;
}

.leanModal .modalInner .cmEventRow .cmerLeft table.table {
  margin-top:10px;
}

.leanModal .modalInner .cmEventRow .cmerLeft table.table tr.on, .leanModal .modalInner .cmEventRow .cmerLeft table.table tr.off {
  background-color:#ffffff;
  text-align:left;
}

.leanModal .modalContainer .optionsContainer {
  float:left;
  width:100%;
}

.leanModal .modalContainer .bookingInformation, .leanModal .cmerMiddle .bookingInformation {
  float:left;
  width:100%;
  background-color:#FFDC00;
  margin-top:15px;
}

.leanModal .modalContainer .bookingInformation p {
  float:left;
  width:94.5%;
  padding:10px;
  margin:0px;
  font-weight:bold;
  text-align:center;
}

.leanModal .cmerMiddle .bookingInformation {
  margin-top:10px !important;
  margin-bottom:10px;
}

.leanModal .cmerMiddle .bookingInformation p {
  float:left;
  width:90%;
  padding:10px;
  margin:0px;
  font-weight:bold;
  text-align:center;
}

.leanModal .cmerMiddle p.notice {
  margin:0px;
  float:left;
  width:100%;
}

.leanModal .cmerMiddle ul, .leanModal .cmerRight ul  {
  float:left;
  margin:0px;
  padding:0px;
  padding-left:13px;
  width:100%;
}

.leanModal .cmerMiddle ul li, .leanModal .cmerRight ul li {
  float:left;
  width:100%;
}

.leanModal .cmerRight ul.cmerYourBooking {
  margin-top: 10px;
  margin-bottom:10px;
  padding-bottom:10px;
}

.cmEventRow .cmerFooter p {
  font-size:14px;
  font-weight:bold;
  text-align:right;
  float:right;
  width:40%;
  margin:0px;
}

.cmEventRow .cmerFooter a {
  float:left;
  width:40%;
}

.leanModal .modalPricing {
  float:right;
  width:30%;
  background-color: #00499C;
  color:#ffffff;
  margin:33px 33px 33px 0px;
  padding:20px;
}

.leanModal .modalPricing h3 {
  margin:0px;
  font-size:16px;
  float:left;
  width:100%;
}

.leanModal .modalPricing p {
  float:left;
  width:100%;
  margin:0px;
  font-size:14px;
}

.leanModal .modalPricing p.breakdown {
  text-align:right;
  font-weight:bold;
}

.leanModal .modalPricing p.breakdown .costBreakdown {
  font-weight:normal;
}

.leanModal .modalPricing p.buffer {
  border-bottom:1px solid #ffffff;
  margin-bottom:10px;
}

.leanModal .modalPricing p.totalCost {
  font-size:18px;
  font-weight:bold;
  text-align:right;
}

.leanModal .modalPricing p.bookingFee {
  font-size:12px;
  text-align:right;
}

.leanModal .modalPricing table.table {
  margin-bottom:20px;
  float:left;
  width:100%;
}

.leanModal .modalPricing table.table tr th {
  text-align:left;
}

.leanModal .modalPricing table.table tr td select {
  float:left;
  width:100%;
}

.leanModal .modalPricing a.buttonLg {
  width: 93% !important;
  padding: 10px !important;
}

.leanModal .modalPricing a.cancel {
  float:left;
  width: 102%;
  padding: 0px;;
  background-color:#ff0000;
  color:#ffffff;
  text-align:center;
  font-weight:bold;
  cursor:pointer;
}

.leanModal .loadingScreen {
  float:left;
  width:100%;
  height:601px;
  background-color: #00499C;
}

.leanModal .loadingScreen h1 {
  color:#ffffff;
  margin:160px 0px 0px 0px;
  text-align:center;
  float:left;
  width:100%;
}

.leanModal .loadingScreen h2 {
  color:#ffffff;
  margin:10px 0px 0px 0px;
  text-align:center;
  float:left;
  width:100%;
}

.leanModal .loadingScreen #modalLoadingDiv, .leanModal .loadingScreen #modalLoadingDiv2 {
  float:left;
  width:750px;
  height:160px;
  margin-top:80px;
}

.leanModal .loadingScreen #modalLoadingDiv img {
  /* Hide for time being */
  display:none;
  position:absolute;
  top: 179px;
  left: 326px;
}

#checkoutModal .modalInner {
  height:390px;
}

#checkoutModal .modalFooter {
  float:left;
  width:100%;
  height:53px;
  background-color:#00499C;
}

#checkoutModal .modalFooter a.cmerCTC {
  float:right;
  padding:7px;
  margin:10px;
  background-color:#FFDC00;
  font-weight:bold;
  color:#00499C;
  cursor:pointer;
}

#checkoutModal .modalFooter a.modal_close {
  float:right;
  padding:7px;
  margin:10px;
  background-color:#ffffff;
  color:#00499C;
  font-weight:bold;
}

#checkoutModal .modalFooter p.basketTotalLabel {
  float:right;
  padding-left:1px;
  color:#ffffff;
  font-weight:bold;
  font-size:18px;
  font-weight:bold;
  margin:16px;
  margin-left:6px;
}

.checkoutBasketInner, .checkoutStage2Inner {
  height:443px;
}

@media(max-width:1289px) {
  #bookModal {
    height:500px;
  }

  .modalInner {
    height:373px;
  }
}

@media(max-height:635px) {
  #bookModal {
    height:500px !important;
  }

  .modalInner {
    height:365px !important;
  }

  .leanModal {
    height:488px !important;
  }
}

@media(max-height:500px) {
  .modalInner {
    height:265px !important;
  }
}

@media(max-height:400px) {
  .modalInner {
    height:165px !important;
  }
}

@media(max-height:300px) {
  .modalInner {
    height:65px !important;
  }
}

@media(max-width:800px) {
  .leanModal {
    width:600px;
  }

  .modalContainer {
    padding-top: 0px !important;
    width: 80% !important;
    float: right !important;
    margin:33px !important;
  }

  .modalPricing {
    padding-top: 0px !important;
    width: 80% !important;
    float: left !important;
    margin:33px !important;
  } 
}