@import "variables";
@import "mixins";

:root {
  --vbo-blue-color: var(--color-secondary, #22625e) !important;
}

.plugin-container {
  .vblistcontainer-grid {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    max-width: var(--container-width);
    .vblist .room_result {
      width: calc(33.33% - 3rem);
      margin: 0 1.5rem $space-md;
      border: none;
      background-color: $white;
      border-radius: $border-radius;
      box-shadow: 0px 0px 0px 0px rgba(40, 48, 24, 0.1), 0px 9px 20px 0px rgba(40, 48, 24, 0.1), 0px 36px 36px 0px rgba(40, 48, 24, 0.09), 0px 80px 48px 0px rgba(40, 48, 24, 0.05),
        0px 142px 57px 0px rgba(40, 48, 24, 0.01), 0px 223px 62px 0px rgba(40, 48, 24, 0);
      @include bp("xl") {
        width: calc(50% - 3rem);
      }
      @include bp("sm") {
        width: 100%;
      }
      .vblistroomblock {
        .vbo-info-room {
          padding: 1.5rem 2.4rem 1.5rem;
          h4 a {
            font-size: $fs-h3;
            font-weight: $fw-h3;
            color: $col-sec;
            line-height: $lh-h3;
            text-decoration: none;
            display: block;
            margin-bottom: 1rem;
            @include bp("md") {
              font-size: $fs-h4;
            }
          }
        }
        .vbimglistdiv {
          .vbmodalrdetails {
            display: none;
            top: 1.5rem;
            right: 1.5rem;
          }
          img {
            aspect-ratio: 4/3;
            object-fit: cover;
            border-radius: $border-radius $border-radius 0 0;
          }
        }
      }
      .vbsrowprice {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
        .vbsrowpricediv {
          .room_cost {
            font-size: $fs-h3;
            font-family: $font-family-headings;
            color: $col-sec;
            display: inline-flex !important;
            flex-direction: row-reverse;
            .vbo_price {
              margin-right: 5px;
            }
          }
          .vbliststartfrom {
            // color: $col-sec;
            // font-weight: $fw-bold;
            margin-left: 5px;
          }
        }
      }
      .vbcontdivtot {
        padding-bottom: 2.4rem;
      }
      .vbrowroomcapacity {
        margin: 0;
      }
    }
  }
}

.room_carats {
  h4 {
    font-size: $fs-h3;
    display: none;
  }
  .vbo-room-carats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    @include bp("md") {
      grid-template-columns: repeat(2, 1fr);
    }
    @include bp("sm") {
      grid-template-columns: repeat(1, 1fr);
    }
    .vbo-room-carat {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      img {
        margin-right: 1.6rem;
      }
      span {
        color: $gray500;
      }
    }
  }
}
.roomlist_carats .vbo-room-carat,
.room_carats .vbo-room-carat {
  margin: 0 16px 0 0;
  img {
    max-width: 24px;
  }
}

a.btn.vbo-pref-color-btn {
  @include button;
}

