body {
  background-color: rgb(255, 255, 255);
  font: 100 1.125em/1.38 Roboto;
  color: #f4f4f5;
}


.details-wrap.clearfix {
  margin: 20px 0 68px;
  position: relative;
  text-align: left;
  width: 100%;
}

.details-wrap > div {
  margin-bottom: 0 !important;
}
.details-wrap .header a {
outline:none;  border-top: 1px #d0d0d0 solid;
  font-size: 18px;
  font-family: roboto-light;
  letter-spacing: 0;
  display: inline-block;
  padding-top: 10px;
  padding-right: 15px;
  margin-right: 20px;
  padding-left: 2px;
  color: #928e8e;
  width: 155px;
}
.main-container.clearfix.ste2FormArea.editMode,.main-container.clearfix.ste2FormArea.viewMode{
  margin-top: 0px;
}
.details-wrap .header a > span {
  font-family: roboto-Medium;
  color: #ff498c;
  letter-spacing: -.5px;
}
.shortTransections {
}
.shortTransections .headerBar {
  margin-top: 12px;
  background: #c0c0c0;
  margin-bottom: 9px;
  position: absolute;
  width: 100%;
  top: 26px;
}
.shortTransections {
  padding-top: 51px;
}

.main-container.ste2FormArea {
  background: #fff;
  border: none;
  display: inline-block;
  width: 90%;
  margin: 0 auto;
  float: none;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  padding: 0 20px;
  margin: 0 !important;
  /* box-shadow: 0 -5px 38px -17px #00000061; */
}


.shortTransections .headerBar > span {
  color: #636363;
  display: inline-block;
  font-size: 11px;
  width: 16%;
  text-align: center;
  font-family: roboto-Regular;
  padding: 14px 0 12px;
}

.contentBar {
  margin-bottom: 3px;
  text-align: center;
}
.contentBar > span {
  display: inline-block;
  width: 16%;
  margin: 0 2px 0;
  vertical-align: middle;
}

.contentBar > span > input.shortAmt {
  background: #acffac;
}
.contentBar.refunded .shortAmt {
  background: #ffce96;
}
.contentBar.refunded .typeofTrans {
  background: #f25c71;
  color: #fff;
}

.contentBar span:nth-child(5) input {
  background: #fff;
  border: 2px #e6d8fe solid;
  border-radius: 6px;
  text-align: center;
  background: white;
}

.contentBar > span > input, .contentBar > span > select {
  display: block;
  box-sizing: border-box;
  width: 100%;
  color: #625e5e;
  font-family: roboto-regular;
  font-size: 13px;
  background: #e9e9e9;
  padding: 12px 10px 10px;
  letter-spacing: .3px;
  text-align: left;
}
.contentBar > span > a.delRecord {
  position: absolute;
  right: -10px;
  font-size: 0;
  margin-top: -33px;
}
.contentBar > span > a.delRecord::before {
  height: 25px;
  width: 25px;
  position: absolute;
  display: block;
  background: #bfbfbf;
  content: "\f37f";
  border-radius: 100px;
  font-size: 12px;
  font-family: ionicons;
  text-align: center;
  line-height: 27px;
  font-size: 16px;
  color: #6b6b6b;
}

.contentBar > span > a.delRecord:before:hover{ opacity: .8;}

.moreRow > a:hover{ opacity: .8;}
.moreRow > a {
  box-shadow: 0 6px 14px -9px #000;
  display: inline-block;
  background: #444259;
  font-size: 12px;
  padding: 10px 14px 11px;
  color: #f2f2f2;
  letter-spacing: 1px;
  font-family: roboto-regular;
  border-radius: 4px;
  margin: 10px 6px 0;
  position: absolute;
  bottom: -45px;
}

.notesWrap {
  margin-top: -55px;
  display: none;
}

.notesWrap h3 {
  font-size: 16px;
  color: #f05d91;
  font-family: roboto-Medium;
  padding: 10px 5px 5px;
}