//single
.vbrdetboxtop {
  display: block;
  width: 100%;
  margin: 0 auto $space-lg;
  padding: 0 15px;
  max-width: var(--container-width);
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: $col-sec;
    margin-bottom: $space-sm;
  }
  .vblistroomnamediv {
    margin: $space-lg 0 $space-md;
    text-align: center;
    border: none;
    @include bp("md") {
      margin: $space-md 0 $space-sm;
    }
    h3 {
      color: $col-sec;
      font-size: $fs-h2;
      @include underlined;
    }
  }
  .vbroomimgdesc {
    img.vblistimg {
      width: 100%;
      object-fit: cover;
      aspect-ratio: 16/9;
      border-radius: $border-radius;
    }
    .vikfx-gallery-container .vikfx-gallery img {
      max-height: 125px;
      border-radius: $border-radius;
    }
  }
  .vb_detcostroom .vbliststartfromrdet {
    text-transform: none;
    font-size: $fs-p;
  }
  .room_cost {
    font-size: $fs-h3;
    font-family: $font-family-headings;
    color: $col-sec;
    display: inline-flex !important;
    flex-direction: row-reverse;
    margin-bottom: $space-sm;
    .vbo_price {
      margin-right: 5px;
    }
  }
  .vbo-rdet-descprice-block {
    border: none;
    background: transparent;
    flex-direction: column-reverse;
    .vblistroomnamedivprice {
      padding: $space-sm 0;
      .vblistroomname {
        text-align: left;
      }
    }
    .vbo-rdet-desc-cont {
      padding: 0;
      background: transparent;
      border: none;
    }
  }
}
.vbo-availcalendars-cont {
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
  max-width: var(--container-width);
  > h4,
  form[name="vbmonths"],
  .vblegendediv {
    display: inline-block;
    @include bp("md") {
      display: block;
    }
    .vblegenda {
      margin-right: 3rem;
      > .vblegenda-status {
        border-radius: 8px;
        margin-right: 1.3rem;
        width: 2.4rem;
        height: 2.4rem;
      }
      > .vblegenda-lbl {
        font-weight: $fw-medium;
      }
    }
  }
  > h4 {
    color: $col-sec;
    margin-right: 4rem;
  }
  > form {
    margin-right: 4rem;
    .vbselectm {
      border-radius: $border-radius;
      min-width: 14rem;
      cursor: pointer;
      border: none;
      padding: 10.5px 2.4rem 10.5px 2.4rem;
      background-size: 24px 10px;
      color: $gray700;
    }
  }
  > .vblegendediv {
    margin-bottom: $space-sm;
  }
  > .vbcalsblock {
    padding: 0;
    border: none;
    box-shadow: none;
    > .vbcaldivcont {
      &:first-child {
        padding-left: 0;
      }
      &:last-child {
        padding-right: 0;
      }
      tr.vbcaltrmonth {
        td {
          border-bottom: none;
          padding: 8px 3px 1.5rem;
        }
        strong {
          color: $col-sec;
          font-family: $font-family-headings;
          font-size: $fs-h4;
          font-weight: $fw-h4;
        }
        .vbo-rdet-avcal-nav {
          color: $col-prm;
          border-radius: none;
          font-size: 5rem;
          position: absolute;
          cursor: pointer;
          top: 2px;
          width: 27px;
          height: 27px;
          line-height: 25px;
          text-align: center;
          background: transparent;
        }
      }
    }
    .vbcal .vbtdpast {
      opacity: 1 !important;
      border-color: $gray100;
      background: $gray100;
    }
    tr.vbcalnumdays td {
      @include bp("xl-up") {
        height: 54px;
      }
    }
  }
  .vbcal .vbtdbusy,
  .vblegbusy {
    border-color: $gray200;
    background: $gray200;
  }
  .vbcal .vbtdfree,
  .vblegfree {
    border-color: $col-sec;
    background: $col-sec;
    color: $white;
  }
  tr.vbcalnumdays td.vbtdfree:not(.vbtdpast):hover {
    border-color: $col-prm;
    background: $col-prm;
  }
}
.vikfx-gallery-container .vikfx-gallery-navigation-controls .vikfx-gallery-navigation-controls-prevnext > a {
  display: none;
}

.vbo-seldates-cont {
  width: 100%;
  margin: 0 auto $space-lg;
  padding: 0 15px;
  max-width: var(--container-width);
  .vbo-seldates-cont-inner > h4 {
    font-size: $fs-h4;
    border: none;
    color: $col-sec;
    margin: $space-xs 0;
  }
}
.vbdivsearch {
  padding: $space-md $space-md;
  background: $white !important;
  border-radius: $border-radius;
  width: 100%;
  box-shadow: 0px 0px 0px 0px rgba(16, 76, 61, 0.05), 0px 3px 6px 0px rgba(16, 76, 61, 0.05), 0px 12px 12px 0px rgba(16, 76, 61, 0.04), 0px 26px 16px 0px rgba(16, 76, 61, 0.03),
    0px 47px 19px 0px rgba(16, 76, 61, 0.01), 0px 73px 20px 0px rgba(16, 76, 61, 0);
  @include bp("md") {
    padding: $space-sm $space-sm 0;
  }
  form > .vb-search-inner {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    @include bp("lg") {
      flex-direction: row;
      flex-wrap: wrap;
    }
    .input-group {
      display: flex;
      flex-direction: row-reverse;
      @include bp("lg") {
        justify-content: flex-end;
        flex: 1;
      }
      .fa-calendar-alt {
        border: none;
        padding-left: 0;
        background: transparent;
        line-height: 20px;
        &:before {
          content: url(theme-url("/assets/icons/calendar.svg"));
          line-height: 40px;
        }
      }
      input,
      select {
        cursor: pointer;
        box-shadow: none !important;
        @include bp("lg") {
          width: 100% !important;
        }
      }
    }
    .vbo-search-submit {
      align-self: center;
      input.btn {
        @include button;
        background-color: $col-prm !important;
        border-color: $col-prm !important;
        border-radius: 8px !important;
        margin: 0;
        padding: $btn-pd !important;
        border-width: $btn-bw !important;
        &:hover {
          background-color: transparent !important;
        }
      }
    }
    .vbmodhorsearchrac > .vbmodhorsearchroomdentr > * {
      width: 100%;
    }
    > div {
      align-self: center;
      margin: 0;
      @include bp("lg") {
        display: flex;
        flex-direction: column;
        width: 100%;
        float: none;
        margin: 0 0 $space-xs;
      }
      @include bp("xl-up") {
        padding-right: 6rem;
        border-right: 1px solid $gray200;
      }
      &:last-child {
        @include bp("xl-up") {
          border-right: none;
          margin-right: 0;
          padding-right: 0;
        }
      }
      label {
        color: $gray300;
      }
      select {
        border-radius: 8px;
        @include bp("lg") {
          width: 100% !important;
        }
      }
    }
    .vbmodhorsearchcheckindiv,
    .vbmodhorsearchcheckoutdiv {
      @include bp("lg") {
        flex: 1 0 calc(50% - 10px);
        max-width: calc(50% - 10px);
        margin-bottom: 1rem;
      }
    }
  }
}
.vbcalsblock .vbcaldivcont table {
  @include bp("sm") {
    width: 100%;
  }
}

.vbdivsearch {
  margin: $space-md 0 $space-lg;
  input:not([type="checkbox"]):not([type="radio"]):not(.minus):not(.plus):not(.qty),
  input[type="date"],
  input[type="email"],
  input[type="file"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="text"],
  input[type="select"],
  input[type="button"],
  select,
  textarea {
    box-shadow: none;
  }
}
.vbstepsbarcont {
  margin-bottom: $space-lg;
  @include bp("md") {
    margin-bottom: $space-sm;
  }
  ol.vbo-stepbar {
    .vbo-step {
      line-height: 4em !important;
      &:before {
        bottom: -3.75em;
        @include bp("md") {
          bottom: -3.55em;
        }
      }
      @include bp("md") {
        width: 25%;
        min-width: fit-content;
      }
      a,
      span {
        font-size: $fs-h4;
        font-family: $font-family-headings;
        @include bp("md") {
          font-size: 1.4rem;
        }
      }
      &.vbo-step-complete,
      &.vbo-step-current {
        a,
        span {
          color: $col-sec;
        }
      }
    }
  }
}
.vbo-results-wrapper,
.vbo-showprc-head-wrapper,
.vbo-oconfirm-wrapper {
  .vbo-results-head {
    display: flex;
    align-items: center;
    margin-bottom: $space-lg;
    border: none;
    box-shadow: 0px 0px 0px 0px rgba(16, 76, 61, 0.05), 0px 3px 6px 0px rgba(16, 76, 61, 0.05), 0px 12px 12px 0px rgba(16, 76, 61, 0.04), 0px 26px 16px 0px rgba(16, 76, 61, 0.03),
      0px 47px 19px 0px rgba(16, 76, 61, 0.01), 0px 73px 20px 0px rgba(16, 76, 61, 0);
    padding: $space-md $space-xs;
    border-radius: $border-radius;
    background-color: $white;
    @include bp("md") {
      padding: $space-xs $space-xs $space-xxs;
      margin-bottom: $space-sm;
    }
    > .vbo-results-chdates {
      text-transform: none;
      border: none;
      @include bp("md") {
        text-align: center;
      }
    }
    > div {
      display: inline-block;
      padding: 1rem 3rem;
      border-right: 1px solid $gray200;
      @include bp("lg") {
        border-right: none;
        padding: 1rem 0;
      }
      .vbo-results-head-det-lbl {
        margin-bottom: 5px;
        color: $gray300;
        font-weight: $fw-medium;
        @include bp("md") {
          font-size: $fs-small;
        }
      }
      .vbo-results-head-det-val {
        font-size: $fs-h5;
        font-weight: $fw-bold;
        @include bp("md") {
          font-size: $fs-small;
          margin-left: 1rem;
        }
      }
    }
    i {
      &:before {
        color: $col-prm;
      }
    }
  }
  .vbo-pkg-showprc-benefits {
    width: auto;
    padding: 0;
    border: none;
    text-align: left;
    display: inline-block;
    margin: 0;
    padding: 5px 3rem;
    font-size: $fs-p;
    border-radius: 100px;
    background-color: #d2d4bc;
    font-weight: $fw-bold;
  }
  .room_disclaimer {
    padding: 0;
    border: none;
    border-radius: 0;
    margin: $space-xs 0 $space-md;
  }
}