.notesWrap #notesForHotel {
  border: 1px #dad6d6 solid;
  width: 500px;
  padding: 10px;
  color: #8a8787;
  font-size: 13px;
  margin: 0;
  box-sizing: border-box;
  display: block;
  height: 150px;
  border-radius: 10px;
}

.notesWrap > a {
  background: #ff4b78;
  display: inline-block;
  font-size: 12px;
  border-radius: 100px;
  padding: 7px 17px 7px;
  color: #961434;
  margin-top: 12px;
  margin-bottom: 10px;
  font-family: roboto-light;
  letter-spacing: 1px;
  text-transform: uppercase;
}


.action-outer {
  float: left;
  width: 78%;
  height: 20px;
  margin-left: 0.81019%;
  padding-left: 5px;
}

.amount,
.note,
.type {
  display: block;
  float: left;
  width: 100%;
  height: 20px;
  padding: 0 10px;
  background-color: #ffffff;
  font-size: 0.722em;
  font-weight: 400;
  color: #686868;
}

.amount-outer,
.type-outer {
  float: left;
  width: 15%;
  height: 30px;
  padding: 5px;
}

.btn-wrap {
  float: left;
  width: 20px;
  height: 20px;
  padding-top: 5px;
}

.checkbox {
  display: block;
  float: left;
  margin-left: -18.01418%;
}

.deposit {
  display: block;
  width: 20.81%;
  height: 20px;
  margin: 0 auto;
  padding-top: 5px;
}

.deposit-head {
  float: left;
  width: 10%;
  height: 30px;
}

.deposit-outer {
  float: left;
  width: 10%;
  height: 30px;
  padding: 5px;
}

.deposit-p {
  float: left;
  width: 30%;
  font-weight: 100;
  font-size: 15px;
  text-align: right;
  height: 35px;
  line-height: 35px;
  font-family: roboto-medium;
  color: #5d5d5d;
}

.details-wrap {
  float: left;
  width: 65%;
  height: auto;
  margin-top: 10px;
}

.details-wrap .first {
  position: relative;
  clear: both;
  z-index: 159;
  height: 30px;
  padding-top: 5px;
  padding-bottom: 25px;
}

.details-wrap .fourth {
  height: 35px;
  padding-top: 10px;
  padding-bottom: 25px;
}

.details-wrap .second {
  height: 30px;
  padding-top: 10px;
  padding-bottom: 25px;
}

.details-wrap .third {
  height: 35px;
  margin-top: 5px;
  padding-top: 10px;
  padding-bottom: 25px;
}



#recordReservation {
  box-shadow: 0 6px 14px -9px #000;
  display: inline-block;
  line-height: 51px;
  background: #2e3237;
  float: none;
  font-family: roboto-regular;
  width: 177px;
  height: 50px;
  text-align: center;
  padding: 0;
  font-size: 14px;
  border-radius: 5px;
  color: #fff;
  letter-spacing: .8px;
  font-weight: normal;
}
#recordReservation:hover{
  background: #1a9134;
}
.update-btn-outer > a#proceedReservation {
}

.dollar {
  display: block;
  float: left;
  width: 18px;
  height: auto;
  overflow: hidden;
}

.dollar-img {
  float: left;
  width: 12px;
  position: absolute;
  height: 25px;
  padding: 3px;
  margin: 10px 0 0 10px;
  background: transparent;
}

.fifth {
  float: left;
  clear: both;
  width: 100%;
  height: 35px;
  padding-top: 10px;
  padding-bottom: 25px;
}

.first {
  float: none;
  width: 100%;
  font-family: roboto-light;
  font-weight: 100;
  font-size: 14px;
  margin: 10px 0 11px;
  letter-spacing: .8px;
  color: #403e3e;
}

.first .title {
  width: 80%;
}

.fourth,
.second {
  float: left;
  clear: both;
  width: 100%;
  font-family: roboto-medium;
  font-weight: 100;
  font-size: 16px;
  letter-spacing: .3px;
  color: #222a5a;
}

.g-total {
  float: left;
  width: 40%;
  min-height: 25px;
  font-size: 1.333em;
  line-height: 1.18;
  text-align: right;
  color: #5d5d5d;
}