.vbo-searchresults-classic-wrap {
  margin-bottom: $space-lg;
  .room_item {
    box-shadow: 0px 0px 0px 0px rgba(18, 38, 13, 0.1), 0px 5px 11px 0px rgba(18, 38, 13, 0.1), 0px 20px 20px 0px rgba(18, 38, 13, 0.09), 0px 46px 28px 0px rgba(18, 38, 13, 0.05),
      0px 82px 33px 0px rgba(18, 38, 13, 0.01), 0px 128px 36px 0px rgba(18, 38, 13, 0);
    margin-bottom: 4rem;
    background-color: $white;
    border-radius: $border-radius;
    border: none;
    .vblistroomblock {
      border-right-width: 1px;
      display: flex;
      align-items: center;
      @include bp("md") {
        padding-top: $space-xs;
      }
      .vbo-info-room {
        padding: 0 $space-md;
        margin: $space-xs 0;
        @include bp("md") {
          padding: 0 $space-xs;
          text-align: center;
        }
        .vbdescrlistdiv {
          padding: 0;
          h4 {
            color: $col-sec;
            font-size: $fs-h3;
            margin-bottom: $space-xxs;
            @include bp("md") {
              font-size: $fs-h4;
            }
          }
          .vbrowcdescr {
            margin: 0 0 $space-sm;
          }
        }
      }
      .vbmodalrdetails {
        display: none;
      }
    }
    .vik-dots-slider-inner .vik-dots-slider-slide {
      border-radius: $border-radius;
      img {
        border-radius: $border-radius;
      }
    }
    .vbcontdivtot {
      display: flex;
      align-items: center;
      .vbselectordiv {
        border-top: none;
      }
      .vbsrowprice {
        display: flex;
        flex-direction: column-reverse;
      }
      .room_cost {
        font-size: $fs-h3;
        font-family: $font-family-headings;
        color: $col-sec;
        display: inline-flex !important;
        flex-direction: row-reverse;
        .vbo_price {
          margin-right: 5px;
        }
      }
    }
  }
}

form#vbselectroomform {
  margin-bottom: $space-lg;
  .goback {
    a {
      @include button;
      background-color: transparent;
      border-color: $col-sec;
      color: $col-sec;
    }
  }
}

.vbo-showprc-wrapper.vbo-showprc-wrapper-classic {
  margin: 0;
  .vbo-showprc-room-head {
    margin: 0;
    border: none;
    @include bp("md") {
      margin-top: $space-sm;
    }
    .vbo-showprc-staydetails {
      padding: 0;
    }
  }
  .vbo-showprc-room-block {
    padding: 0;
    margin-bottom: $space-md;
    border: none;
    .vbo-showprc-roomname {
      margin-bottom: $space-md;
      h3 {
        color: $col-sec;
        font-size: $fs-h2;
        @include underlined;
        @include bp("md") {
          font-size: $fs-h3;
        }
      }
    }
    .vbroomimgdesc {
      img {
        border-radius: $border-radius;
      }
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        color: $col-sec;
        margin-bottom: $space-xs;
      }
    }
    .room_carats {
      margin-bottom: $space-lg;
      @include bp("md") {
        margin-bottom: $space-sm;
      }
    }
    .room_prices {
      > h4 {
        font-size: $fs-h3;
        color: $col-sec;
        margin-bottom: $space-sm;
      }
    }
  }
  .vbo-showprc-pricetable {
    .vbo-showprc-price-entry {
      background-color: $white;
      border: none;
      border-radius: $border-radius;
      margin-bottom: $space-xs;
      label {
        font-size: $fs-h4;
        color: $col-sec;
        cursor: pointer;
        font-family: $font-family-headings;
      }
      .vbo-showprc-price-entry-radio {
        margin-top: 8px;
        input {
          cursor: pointer;
        }
      }
      .room_cost {
        font-size: $fs-h3;
        font-family: $font-family-headings;
        color: $col-sec;
        display: inline-flex !important;
        flex-direction: row-reverse;
        .vbo_price {
          margin-right: 5px;
        }
      }
    }
  }
}
.room_buttons_box {
  margin-bottom: $space-lg;
  .goback {
    .vbo-goback-link {
      @include button;
      background-color: transparent;
      border-color: $col-sec;
      color: $col-sec;
    }
  }
  .booknow {
    @include button;
    background-color: $col-prm !important;
    border-color: $col-prm !important;
    padding: $btn-pd !important;
    border-radius: $btn-br !important;
    border-width: $btn-bw !important;
    &:hover {
      background-color: transparent !important;
    }
  }
}

.vbo-oconfirm-summary-container {
  .vbo-oconfirm-summary-room-wrapper,
  .vbo-oconfirm-summary-total-wrapper {
    border: none;
    background-color: $white;
    box-shadow: 0px 0px 0px 0px rgba(16, 76, 61, 0.05), 0px 3px 6px 0px rgba(16, 76, 61, 0.05), 0px 12px 12px 0px rgba(16, 76, 61, 0.04), 0px 26px 16px 0px rgba(16, 76, 61, 0.03),
      0px 47px 19px 0px rgba(16, 76, 61, 0.01), 0px 73px 20px 0px rgba(16, 76, 61, 0);
    border-radius: $border-radius;
    margin-bottom: $space-sm;
    .vbo-oconfirm-total-block,
    .vbo-oconfirm-roomname {
      font-family: $font-family-headings;
      text-transform: none;
      font-size: $fs-h4;
      color: $col-sec;
    }
    .vbo-oconfirm-priceinfo {
      margin-top: 1rem;
    }
    .vbo-oconfirm-summary-room-head-cell {
      position: relative;
      > span {
        color: $gray300;
        font-size: $fs-p;
        text-transform: none;
        font-weight: $fw-medium;
      }
    }
  }
  .vbo-oconfirm-summary-total-wrapper {
    background-color: $col-sec;
    .vbo-oconfirm-total-block {
      color: $white;
    }
    span {
      color: $white;
    }
  }
  .vbo-oconfirm-summary-room-wrapper .vbo-oconfirm-summary-room-cell-descr {
    line-height: 180%;
    @include bp("lg-up") {
      margin-top: -2.5rem;
    }
    @include bp("lg") {
      background: transparent;
    }
  }
  .vbo-oconfirm-summary-room-cell-tot {
    span {
      font-weight: $fw-bold;
      color: $col-prm;
    }
  }
}