.heading-outer .heading {
  font-family: Roboto-Light !important;
  color: #625a5a;
  font-size: 20px;
}

.heading-outer {
  font-size: 22px;
  font-family: roboto-thin;
  margin: 0 0 0px;
  font-weight: normal;
}
.history-head {
  position: relative;
  float: left;
  z-index: 171;
  width: 100%;
  height: 30px;
  background-color: #ededed;
}

.img-outer {
  width: 24px;
  position: absolute;
  right: 13px;
  top: 18px;
}

.info- {
  display: block;
  float: left;
  width: 22px;
  height: auto;
  overflow: hidden;
}

.input-wrap {
  float: left;
  width: 30%;
  height: 25px;
}

.input-wrap .price {
  width: 75%;
}

.main-container {
  float: left;
  width: 100%;
  padding: 30px;
  background-color: #f4f4f5;
}

.note-head {
  float: left;
  width: 30%;
  height: 30px;
}

.note-outer {
  float: left;
  width: 30%;
  height: 30px;
  padding: 5px;
}

.note-t,
.type-t {
  float: left;
  width: 100%;
  min-height: 30px;
  padding-left: 10px;
  font-size: 0.889em;
  font-weight: 300;
  line-height: 1.58;
  color: #333333;
}

.payment {
  display: block;
  float: left;
  width: 100%;
  height: 15px;
  background-color: #69b9e7;
}

.percent {
  display: block;
  float: left;
  width: 16px;
  height: auto;
  overflow: hidden;
}

.percent-img {
  float: left;
  width: 25%;
  height: 25px;
  padding: 4px;
  background-color: rgb(222, 222, 222);
}

.pop-btn {
  display: block;
  float: left;
  width: 100%;
  min-height: 20px;
  border-radius: 53px;
  background-color: #fc4785;
  font-size: 0.889em;
  font-weight: 500;
  line-height: 1.08;
  text-align: center;
  color: #ffffff;
}

.amount-head,
.popup-head,
.popup-outer,
.type-head {
  float: left;
  width: 15%;
  height: 30px;
}

.price {
  display: block;
  float: left;
  height: 40px;
  padding: 0 13px;
  background-color: rgb(242, 242, 242);
  font-size: 13px;
  font-weight: 400;
  color: rgb(115, 115, 115);
  border: 1px #949494 solid;
  font-family: roboto-light;
  letter-spacing: .4px;
  border-radius: 5px;
  text-align: center;
}

.refund {
  display: block;
  float: left;
  clear: both;
  width: 100%;
  height: 15px;
  background-color: #fc4785;
}

.payment-t,
.refund-t {
  float: left;
  width: 100%;
  min-height: 12px;
  font-size: 0.722em;
  font-weight: 400;
  line-height: 0.98;
  text-align: center;
  color: #ffffff;
}

.rm-type {
}

.room-1, .room-2 {
  float: left;
  clear: both;
  width: 100%;
  padding-top: 0px;
  padding-bottom: 10px;
  border-bottom: 1px solid #acacc5;
}

.viewMode .extra-rooms-01 .services2 {
  margin-bottom: 27px;
  line-height: 44px;
}

.room-1 .fourth,
.room-2 .fourth {
  padding-bottom: 10px;
}

.room-1 .third,
.room-2 .third {
  padding-bottom: 6px;
  padding: 0 0 10px;
}

.room-1 .total, .room-2 .total {
  width: 20%;
  text-align: right;
  font-family: roboto-medium;
  color: #fe5b83;
}

.summary {
  float: left;
  clear: both;
  width: 100%;
  margin-top: 3px;
  padding-top: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #b5b5cc;
}

.summary .summary-outer {
  padding-top: 3px;
  padding-bottom: 3px;
}

.fourth .title, .summary .title, .third .title, .title-11, .title-12, .title-13 {
  width: 70%;
  font-family: roboto-light;
  font-weight: 100;
  font-size: 13px;
  letter-spacing: .5px;
  height: 39px;
  line-height: 36px;
  color: #5d5d62;
}

.summary-outer {
  float: left;
  width: 100%;
}