.wrap.plugin-container {
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
  max-width: var(--container-width);
  .vbo-oconfirm-middlep {
    align-items: flex-end;
    .vbo-coupon-outer,
    .vbo-enterpin-block {
      background-color: transparent;
      border: none;
      padding: 0;
      .btn.vbsubmitcoupon[name="applyacoupon"] {
        @include button;
        background-color: $col-prm !important;
        border-color: $col-prm !important;
        padding: $btn-pd !important;
        border-radius: $btn-br !important;
        border-width: $btn-bw !important;
        &:hover {
          background-color: transparent !important;
        }
        @include bp("md") {
          padding: $btn-pd-mobile !important;
        }
      }
    }
    .vbhaveacoupon,
    .vbo-enterpin-inner span {
      text-align: left;
      margin-bottom: $space-xxs;
    }
    input#vbo-pincode-inp,
    input.vbinputcoupon {
      max-width: 400px;
      margin-right: 3rem;
    }
    h4 {
      color: $col-sec;
      margin-bottom: $space-xxs;
    }
    input[type="text"] {
      border: none !important;
      box-shadow: 0px 3px 12px 0px rgba(16, 76, 61, 0.1);
    }
  }
}

.price-fix {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  @include bp("lg") {
    display: inline-flex;
  }
  .vbcurrency {
    margin-left: 5px;
  }
}
.vbo-oconfirm-summary-room-cell-tot {
  .price-fix {
    justify-content: flex-start;
  }
}
.vbo-oconfirm-summary-total-wrapper {
  padding: 10px 20px 5px;
}
.vbcustomfields {
  padding: 0;
  box-shadow: none;
  border: none;
  textarea,
  select {
    border-width: 0px;
    padding: 8px 24px;
  }
}
form[name="vb"] .vbcustomfields {
  box-shadow: none;
  border: none;
  input,
  select,
  textarea {
    box-shadow: 0px 3px 12px 0px rgba(16, 76, 61, 0.1);
  }
}

.wrap.plugin-container {
  form[name="vb"] {
    max-width: 90rem;
    margin: $space-lg auto;
    @include bp("md") {
      margin: $space-sm auto;
    }
    .vbcustomfields .vbo-oconfirm-cfield-entry {
      width: calc(50% - 30px);
      margin: 0 14px $space-xs;
      @include bp("sm") {
        width: 100%;
        margin: 0 0 $space-xxs;
      }
      .vbo-oconfirm-cfield-label {
        display: inline-block;
        position: relative;
        margin-bottom: 1rem;
        margin-left: $space-xs;
        .vbrequired {
          position: absolute;
          right: -10px;
        }
      }
      label {
        font-size: $fs-p;
        color: $gray400;
      }
    }
    .vbo-oconfirm-cfield-entry.vbo-oconfirm-cfield-entry-separator {
      width: 100%;
      .vbo-oconfirm-cfield-separator.vbseparatorcf {
        text-align: center;
        margin-bottom: $space-md;
        @include bp("sm") {
          text-align: left;
        }
        h4 {
          color: $col-sec;
          font-size: $fs-h2;
          font-weight: $fw-h2;
          @include underlined;
          @include bp("md") {
            font-size: $fs-h3;
            font-weight: $fw-h3;
          }
        }
      }
    }
    .vbo-oconfirm-cfield-entry.vbo-oconfirm-cfield-entry-textarea {
      width: 100%;
      textarea {
        width: 100%;
      }
    }
    .iti__selected-flag {
      border-radius: $border-radius;
    }
    .vbcustomfields .vbo-oconfirm-cfield-entry-checkbox {
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
      justify-content: flex-end;
      label {
        cursor: pointer;
      }
      input[type="checkbox"] {
        height: 20px;
        border-radius: $border-radius;
        background-color: $white;
        &:checked {
          background-color: $col-sec;
          border-color: $col-sec;
        }
      }
    }
  }
}

.wrap.plugin-container {
  .vbo-oconfirm-paymentopts {
    border: none;
    text-align: center;
    @include bp("sm") {
      text-align: left;
    }
    h4 {
      color: $col-sec;
      font-size: $fs-h2;
      font-weight: $fw-h2;
      @include underlined;
      @include bp("md") {
        font-size: $fs-h3;
        font-weight: $fw-h3;
      }
    }
    .vbo-oconfirm-paymethods-list {
      margin-top: $space-md;
      li {
        margin: 5px;
        padding: $space-xxs $space-xs;
        background-color: $white;
        border-radius: $border-radius;
        position: relative;
        cursor: pointer;
        &.vbo-oconfirm-paymethod-item-active {
          border-color: $col-sec;
          label {
            color: $col-sec;
          }
          &:after {
            background: $col-sec;
          }
        }
        label {
          font-family: $font-family-headings;
          font-size: $fs-h5;
          &:hover {
            color: $col-sec;
          }
        }
      }
    }
  }
}

.vboconfirmbottom {
  .goback {
    a {
      @include button;
      background-color: transparent;
      border-color: $col-sec;
      color: $col-sec;
      padding: $btn-pd !important;
      @include bp("md") {
        padding: $btn-pd-mobile !important;
      }
    }
  }
  input.btn.booknow[name="saveorder"] {
    @include button;
    background-color: $col-prm !important;
    border-color: $col-prm !important;
    padding: $btn-pd !important;
    border-radius: $btn-br !important;
    border-width: $btn-bw !important;
    &:hover {
      background-color: transparent !important;
    }
    @include bp("md") {
      margin: 0;
      padding: $btn-pd-mobile !important;
    }
  }
}

.vbo-booking-details-topcontainer {
  margin-top: $space-lg;
  .vbo-booking-details-head {
    border-radius: $border-radius;
    padding: $space-xxs $space-xs;
    margin-bottom: $space-sm;
  }
  .vbvordpaybutton {
    margin: 0;
    box-shadow: none;
    border: none;
  }
  .vbo-booking-details-midcontainer > div {
    background-color: $white;
    border: none;
    border-radius: $border-radius;
    padding: $space-md $space-sm;
    box-shadow: 0px 0px 0px 0px rgba(16, 76, 61, 0.1), 0px 5px 10px 0px rgba(16, 76, 61, 0.1), 0px 18px 18px 0px rgba(16, 76, 61, 0.09), 0px 41px 24px 0px rgba(16, 76, 61, 0.05),
      0px 72px 29px 0px rgba(16, 76, 61, 0.01), 0px 113px 32px 0px rgba(16, 76, 61, 0);
    @include bp("md") {
      padding: $space-sm;
      margin-bottom: $space-xs;
    }
    span.vbvordudatatitle {
      border-bottom: none;
      text-transform: none;
    }
    .vbo-booking-details-bookinfo,
    .vbo-bookingdet-userdetail {
      margin: $space-xs 0;
    }
    .vbo-booking-details-bookinfo-lbl,
    .vbo-bookingdet-userdetail-lbl {
      color: $col-sec;
      font-family: $font-family-headings;
      font-weight: $fw-h4;
      text-transform: none;
      font-size: $fs-h4;
      display: block;
    }
  }
}
.vbo-booking-rooms-wrapper {
  margin: $space-lg 0 $space-lg;
  @include bp("sm") {
    margin: $space-md 0 $space-md;
  }
  .vbvordroominfo {
    border-radius: $border-radius;
    padding: 0;
    background-color: $white;
    border: none;
    box-shadow: 0px 0px 0px 0px rgba(16, 76, 61, 0.05), 0px 3px 6px 0px rgba(16, 76, 61, 0.05), 0px 12px 12px 0px rgba(16, 76, 61, 0.04), 0px 26px 16px 0px rgba(16, 76, 61, 0.03),
      0px 47px 19px 0px rgba(16, 76, 61, 0.01), 0px 73px 20px 0px rgba(16, 76, 61, 0);
    .vbo-booking-roomphoto {
      margin: 0;
      img {
        border-radius: $border-radius 0 0 $border-radius;
        @include bp("sm") {
          border-radius: $border-radius $border-radius 0 0;
        }
      }
    }
    .vbordroomdet {
      margin-top: $space-xs;
      @include bp("sm") {
        margin: $space-sm;
      }
      .vbvordroominfotitle {
        color: $col-sec;
        font-size: $fs-h3;
        font-family: $font-family-headings;
      }
      .room_cost {
        font-size: $fs-h4;
        font-family: $font-family-headings;
        color: $col-sec;
        display: inline-flex !important;
        flex-direction: row-reverse;
        .vbo_price {
          margin-right: 5px;
        }
      }
    }
  }
}