.summary-outer .price, .third .price {
  width: 30%;
  background: #fafafa;
  color: #0a0a0a;
  border-color: #eaeaea;
}
button#updateFormTrigger:hover { opacity: .8; }
button#updateFormTrigger {
  width: auto;
  padding: 22px 59px;
  height: auto;
  border-radius: 100px;
  background: #ff2553;
}


.summary-wrap {
  color: #fff;
  float: left;
  width: 100%;
  padding: 10px 15px 0 15px;
  background-color: #fafafc;
  text-align: left;
  position: relative;
  z-index: 100;
}

.section2.reservationInvoiceArea > .summary-wrap {
  padding-bottom: 80px;
  background-color: #fafafc;
}

.frontendReservation .section2.reservationInvoiceArea > .summary-wrap {
  padding: ;
  padding-bottom: 0px;
}
.third {
  float: left;
  clear: both;
  width: 100%;
}

.title {
  float: left;
}

.total {
  float: left;
}

.total-head {
  float: left;
  width: 15%;
  height: 28px;
}

.total-outer {
  float: left;
  width: 15%;
  height: 28px;
  padding: 5px;
}

.total-outer .total {
  display: block;
  width: 100%;
  height: 20px;
  padding: 0 10px;
  background-color: #ffffff;
  font-size: 0.722em;
  font-weight: 400;
  color: rgb(0, 0, 0);
}

.total-summary {
  float: none;
  clear: both;
  width: 100%;
  padding-top: 16px;
  padding-bottom:5px;
}

.amount-t,
.deposit-t,
.total-t {
  float: left;
  width: 100%;
  min-height: 30px;
  font-size: 0.889em;
  font-weight: 300;
  line-height: 1.58;
  text-align: center;
  color: #333333;
}

._button {
  display: block;
  width: 156px;
  margin: 0 auto;
  padding: 3px 30px;
  border-radius: 20px;
  background-color: #ed4a84;
  font-size: 0.722em;
  font-weight: 400;
  text-align: center;
  color: #ffffff;
}

.summary-outer-2,
.summary-outer-3 {
  clear: both;
}

.summary-outer-4 {
  padding-top: 6px;
  padding-bottom: 6px;
}

.summary-outer-5,
.summary-outer-6,
.summary-outer-7 {
  clear: both;
  padding-top: 6px;
  padding-bottom: 6px;
}

.summary-outer-8 {
  clear: both;
  height: 12px;
  text-align: center;
  padding-top: 14px;
}

.title-10 {
  width: 60%;
  padding-right: 6px;
  line-height: 1.08;
  text-align: right;
  font-family: Roboto-Light !important;
  color: #625a5a;
  font-size: 20px;
  text-align: left;
}
.g-total strong, .title strong {

  font-family: roboto-medium;
  color: #5d5d5d;
}

.heading strong {
  font-family: roboto-medium;
  color: #5d5d5d;
}


.title span {
  border-top-width: 0;
  border-right-width: 0;
  border-bottom-width: 0;
  border-left-width: 0;
  border-color: transparent;
  border-style: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  background-color: transparent;
  font-family: inherit;
  font-style: inherit;
  text-transform: inherit;
  text-decoration: inherit;
  word-spacing: inherit;
  color: inherit;
  opacity: 1;
  word-break: normal;
  word-wrap: normal;
  white-space: normal;
}

.title-10 span {
  font-size: inherit;
  font-weight: 500;
  letter-spacing: inherit;
}

.title-3 span,
.title-6 span {
  font-size: 0.833em;
  font-weight: inherit;
  letter-spacing: 0;
}
.tabs-wrap{
  padding: 5px;
}
.tabs-wrap a{
  position: relative;
  padding: 5px;
  border-top: 1px solid #686868;
  margin-right: 10px;
  color: #686868;
}
.tabs-wrap a span{
  font-weight: 400;
}
.tabs-wrap a::before {
  content: '';
  width: 2px;
  height: 29px;
  background-color: #686868;
  position: absolute;
  top: -2px;
  right: -7px;
  transform: rotate(-27deg);
}