.vbo-booking-costs-list {
  margin-bottom: $space-lg;
  background-color: $col-sec;
  border-radius: $border-radius;
  padding: $space-xs;
  .vbo-oconfirm-total-block {
    color: $white;
  }
  .vbo-booking-cost-detail {
    align-items: center;
  }
  .vbo-booking-cost-lbl {
    span {
      color: $white;
      font-size: $fs-h3;
      font-family: $font-family-headings;
    }
  }
  span {
    color: $white;
  }
  .vbo-booking-cost-val-number {
    display: inline-flex !important;
    flex-direction: row-reverse;
    font-size: $fs-h3;
    font-family: $font-family-headings;
    color: $col-prm;
    span {
      color: $col-prm;
    }
    .vbo_price {
      margin-right: 5px;
    }
  }
}

.wrap.plugin-container {
  .vbsearchorderdiv {
    .vbsearchorderinner {
      text-align: center;
      margin: $space-lg 0;
      border: none;
      padding: 0;
      @include bp("md") {
        margin: $space-md 0;
      }
      span.vbsearchordertitle {
        font-family: $font-family-headings;
        color: $col-sec;
        font-size: $fs-h2;
        @include underlined;
      }
    }
    .vbo-bookings-list-search {
      text-align: center;
      margin: 0 0 $space-lg;
      padding: 0;
      background: transparent;
      @include bp("md") {
        margin: 0 0 $space-md;
      }
      > span {
        margin-bottom: $space-xs;
      }
      input[name="confirmnumber"] {
        padding: $btn-pd !important;
        font-size: $btn-fs !important;
      }
      .vbsearchordersubmit {
        @include button;
      }
    }
  }
  .vbo-bookings-list-container {
    margin: 0 0 $space-lg;
    @include bp("md") {
      margin: 0 0 $space-md;
    }
    .vbo-bookings-list-table-body {
      .vbo-bookings-list-table-row {
        box-shadow: 0px 0px 0px 0px rgba(16, 76, 61, 0.05), 0px 3px 6px 0px rgba(16, 76, 61, 0.05), 0px 12px 12px 0px rgba(16, 76, 61, 0.04), 0px 26px 16px 0px rgba(16, 76, 61, 0.03),
          0px 47px 19px 0px rgba(16, 76, 61, 0.01), 0px 73px 20px 0px rgba(16, 76, 61, 0);
        padding: $space-xs $space-sm;
        border-radius: $border-radius;
        background-color: $white;
        border: none;
        margin: $space-sm 0;
      }
    }
  }
}

/* availability */
.vbo-search-suggestions-container {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

div#vbo-search-suggestions h4 {
  color: #22625e;
  margin-bottom: 2.4rem;
}

.vbo-search-solution,
.vbo-booking-solution {
  background-color: white;
  border: none !important;
  padding: 0;
  border-radius: 24px !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
}
.vbo-search-solution-dates > span,
.vbo-booking-solution-dates > span {
  padding: 24px 10px 24px !important;
}

.vbo-search-suggestions-av-mon {
  background-color: transparent !important;
}
.vbo-search-suggestions-av-mon.vbo-pref-color-text {
  font-family: "Playfair Display", serif;
  font-size: 20px;
  padding: 20px 20px;
  vertical-align: middle;
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  border-top: none !important;
}
.vbo-search-suggestions-av {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
  background-color: white !important;
  border-radius: 24px !important;
}
.vbo-search-suggestions-intro {
  margin-bottom: 4rem;
}
