File "panel-style.scss"

Full path: /home/satitravel/public_html/wp-content/plugins/citynet/public/style/desk/panel-style.scss
File size: 197.46 B
MIME-type: text/plain
Charset: utf-8

Download   Open   Edit   Advanced Editor &nnbsp; Back

$primary_color_fly: #000;
$secondary_color_fly: #dda627;
$light_text_fly: #aeaeae;
$primary_color_vida: #f48c07;
$secondary_color_vida: #0653a1;

.cn_panel_ {
  &default {
    padding-top: 50px;
  }
}

.v-text-field--outlined fieldset {
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
}

.col,
.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-auto,
.col-lg,
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-auto,
.col-md,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-auto,
.col-sm,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-auto,
.col-xl,
.col-xl-1,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-auto {
  padding: 0px;
}

.adpmain {
  table {
    border-collapse: separate !important;
  }
}

.Vue-Toastification__container.bottom-right .Vue-Toastification__toast,
.Vue-Toastification__container.top-right .Vue-Toastification__toast {
  margin-left: auto !important;
  margin-right: unset !important;
}

@media (max-width: 1023px) {
  .v-menu__content.theme--light.menuable__content__active {
    min-width: 95% !important;
  }

  .adpmain.persian .navFwd a:nth-child(2),
  .adpmain.persian .navBack a:nth-child(2) {
    top: 8% !important;
  }

  .adpmain {
    top: 60px !important;
    // left: 0 !important;
    width: 100% !important;

    table {
      padding: 0px 5px !important;
      //  border-collapse:  !important;
      width: 100% !important;

      td > .weekday {
        width: auto;
        height: 45px !important;
      }
    }
  }
}

@media (min-width: 1200px) {
  body.home .citynet-app {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
}

.container {
  padding-top: 0;
  padding-bottom: 0;
}

.citynet-app#app {
  background: #fff;

  // font-size: 66.66666% !important;
  i {
    margin: 0 !important;
  }

  label {
    margin-bottom: 0px !important;
  }

  box-sizing: border-box;

  .v-application--wrap {
    min-height: fit-content !important;
  }

  & .v-card {
    background-color: #fff;
  }

  // &.citynet_vidagashtnew,
  // &.citynet_vidagasht {
  //   &.theme--light.v-application {
  //     background: transparent;
  //   }

  //   .main-homepage-class {
  //     .v-card {
  //       background-color: transparent;
  //     }
  //   }
  // }

  &.citynet_ghasreshirin,
  &.citynet_vidagasht {
    &.theme--light.v-application {
      background: transparent;
    }
    .main-homepage-class {
      .v-card {
        background-color: transparent;
      }
    }
  }
  &.transparent {
    &.theme--light.v-application {
      background: #ffffff6e;
    }
    #main-homepage-class .v-card:not(.defaultMenu) {
      background-color: #ffffff6e;
    }
  }

  &.citynet_ata2000,
  &.citynet_satitravel {
    .contractsPage {
      .no-bootstrap5-css {
        .col-md-2 {
          -ms-flex: 0 0 16.666667% !important;
          flex: 0 0 16.666667% !important;
          max-width: 16.666667% !important;
        }
        .col-md-4 {
          -ms-flex: 0 0 33.333333% !important;
          flex: 0 0 33.333333% !important;
          max-width: 33.333333% !important;
        }
      }
    }
  }

  // &.citynet_flysoroush {
  //   &.theme--light.v-application {
  //     background: #ffffff80;
  //   }

  //   .main-homepage-class {
  //     .v-card {
  //       background-color: transparent;
  //     }
  //   }
  // }
  &.citynet_behshadgasht,
  &.citynet_amirtravel {
    background: unset !important;
  }

  .twoway-form .datepicker {
    .v-input__append-inner {
      padding-right: 11px;
      padding-top: 5px;
    }
  }

  #inspire {
    margin-top: 0px !important;

    .v-application--wrap > nav {
      z-index: 100;
    }

    > div > header {
      z-index: 102;
    }
  }

  .col,
  .col-1,
  .col-10,
  .col-11,
  .col-12,
  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-auto,
  .col-lg,
  .col-lg-1,
  .col-lg-10,
  .col-lg-11,
  .col-lg-12,
  .col-lg-2,
  .col-lg-3,
  .col-lg-4,
  .col-lg-5,
  .col-lg-6,
  .col-lg-7,
  .col-lg-8,
  .col-lg-9,
  .col-lg-auto,
  .col-md,
  .col-md-1,
  .col-md-10,
  .col-md-11,
  .col-md-12,
  .col-md-2,
  .col-md-3,
  .col-md-4,
  .col-md-5,
  .col-md-6,
  .col-md-7,
  .col-md-8,
  .col-md-9,
  .col-md-auto,
  .col-sm,
  .col-sm-1,
  .col-sm-10,
  .col-sm-11,
  .col-sm-12,
  .col-sm-2,
  .col-sm-3,
  .col-sm-4,
  .col-sm-5,
  .col-sm-6,
  .col-sm-7,
  .col-sm-8,
  .col-sm-9,
  .col-sm-auto,
  .col-xl,
  .col-xl-1,
  .col-xl-10,
  .col-xl-11,
  .col-xl-12,
  .col-xl-2,
  .col-xl-3,
  .col-xl-4,
  .col-xl-5,
  .col-xl-6,
  .col-xl-7,
  .col-xl-8,
  .col-xl-9,
  .col-xl-auto {
    padding: 13px;
    position: relative;
    min-height: unset !important;
  }

  .panelHeader {
    hr {
      margin: 0px !important;
    }

    position: fixed;
    top: 0;
    z-index: 1000;
    place-self: center;

    &_defaultDrawer {
      z-index: 3000 !important;
    }

    &.default {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
      background-color: transparent;
      margin: 0;
      padding-right: 20px;

      @media (min-width: 1200px) {
      }

      .panelHeader__span--userName {
        font-size: 13px !important;
        margin: 10px;
        padding: 7px 10px;
        border-radius: 10%;

        &:hover:not(:first-child) {
          font-size: 13px !important;
          background-color: rgb(239, 239, 239);
        }
      }

      .panelHeader__button {
        &--signUp,
        &--signIn,
        &--panelAdmin,
        &--trackOrder {
          font-size: 13px !important;
          margin: 10px;
          margin-right: 0px;
          padding: 7px 10px;
          border-radius: 10%;

          &:hover:not(:first-child) {
            font-size: 13px !important;
            background-color: rgb(239, 239, 239);
          }
        }

        &--signUp {
          background-color: var(--v-buttons-base);
          color: white;

          &:hover {
            font-size: 13px !important;
            opacity: 0.8;
          }
        }

        &--exit {
          background: transparent !important;
        }
      }
    }

    &.theme1 {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
      background-color: transparent;
      margin: 0;
      padding-right: 0;

      @media (min-width: 1200px) {
      }

      .panelHeader__span--userName {
        font-size: 13px !important;
        margin: 10px;
        padding: 7px 10px;
        border-radius: 10%;

        &:hover:not(:first-child) {
          font-size: 13px !important;
          background-color: rgb(239, 239, 239);
        }
      }

      .panelHeader__button {
        &--signUp,
        &--signIn,
        &--exit,
        &--panelAdmin,
        &--trackOrder {
          font-size: 13px !important;
          margin: 10px;
          margin-right: 0px;
          padding: 7px 10px;
          border-radius: 10%;

          &:hover:not(:first-child) {
            font-size: 13px !important;
            background-color: rgb(239, 239, 239);
          }
        }

        &--signUp {
          background-color: var(--v-buttons-base);
          color: white;

          &:hover {
            font-size: 13px !important;
            opacity: 0.8;
          }
        }
      }
    }
  }
}

.main-homepage-class {
  &.transparent {
    .theme--light.v-tabs > .v-tabs-bar {
      background-color: #ffffff12 !important;
    }
  }
  &.transparent,
  &.default {
    margin: auto;
    .v-chip {
      margin: 4px 8px !important;
    }
    .v-input__prepend-inner i {
      padding: 0 4px;
    }
    input,
    .v-input {
      font-size: 13px !important;
    }
    .theme--light {
      input,
      .v-input:not(.v-input--is-disabled):not(.error--text) fieldset,
      label,
      .black--text,
      .homepage-icon-color {
        color: #52575c !important;
      }
      label.v-label--is-disabled {
        color: #a0a4a8 !important;
      }
      .grey--text {
        color: #a0a4a8 !important;
      }
    }
    > .v-card.v-sheet.theme--light {
      box-shadow: 0 6px 31px -13px rgba(0, 0, 0, 0.21);
      border-radius: 20px;
    }

    .v-tabs-bar {
      height: 20%;
      border-radius: 20px;
    }

    > div > .main-homepage-class__tabs .v-tab {
      padding: 10px 0 !important;
      font-size: 13px;
      letter-spacing: 0px !important;
      max-width: 15%;

      @media (max-width: 960px) {
        max-width: 14%;
        min-width: 14;
      }

      @media (max-width: 600px) {
        max-width: 12%;
        min-width: 12%;
        margin-right: 8px !important;
        margin-left: 8px !important;
      }

      > i {
        margin-left: 0 !important;
        margin-right: 0 !important;
      }

      > svg {
        min-height: 24px;
        max-width: 28px;
      }

      &--active {
        border-bottom: 2px solid var(--v-primary-base) !important;

        i {
          color: var(--v-primary-base) !important;
        }
      }
    }

    .flight-panel__radiogroup,
    .flightAndHotel-panel__radiogroup,
    .hotel-panel__radiogroup {
      margin-top: 10px;

      & > div > div > div > div {
        display: flex;
        flex-direction: row;
        font-size: 13px;
      }
    }
    .flightAndHotel-panel__radio,
    .flight-panel__radio {
      &--oneway,
      &--twoway,
      &--multiway {
        & > div > label {
          margin: 0;
        }

        margin: 10px 0;
      }
    }

    .cip-panel__radio {
      &--oneway,
      &--twoway {
        & > div > label {
          margin: 0;
        }

        margin-top: 20px;
        margin-bottom: 10px;
      }
    }

    .hotel-panel__radio {
      &--domestic,
      &--foreign {
        & > div > label {
          margin: 0;
        }

        margin: 5px;
      }
    }

    .flightAndHotel-panel__select-container,
    .flight-panel__select-container {
      display: flex !important;
      justify-content: space-between;
    }

    .flight-panel__checkboxes {
      width: 50%;

      .v-input--checkbox {
        align-items: center;
      }
    }

    .flight-panel__dynamic-component {
      font-size: 13px;

      .v-input--is-disabled {
        .v-input__slot > fieldset {
          border: 1px solid #cecece !important;
          border-radius: 8px;
        }
      }

      .oneway-form > form {
        & .error--text .v-input__slot > fieldset {
          border: 2px solid var(--v-error-base);
        }

        .v-btn {
          border-radius: 8px;
        }

        @media (max-width: 1023px) {
          .v-input__slot,
          .v-text-field__details {
            margin-bottom: 0px;
          }
        }

        position: relative;
        display: grid;
        grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end];
        grid-template-columns: repeat(2, minmax(25%, 1fr)) 0.005px repeat(
            2,
            minmax(25%, 1fr)
          );
        grid-template-areas: "origin origin button destination destination" "depdate retdate . passengers search";

        & > div {
          padding-top: 0px;
          padding-bottom: 0px;
          padding-left: 10px;
          padding-right: 0px;
        }

        & > .oneway-form__swap-button {
          justify-self: center;
          cursor: pointer;
        }

        & > .oneway-form__textfield--depdatepicker {
          input {
            font-size: 13px;
          }
        }

        & > .oneway-form__textfield--retdatepicker {
          input {
            font-size: 13px;
          }
        }

        @media (max-width: 1023px) {
          grid-template-columns: repeat(1, minmax(60px, 1fr));
          grid-auto-rows: minmax(70px, auto);
          grid-template-areas: "origin " "destination" "depdate" "retdate" "passengers" "search";

          & > div:not(.oneway-form__swap-button) {
            padding: 0 10px;
            cursor: pointer;
          }
        }

        .oneway-form {
          &__input {
            &--origin {
              grid-area: origin;

              .v-autocomplete__content {
                left: 10px !important;
              }
            }

            &--destination {
              grid-area: destination;

              .v-autocomplete__content {
                left: 10px !important;
              }
            }
          }

          &__menu--passengers {
            grid-area: passengers;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }
            }
          }

          &__textfield {
            &--depdatepicker {
              grid-area: depdate;
            }

            &--retdatepicker {
              grid-area: retdate;
            }
          }

          &__btn--search {
            grid-area: search;

            > button {
              font-size: 13px;
              box-shadow: 0px 12px 15px -3px #5f5f5f3b;
              .v-btn__content span {
                font-size: 16px !important;
              }
            }
          }

          &__swap-button {
            display: flex;
            justify-content: center;
            align-items: center;
            align-self: start;
            grid-area: button;
            cursor: pointer;

            @media (max-width: 1023px) {
              position: absolute;
              top: 9%;
            }

            > i {
              z-index: 10;
              top: 9px;
              background-color: white;
              border: solid 1px #616161;
              border-radius: 50%;
              padding: 6px;
              margin-top: 8px;

              @media (max-width: 1023px) {
                transform: rotate(90deg);
              }

              &:hover {
                background: #e6e6e6;
              }
            }
          }
        }
      }

      .twoway-form > .v-input--is-disabled {
        .v-input__slot > fieldset {
          border: 1px solid #cecece !important;
          border-radius: 8px;
        }
      }

      .twoway-form > form {
        & .error--text .v-input__slot > fieldset {
          border: 2px solid var(--v-error-base);
        }

        .v-btn {
          border-radius: 8px;
        }

        @media (max-width: 1023px) {
          .v-input__slot,
          .v-text-field__details {
            margin-bottom: 0px;
          }
        }

        position: relative;
        display: grid;
        grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end];
        grid-template-columns: repeat(2, minmax(25%, 1fr)) 0.005px repeat(
            2,
            minmax(25%, 1fr)
          );
        grid-template-areas: "origin origin button destination destination" "depdate retdate . passengers search";

        & > div {
          padding-top: 0px;
          padding-bottom: 0px;
          padding-left: 10px;
          padding-right: 0px;
        }

        & > .twoway-form__swap-button {
          justify-self: center;
          cursor: pointer;
        }

        & > .twoway-form__textfield--depdatepicker {
          input {
            font-size: 13px;
          }
        }

        & > .twoway-form__textfield--retdatepicker {
          input {
            font-size: 13px;
          }
        }

        @media (max-width: 1023px) {
          grid-template-columns: repeat(1, minmax(60px, 1fr));
          grid-auto-rows: minmax(70px, auto);
          grid-template-areas: "origin " "destination" "depdate" "retdate" "passengers" "search";

          & > div:not(.twoway-form__swap-button) {
            padding: 0 10px;
            cursor: pointer;
          }
        }

        .twoway-form {
          &__input {
            &--origin {
              grid-area: origin;

              input {
                padding: 0px 15px;
              }

              .v-autocomplete__content {
                left: 10px !important;
              }
            }

            &--destination {
              grid-area: destination;

              input {
                padding: 0px 15px;
              }

              .v-autocomplete__content {
                left: 10px !important;
              }
            }
          }

          &__menu--passengers {
            grid-area: passengers;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }

              &:nth-child(3) {
                margin-bottom: 10px;
              }
            }
          }

          &__textfield {
            &--depdatepicker {
              grid-area: depdate;
            }

            &--retdatepicker {
              grid-area: retdate;
            }
          }

          &__btn--search {
            grid-area: search;

            > button {
              font-size: 13px;
              box-shadow: 0px 12px 15px -3px #5f5f5f3b;
              .v-btn__content span {
                font-size: 16px !important;
              }
            }
          }

          &__swap-button {
            display: flex;
            justify-content: center;
            align-items: center;
            align-self: start;
            grid-area: button;
            cursor: pointer;

            @media (max-width: 1023px) {
              position: absolute;
              top: 9%;
            }

            > i {
              z-index: 10;
              top: 9px;
              background-color: white;
              border: solid 1px #616161;
              border-radius: 50%;
              padding: 6px;
              margin-top: 8px;

              @media (max-width: 1023px) {
                transform: rotate(90deg);
              }

              &:hover {
                background: #e6e6e6;
              }
            }
          }
        }
      }

      .multiway-form > form {
        display: grid;
        grid-template-rows: [row1-start] 1fr [row1-end row2-start] min-content [row2-end];
        grid-template-columns: 5% minmax(30%, 1fr) 0.005px minmax(30%, 1fr) 25%;
        grid-template-areas: "formsegment formsegment formsegment formsegment formsegment" ". add passengers passengers search";

        & > div:not(.multiway-form__segment) {
          padding: 10px;
          cursor: pointer;
        }

        & .error--text .v-input__slot > fieldset {
          border: 2px solid var(--v-error-base);
        }

        .v-btn {
          border-radius: 8px;
        }

        & > div {
          padding-top: 0px;
          padding-bottom: 0px;
          padding-left: 10px;
          padding-right: 0px;
        }

        & > .multiway-form__textfield--depdatepicker {
          input {
            font-size: 13px;
          }
        }

        & > .multiway-form__textfield--retdatepicker {
          input {
            font-size: 13px;
          }
        }

        .multiway-form {
          &__segment {
            grid-area: formsegment;
            padding: 0px;

            &-row {
              > div {
                position: relative;
                display: grid;
                grid-template-rows: [row1-start] 1fr;
                grid-template-columns:
                  5% minmax(30%, 1fr) 0.005px minmax(30%, 1fr)
                  25%;
                grid-template-areas: "remove origin button destination depdatepicker";

                &
                  > div:not(.multiway-form__segment-row__swap-button):not(
                    .multiway-form__segment-row__btn--remove
                  ) {
                  padding: 0 10px;
                  cursor: pointer;
                }
              }

              &__input {
                &--origin {
                  grid-area: origin;

                  input {
                    padding: 0px 15px;
                  }

                  .v-autocomplete__content {
                    left: 10px !important;
                  }
                }

                &--destination {
                  grid-area: destination;

                  input {
                    padding: 0px 15px;
                  }

                  .v-autocomplete__content {
                    left: 10px !important;
                  }
                }
              }

              &__btn--remove {
                grid-area: remove;

                > .v-btn {
                  min-width: 35px;
                  height: 35px;
                }
              }

              &__textfield--depdatepicker {
                grid-area: depdatepicker;
              }

              &__swap-button {
                display: flex;
                justify-content: center;
                align-items: center;
                align-self: start;
                grid-area: button;
                cursor: pointer;

                @media (max-width: 991px) {
                  position: absolute;
                }

                > i {
                  z-index: 10;
                  top: 9px;
                  background-color: white;
                  border: solid 1px #616161;
                  border-radius: 50%;
                  padding: 6px;
                  margin-top: 8px;

                  @media (max-width: 991px) {
                    transform: rotate(90deg);
                  }

                  &:hover {
                    background: #e6e6e6;
                  }
                }
              }
            }
          }

          &__btn--add {
            grid-area: add;
            display: flex;

            > .v-btn {
              min-width: 50%;
              height: 56px;
              margin: 0px;
            }
          }

          &__btn--search {
            grid-area: search;
            .v-btn__content span {
              font-size: 16px !important;
            }
          }

          &__menu--passengers {
            grid-area: passengers;
            padding-right: 0px !important;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }

              &:nth-child(3) {
                margin-bottom: 10px;
              }
            }
          }
        }
      }
    }

    .hotel-panel__dynamic-component {
      font-size: 13px;

      .domestic-form > form {
        @media (min-width: 1023px) {
          display: grid;
          grid-template-columns: repeat(2, 3fr) repeat(2, 3fr);
          grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end];
          grid-template-areas: "hotel hotel checkin checkout" ". nationality guests search";
          //grid-template-areas: "checkout checkin chekin""checkin checkin checkin";

          & > div {
            padding-top: 0px;
            padding-bottom: 0px;
            padding-left: 10px;
            padding-right: 0px;
          }
        }

        // padding: 0em 1em;
        display: grid;
        grid-template-columns: repeat(1, minmax(60px, 1fr));
        grid-auto-rows: minmax(70px, auto);
        grid-template-areas: "hotel" "checkin" "checkout" "guests" "search";
      }

      .domestic-form {
        font-size: 13px !important;

        &__input {
          &--hotel {
            grid-area: hotel;

            .v-autocomplete__content {
              left: 10px !important;
            }
          }
        }

        &__textfield--checkinDatepicker {
          grid-area: checkin;

          input {
            font-size: 13px;
          }
        }

        &__textfield--checkoutDatepicker {
          grid-area: checkout;

          input {
            font-size: 13px;
          }
        }

        &__nationality {
          grid-area: nationality;
          input {
            font-size: 13px;
          }
          .v-input__append-inner {
            margin-top: 15px;
          }
        }

        &__menu--guests {
          @media (min-width: 1023px) {
            grid-area: guests;

            .v-input {
              grid-area: guest_input;
            }

            input {
              font-size: 13px !important;
            }

            .v-menu__content.theme--light.menuable__content__active {
              border-bottom-left-radius: 10px;
              border-bottom-right-radius: 10px;
            }

            .v-list-item {
              justify-content: space-between;
              min-height: 35px;

              &::after {
                display: none;
              }

              &:nth-child(3) {
                margin-bottom: 10px;
              }
            }

            .v-menu__content {
              & > div {
                & > button {
                  border: 1.5px solid rgb(46, 196, 182) !important;
                  color: rgb(46, 196, 182) !important;
                  background-color: white !important;
                  box-shadow: none !important;
                  width: 90%;
                  margin: 0.4rem 0;
                }
              }
            }
          }
        }

        &__btn--search {
          grid-area: search;

          > button {
            font-size: 13px;
            box-shadow: 0px 12px 15px -3px #5f5f5f3b;
            .v-btn__content span {
              font-size: 16px !important;
            }
          }
        }
      }

      .foreign-form > form {
        position: relative;
        display: grid;
        grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end];
        grid-template-columns: repeat(4, minmax(250px, 1fr));
        grid-template-areas: "hotel hotel checkin checkout" "guests nationality country search";

        & > div {
          padding-top: 0px;
          padding-bottom: 0px;
          padding-left: 10px;
          padding-right: 0px;
        }

        & > .foreign-form__textfield--checkinDatepicker {
          // padding-left: 0em;
          // padding-right: 0em;
          input {
            font-size: 13px;
          }
        }

        & > .foreign-form__textfield--checkoutDatepicker {
          // padding-left: 1em;
          // padding-right: 0em;
          input {
            font-size: 13px;
          }
        }

        @media (max-width: 1023px) {
          grid-template-columns: repeat(1, minmax(60px, 1fr));
          grid-auto-rows: minmax(70px, auto);
          grid-template-areas: "hotel" "checkin" "checkout" "guests" "nationality" "country" "search";
        }

        .foreign-form {
          &__input {
            &--hotel {
              grid-area: hotel;

              .v-autocomplete__content {
                left: 10px !important;
              }
            }
          }

          &__menu--guests {
            grid-area: guests;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }

              &:nth-child(3) {
                margin-bottom: 10px;
              }
            }

            .v-menu__content {
              & > div {
                & > button {
                  border: 1.5px solid rgb(46, 196, 182) !important;
                  color: rgb(46, 196, 182) !important;
                  background-color: white !important;
                  box-shadow: none !important;
                  width: 90%;
                  margin: 0.4rem 0;
                }
              }
            }
          }

          &__menu--country {
            grid-area: country;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }
            }
          }

          &__menu--nationality {
            grid-area: nationality;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }
            }
          }

          &__textfield {
            &--checkinDatepicker {
              grid-area: checkin;
            }

            &--checkoutDatepicker {
              grid-area: checkout;
            }
          }

          &__btn--search {
            grid-area: search;

            > button {
              font-size: 13px;
              box-shadow: 0px 12px 15px -3px #5f5f5f3b;
              .v-btn__content span {
                font-size: 16px !important;
              }
            }
          }
        }
      }
    }
    .insurance-panel__dynamic-component {
      font-size: 13px;

      .insurance-form > form {
        @media (min-width: 1023px) {
          display: grid;
          grid-template-columns: 3fr 2.4fr 1.6fr;
          grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end];
          grid-template-areas: "country duration visatype" ". guests search";
          grid-column-gap: 10px;
        }

        display: grid;
        grid-template-columns: repeat(1, minmax(60px, 1fr));
        grid-auto-rows: minmax(70px, auto);
        grid-template-areas: "country" "duration" "visatype" "guests" "search";
      }

      .insurance-form {
        font-size: 13px !important;

        &__input {
          &--insurance {
            grid-area: country;

            .v-autocomplete__content {
              left: 10px !important;
            }
          }
        }

        &__textfield--duration {
          grid-area: duration;

          input {
            font-size: 13px;
          }
        }

        &__textfield--visa-type {
          grid-area: visatype;

          input {
            font-size: 13px;
          }
        }

        &__menu--guests {
          @media (min-width: 1023px) {
            grid-area: guests;

            .v-input {
              grid-area: guest_input;
            }

            input {
              font-size: 13px !important;
            }

            .v-menu__content.theme--light.menuable__content__active {
              border-bottom-left-radius: 10px;
              border-bottom-right-radius: 10px;
            }

            .v-list-item {
              justify-content: space-between;
              min-height: 35px;

              &::after {
                display: none;
              }

              &:nth-child(3) {
                margin-bottom: 10px;
              }
            }

            .v-menu__content {
              & > div {
                & > button {
                  border: 1.5px solid rgb(46, 196, 182) !important;
                  color: rgb(46, 196, 182) !important;
                  background-color: white !important;
                  box-shadow: none !important;
                  width: 90%;
                  margin: 0.4rem 0;
                }
              }
            }
          }
        }

        &__btn--search {
          grid-area: search;

          > button {
            font-size: 13px;
            box-shadow: 0px 12px 15px -3px #5f5f5f3b;
            .v-btn__content span {
              font-size: 16px !important;
            }
          }
        }
      }

      .foreign-form > form {
        position: relative;
        display: grid;
        grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end];
        grid-template-columns: repeat(4, minmax(250px, 1fr));
        grid-template-areas: "hotel hotel checkin checkout" "guests nationality country search";

        & > div {
          padding-top: 0px;
          padding-bottom: 0px;
          padding-left: 10px;
          padding-right: 0px;
        }

        & > .foreign-form__textfield--checkinDatepicker {
          input {
            font-size: 13px;
          }
        }

        & > .foreign-form__textfield--checkoutDatepicker {
          input {
            font-size: 13px;
          }
        }

        @media (max-width: 1023px) {
          grid-template-columns: repeat(1, minmax(60px, 1fr));
          grid-auto-rows: minmax(70px, auto);
          grid-template-areas: "hotel" "checkin" "checkout" "guests" "nationality" "country" "search";
        }

        .foreign-form {
          &__input {
            &--hotel {
              grid-area: hotel;

              .v-autocomplete__content {
                left: 10px !important;
              }
            }
          }

          &__menu--guests {
            grid-area: guests;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }

              &:nth-child(3) {
                margin-bottom: 10px;
              }
            }

            .v-menu__content {
              & > div {
                & > button {
                  border: 1.5px solid rgb(46, 196, 182) !important;
                  color: rgb(46, 196, 182) !important;
                  background-color: white !important;
                  box-shadow: none !important;
                  width: 90%;
                  margin: 0.4rem 0;
                }
              }
            }
          }

          &__menu--country {
            grid-area: country;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }
            }
          }

          &__menu--nationality {
            grid-area: nationality;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }
            }
          }

          &__textfield {
            &--checkinDatepicker {
              grid-area: checkin;
            }

            &--checkoutDatepicker {
              grid-area: checkout;
            }
          }

          &__btn--search {
            grid-area: search;

            > button {
              font-size: 13px;
              box-shadow: 0px 12px 15px -3px #5f5f5f3b;
              .v-btn__content span {
                font-size: 16px !important;
              }
            }
          }
        }
      }
    }

    .package-panel__dynamic-component {
      font-size: 13px;

      .package-form > form {
        @media (min-width: 1023px) {
          display: grid;
          grid-template-columns: repeat(1, 6fr) repeat(2, 3fr);
          grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end];
          grid-template-areas: "package checkin checkout" ". guests search";
          //grid-template-areas: "checkout checkin chekin""checkin checkin checkin";

          & > div {
            padding-top: 0px;
            padding-bottom: 0px;
            padding-left: 10px;
            padding-right: 0px;
          }
        }

        // padding: 0em 1em;
        display: grid;
        grid-template-columns: repeat(1, minmax(60px, 1fr));
        grid-auto-rows: minmax(70px, auto);
        grid-template-areas: "package" "checkin" "checkout" "guests" "search";
      }

      .package-form {
        font-size: 13px !important;

        &__input {
          &--hotel {
            grid-area: hotel;

            .v-autocomplete__content {
              left: 10px !important;
            }
          }
        }

        &__textfield--checkinDatepicker {
          grid-area: checkin;

          input {
            font-size: 13px;
          }
        }

        &__textfield--checkoutDatepicker {
          grid-area: checkout;

          input {
            font-size: 13px;
          }
        }

        &__menu--guests {
          @media (min-width: 1023px) {
            grid-area: guests;

            .v-input {
              grid-area: guest_input;
            }

            input {
              font-size: 13px !important;
            }

            .v-menu__content.theme--light.menuable__content__active {
              border-bottom-left-radius: 10px;
              border-bottom-right-radius: 10px;
            }

            .v-list-item {
              justify-content: space-between;
              min-height: 35px;

              &::after {
                display: none;
              }

              &:nth-child(3) {
                margin-bottom: 10px;
              }
            }

            .v-menu__content {
              & > div {
                & > button {
                  border: 1.5px solid rgb(46, 196, 182) !important;
                  color: rgb(46, 196, 182) !important;
                  background-color: white !important;
                  box-shadow: none !important;
                  width: 90%;
                  margin: 0.4rem 0;
                }
              }
            }
          }
        }

        &__btn--search {
          grid-area: search;

          > button {
            font-size: 13px;
            box-shadow: 0px 12px 15px -3px #5f5f5f3b;
            .v-btn__content span {
              font-size: 16px !important;
            }
          }
        }
      }

      .foreign-form > form {
        position: relative;
        display: grid;
        grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end];
        grid-template-columns: repeat(4, minmax(250px, 1fr));
        grid-template-areas: "hotel hotel checkin checkout" "guests nationality country search";

        & > div {
          padding-top: 0px;
          padding-bottom: 0px;
          padding-left: 10px;
          padding-right: 0px;
        }

        & > .foreign-form__textfield--checkinDatepicker {
          // padding-left: 0em;
          // padding-right: 0em;
          input {
            font-size: 13px;
          }
        }

        & > .foreign-form__textfield--checkoutDatepicker {
          // padding-left: 1em;
          // padding-right: 0em;
          input {
            font-size: 13px;
          }
        }

        @media (max-width: 1023px) {
          grid-template-columns: repeat(1, minmax(60px, 1fr));
          grid-auto-rows: minmax(70px, auto);
          grid-template-areas: "hotel" "checkin" "checkout" "guests" "nationality" "country" "search";
        }

        .foreign-form {
          &__input {
            &--hotel {
              grid-area: hotel;

              .v-autocomplete__content {
                left: 10px !important;
              }
            }
          }

          &__menu--guests {
            grid-area: guests;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }

              &:nth-child(3) {
                margin-bottom: 10px;
              }
            }

            .v-menu__content {
              & > div {
                & > button {
                  border: 1.5px solid rgb(46, 196, 182) !important;
                  color: rgb(46, 196, 182) !important;
                  background-color: white !important;
                  box-shadow: none !important;
                  width: 90%;
                  margin: 0.4rem 0;
                }
              }
            }
          }

          &__menu--country {
            grid-area: country;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }
            }
          }

          &__menu--nationality {
            grid-area: nationality;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }
            }
          }

          &__textfield {
            &--checkinDatepicker {
              grid-area: checkin;
            }

            &--checkoutDatepicker {
              grid-area: checkout;
            }
          }

          &__btn--search {
            grid-area: search;

            > button {
              font-size: 13px;
              box-shadow: 0px 12px 15px -3px #5f5f5f3b;
              .v-btn__content span {
                font-size: 16px !important;
              }
            }
          }
        }
      }
    }

    .flightAndHotel-panel__dynamic-component {
      font-size: 13px;

      .v-input--is-disabled {
        .v-input__slot > fieldset {
          border: 1px solid #cecece !important;
          border-radius: 8px;
        }
      }

      .oneway-form > form {
        & .error--text .v-input__slot > fieldset {
          border: 2px solid var(--v-error-base);
        }

        .v-btn {
          border-radius: 8px;
        }

        @media (max-width: 1023px) {
          .v-input__slot,
          .v-text-field__details {
            margin-bottom: 0px;
          }
        }

        position: relative;
        display: grid;
        grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end];
        grid-template-columns: repeat(2, minmax(25%, 1fr)) 0.005px repeat(
            2,
            minmax(25%, 1fr)
          );
        grid-template-areas: "origin origin button destination destination" "depdate retdate . guests search";
        &.advanced {
          grid-template-areas:
            "hotel hotel . checkin checkout"
            "origin origin button destination destination"
            "depdate retdate . guests search";
        }

        & > div {
          padding-top: 0px;
          padding-bottom: 0px;
          padding-left: 10px;
          padding-right: 0px;
        }

        & > .oneway-form__swap-button {
          justify-self: center;
          cursor: pointer;
        }

        & > .oneway-form__textfield--checkout,
        & > .oneway-form__textfield--checkin,
        & > .oneway-form__textfield--depdatepicker,
        & > .oneway-form__textfield--retdatepicker {
          input {
            font-size: 13px;
          }
        }

        @media (max-width: 1023px) {
          grid-template-columns: repeat(1, minmax(60px, 1fr));
          grid-auto-rows: minmax(70px, auto);
          grid-template-areas: "origin " "destination" "depdate" "retdate" "guests" "search";

          & > div:not(.oneway-form__swap-button) {
            padding: 0 10px;
            cursor: pointer;
          }
        }
        .oneway-form {
          &__input {
            &--origin {
              grid-area: origin;

              .v-autocomplete__content {
                left: 10px !important;
              }
            }
            &--hotel {
              grid-area: hotel;
            }

            &--destination {
              grid-area: destination;

              .v-autocomplete__content {
                left: 10px !important;
              }
            }
          }

          &__menu--guests {
            @media (min-width: 1023px) {
              grid-area: guests;

              .v-input {
                grid-area: guest_input;
              }

              input {
                font-size: 13px !important;
              }

              .v-menu__content.theme--light.menuable__content__active {
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
              }

              .v-list-item {
                justify-content: space-between;
                min-height: 35px;

                &::after {
                  display: none;
                }

                &:nth-child(3) {
                  margin-bottom: 10px;
                }
              }

              .v-menu__content {
                & > div {
                  & > button {
                    border: 1.5px solid rgb(46, 196, 182) !important;
                    color: rgb(46, 196, 182) !important;
                    background-color: white !important;
                    box-shadow: none !important;
                    width: 90%;
                    margin: 0.4rem 0;
                  }
                }
              }
            }
          }

          &__textfield {
            &--checkin {
              grid-area: checkin;
            }
            &--checkout {
              grid-area: checkout;
            }
            &--depdatepicker {
              grid-area: depdate;
            }

            &--retdatepicker,
            &--duration {
              grid-area: retdate;
            }
          }

          &__btn--search {
            grid-area: search;

            > button {
              font-size: 13px;
              box-shadow: 0px 12px 15px -3px #5f5f5f3b;
              .v-btn__content span {
                font-size: 16px !important;
              }
            }
          }

          &__swap-button {
            display: flex;
            justify-content: center;
            align-items: center;
            align-self: start;
            grid-area: button;
            cursor: pointer;

            @media (max-width: 1023px) {
              position: absolute;
              top: 9%;
            }

            > i {
              z-index: 10;
              top: 9px;
              background-color: white;
              border: solid 1px #616161;
              border-radius: 50%;
              padding: 6px;
              margin-top: 8px;

              @media (max-width: 1023px) {
                transform: rotate(90deg);
              }

              &:hover {
                background: #e6e6e6;
              }
            }
          }
        }
      }

      .twoway-form > .v-input--is-disabled {
        .v-input__slot > fieldset {
          border: 1px solid #cecece !important;
          border-radius: 8px;
        }
      }

      .twoway-form > form {
        & .error--text .v-input__slot > fieldset {
          border: 2px solid var(--v-error-base);
        }

        .v-btn {
          border-radius: 8px;
        }

        @media (max-width: 1023px) {
          .v-input__slot,
          .v-text-field__details {
            margin-bottom: 0px;
          }
        }

        position: relative;
        display: grid;
        grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end];
        grid-template-columns: repeat(2, minmax(25%, 1fr)) 0.005px repeat(
            2,
            minmax(25%, 1fr)
          );
        grid-template-areas: "origin origin button destination destination" "depdate retdate . guests search";

        & > div {
          padding-top: 0px;
          padding-bottom: 0px;
          padding-left: 10px;
          padding-right: 0px;
        }

        & > .twoway-form__swap-button {
          justify-self: center;
          cursor: pointer;
        }

        & > .twoway-form__textfield--depdatepicker {
          input {
            font-size: 13px;
          }
        }

        & > .twoway-form__textfield--retdatepicker {
          input {
            font-size: 13px;
          }
        }

        @media (max-width: 1023px) {
          grid-template-columns: repeat(1, minmax(60px, 1fr));
          grid-auto-rows: minmax(70px, auto);
          grid-template-areas: "origin " "destination" "depdate" "retdate" "guests" "search";

          & > div:not(.twoway-form__swap-button) {
            padding: 0 10px;
            cursor: pointer;
          }
        }

        .twoway-form {
          &__input {
            &--origin {
              grid-area: origin;

              input {
                padding: 0px 15px;
              }

              .v-autocomplete__content {
                left: 10px !important;
              }
            }

            &--destination {
              grid-area: destination;

              input {
                padding: 0px 15px;
              }

              .v-autocomplete__content {
                left: 10px !important;
              }
            }
          }

          &__menu--guests {
            grid-area: guests;

            input {
              font-size: 12px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }

              &:nth-child(3) {
                margin-bottom: 10px;
              }
            }
          }

          &__textfield {
            &--depdatepicker {
              grid-area: depdate;
            }

            &--retdatepicker {
              grid-area: retdate;
            }
          }

          &__btn--search {
            grid-area: search;

            > button {
              font-size: 13px;
              box-shadow: 0px 12px 15px -3px #5f5f5f3b;
              .v-btn__content span {
                font-size: 16px !important;
              }
            }
          }

          &__swap-button {
            display: flex;
            justify-content: center;
            align-items: center;
            align-self: start;
            grid-area: button;
            cursor: pointer;

            @media (max-width: 1023px) {
              position: absolute;
              top: 9%;
            }

            > i {
              z-index: 10;
              top: 9px;
              background-color: white;
              border: solid 1px #616161;
              border-radius: 50%;
              padding: 6px;
              margin-top: 8px;

              @media (max-width: 1023px) {
                transform: rotate(90deg);
              }

              &:hover {
                background: #e6e6e6;
              }
            }
          }
        }
      }
    }
    .cip-panel__dynamic-component {
      .cip-form__advanced {
        .cip-form__btn--search button {
          font-size: 13px;
          box-shadow: 0px 12px 15px -3px #5f5f5f3b;
          .v-btn__content span {
            font-size: 16px !important;
          }
        }
      }

      .cip-form {
        & .v-input__slot > fieldset {
          border-radius: 8px;
        }

        & .error--text .v-input__slot > fieldset {
          border: 2px solid var(--v-error-base);
        }

        .v-btn {
          border-radius: 8px;
        }

        position: relative;
        display: grid;
        grid-column-gap: 10px;
        grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end];
        grid-template-columns: 3fr 2.4fr 1.6fr;
        grid-template-areas: "origin cipType depdate" ". passengers search";

        & > .cip-form__textfield--depdatepicker {
          input {
            font-size: 13px;
          }
        }

        .cip-form {
          &__input {
            &--origin {
              grid-area: origin;
              .v-autocomplete__content {
                left: 10px !important;
              }
            }
          }

          &__cipType {
            grid-area: cipType;
          }
          &__menu--passengers {
            grid-area: passengers;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }
            }
          }

          &__textfield {
            &--depdatepicker {
              grid-area: depdate;
            }
          }

          &__btn--search {
            grid-area: search;

            > button {
              font-size: 13px;
              box-shadow: 0px 12px 15px -3px #5f5f5f3b;
              .v-btn__content span {
                font-size: 16px !important;
              }
            }
          }
        }
      }
    }

    .v-divider {
      max-width: 96%;
      margin: auto !important;
    }
  }

  &.theme1 {
    margin: auto;
    .v-card.v-sheet.theme--light {
      box-shadow: none;
      border-radius: 20px;
    }
    .icon-location,
    .icon-calendar,
    .icon-profile {
      color: #fff !important;
    }
    .defaultMenu {
      background: #fff !important;
    }
    .v-label:not(.v-label--is-disabled) {
      color: #fff !important;
    }
    .v-tabs-bar {
      height: 20%;
      border-radius: 20px;
      background-color: transparent;
    }

    > div .v-tab {
      padding: 10px 0 !important;
      font-size: 13px;
      letter-spacing: 0px !important;
      max-width: 15%;

      @media (max-width: 960px) {
        max-width: 14%;
        min-width: 14;
      }

      @media (max-width: 600px) {
        max-width: 12%;
        min-width: 12%;
        margin-right: 8px !important;
        margin-left: 8px !important;
      }
      &.flight {
        > i {
          transform: unset !important;
        }
      }
      > span {
        margin-top: 13px;
        color: #fff;
      }
      > i {
        margin-left: 0 !important;
        margin-right: 0 !important;
        background: #000;
        border-radius: 50%;
        padding: 0.75em;
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85) inset;
        border: 8px solid #000;
        color: #fff !important;
      }

      > svg {
        height: 80px;
        padding: 20px;
        width: 80px;
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: unset !important;
        background: #000;
        box-shadow: 0 0 0 3px #fff inset;
        border: 8px solid #000;
        border-radius: 50%;
        fill: #fff;
      }

      &--active {
        // border-bottom: 2px solid var(--v-primary-base) !important;
        > span {
          color: var(--v-primary-base) !important;
        }
        i {
          color: var(--v-primary-base) !important;
          box-shadow: 0 0 0 3px var(--v-primary-base) inset;
        }
        > svg {
          box-shadow: 0 0 0 3px var(--v-primary-base) inset;
          fill: var(--v-primary-base);
        }
        &:hover,
        &:focus {
          &::before {
            opacity: 0;
          }
        }
      }
      &:hover,
      &:focus {
        &::before {
          opacity: 0;
        }
      }
    }

    .flight-panel__radiogroup,
    .hotel-panel__radiogroup {
      margin: 10px 0;

      & > div > div > div > div {
        display: flex;
        flex-direction: row;
        font-size: 13px;
      }
    }

    .flight-panel__radio {
      &--oneway,
      &--twoway,
      &--multiway {
        & > div > label {
          margin: 0;
          color: #fff !important;
        }
        .v-input--selection-controls__input > i {
          color: #fff;
        }
        margin: 5px;
      }
    }

    .hotel-panel__radio {
      &--domestic,
      &--foreign {
        & > div > label {
          margin: 0;
          color: #fff;
        }

        margin: 5px;
      }
    }

    .cip-panel__radiogroup {
      margin: 10px 0;
    }
    .cip-panel__radio {
      &--oneway,
      &--twoway {
        & > div > label {
          margin: 0;
          color: #fff;
        }

        .v-input--selection-controls__input > i {
          color: #fff;
        }
        margin-top: 20px;
        margin-bottom: 10px;
      }
    }

    .flight-panel__select-container {
      display: flex !important;
      justify-content: space-between;
    }

    .flight-panel__checkboxes {
      width: 50%;

      .v-input--checkbox {
        align-items: center;
      }
    }

    .flight-panel__dynamic-component {
      font-size: 13px;

      .v-input--is-disabled {
        .v-input__slot > fieldset {
          border: 1px solid #cecece !important;
          border-radius: 8px;
        }
      }

      .oneway-form > form {
        & .v-input__slot > fieldset {
          border: 1px solid #fff;
          border-radius: 8px;
        }

        // & .v-input--is-focused .v-input__slot>fieldset {
        //   border: 2px solid var(--v-primary-base);
        // }

        & .error--text .v-input__slot > fieldset {
          border: 2px solid var(--v-error-base);
        }

        .v-btn {
          border-radius: 3px;
        }

        @media (max-width: 1023px) {
          .v-input__slot,
          .v-text-field__details {
            margin-bottom: 0px;
          }
        }

        position: relative;
        display: grid;
        grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end];
        grid-template-columns: repeat(2, minmax(25%, 1fr)) 0.005px repeat(
            2,
            minmax(25%, 1fr)
          );
        grid-template-areas: "origin origin button destination destination" "depdate retdate . passengers search";

        & > div {
          padding-top: 0px;
          padding-bottom: 0px;
          padding-left: 10px;
          padding-right: 0px;
        }

        & > .oneway-form__swap-button {
          justify-self: center;
          cursor: pointer;
        }

        & > .oneway-form__textfield--depdatepicker {
          input {
            color: #fff !important;
            font-size: 13px;
          }
        }

        & > .oneway-form__textfield--retdatepicker {
          input {
            color: #fff !important;
            font-size: 13px;
          }
        }

        @media (max-width: 1023px) {
          grid-template-columns: repeat(1, minmax(60px, 1fr));
          grid-auto-rows: minmax(70px, auto);
          grid-template-areas: "origin " "destination" "depdate" "retdate" "passengers" "search";

          & > div:not(.oneway-form__swap-button) {
            padding: 0 10px;
            cursor: pointer;
          }
        }

        .oneway-form {
          &__input {
            &--origin {
              grid-area: origin;

              .v-autocomplete__content {
                left: 10px !important;
              }
            }

            &--destination {
              grid-area: destination;

              .v-autocomplete__content {
                left: 10px !important;
              }
            }
          }

          &__menu--passengers {
            grid-area: passengers;

            input {
              font-size: 13px !important;
              color: #fff !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }
            }
          }

          &__textfield {
            &--depdatepicker {
              grid-area: depdate;
            }

            &--retdatepicker {
              grid-area: retdate;
            }
          }

          &__btn--search {
            grid-area: search;

            > button {
              font-size: 13px;
              box-shadow: 0px 12px 15px -3px #5f5f5f3b;
            }
          }

          &__swap-button {
            display: flex;
            justify-content: center;
            align-items: center;
            align-self: start;
            grid-area: button;
            cursor: pointer;

            @media (max-width: 1023px) {
              position: absolute;
              top: 9%;
            }

            > i {
              z-index: 10;
              top: 9px;
              background-color: white;
              border: solid 1px #616161;
              border-radius: 50%;
              padding: 6px;
              margin-top: 8px;

              @media (max-width: 1023px) {
                transform: rotate(90deg);
              }

              &:hover {
                background: #e6e6e6;
              }
            }
          }
        }
      }

      .twoway-form > .v-input--is-disabled {
        .v-input__slot > fieldset {
          border: 1px solid #fff !important;
          border-radius: 8px;
        }
      }

      .twoway-form > form {
        & .v-input__slot > fieldset {
          border: 1px solid #fff;
          border-radius: 8px;
        }

        // & .v-input--is-focused .v-input__slot>fieldset {
        //   border: 2px solid var(--v-primary-base);
        // }

        & .error--text .v-input__slot > fieldset {
          border: 2px solid var(--v-error-base);
        }

        .v-btn {
          border-radius: 3px;
        }

        @media (max-width: 1023px) {
          .v-input__slot,
          .v-text-field__details {
            margin-bottom: 0px;
          }
        }

        position: relative;
        display: grid;
        grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end];
        grid-template-columns: repeat(2, minmax(25%, 1fr)) 0.005px repeat(
            2,
            minmax(25%, 1fr)
          );
        grid-template-areas: "origin origin button destination destination" "depdate retdate . passengers search";

        & > div {
          padding-top: 0px;
          padding-bottom: 0px;
          padding-left: 10px;
          padding-right: 0px;
        }

        & > .twoway-form__swap-button {
          justify-self: center;
          cursor: pointer;
        }

        & > .twoway-form__textfield--depdatepicker {
          // padding-left: 0em;
          // padding-right: 0em;
          input {
            color: #fff !important;
            font-size: 13px;
          }
        }

        & > .twoway-form__textfield--retdatepicker {
          // padding-left: 1em;
          // padding-right: 0em;
          input {
            color: #fff !important;
            font-size: 13px;
          }
        }

        @media (max-width: 1023px) {
          grid-template-columns: repeat(1, minmax(60px, 1fr));
          grid-auto-rows: minmax(70px, auto);
          grid-template-areas: "origin " "destination" "depdate" "retdate" "passengers" "search";

          & > div:not(.twoway-form__swap-button) {
            padding: 0 10px;
            cursor: pointer;
          }
        }

        .twoway-form {
          &__input {
            &--origin {
              grid-area: origin;

              input {
                padding: 0px 15px;
              }

              .v-autocomplete__content {
                left: 10px !important;
              }
            }

            &--destination {
              grid-area: destination;

              input {
                padding: 0px 15px;
              }

              .v-autocomplete__content {
                left: 10px !important;
              }
            }
          }

          &__menu--passengers {
            grid-area: passengers;

            input {
              font-size: 13px !important;
              color: #fff !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }

              &:nth-child(3) {
                margin-bottom: 10px;
              }
            }
          }

          &__textfield {
            &--depdatepicker {
              grid-area: depdate;
            }

            &--retdatepicker {
              grid-area: retdate;
            }
          }

          &__btn--search {
            grid-area: search;

            > button {
              font-size: 13px;
              box-shadow: 0px 12px 15px -3px #5f5f5f3b;
            }
          }

          &__swap-button {
            display: flex;
            justify-content: center;
            align-items: center;
            align-self: start;
            grid-area: button;
            cursor: pointer;

            @media (max-width: 1023px) {
              position: absolute;
              top: 9%;
            }

            > i {
              z-index: 10;
              top: 9px;
              background-color: white;
              border: solid 1px #616161;
              border-radius: 50%;
              padding: 6px;
              margin-top: 8px;

              @media (max-width: 1023px) {
                transform: rotate(90deg);
              }

              &:hover {
                background: #e6e6e6;
              }
            }
          }
        }
      }

      .multiway-form > form {
        display: grid;
        grid-template-rows: [row1-start] 1fr [row1-end row2-start] min-content [row2-end];
        grid-template-columns: 5% minmax(30%, 1fr) 0.005px minmax(30%, 1fr) 25%;
        // grid-template-columns: repeat(6, 1fr);
        grid-template-areas: "formsegment formsegment formsegment formsegment formsegment" ". add passengers passengers search";

        & > div:not(.multiway-form__segment) {
          padding: 10px;
          cursor: pointer;
        }

        & .v-input__slot > fieldset {
          border: 1px solid #fff;
          border-radius: 8px;
        }

        // & .v-input--is-focused .v-input__slot>fieldset {
        //   border: 2px solid var(--v-primary-base);
        // }

        & .error--text .v-input__slot > fieldset {
          border: 2px solid var(--v-error-base);
        }

        .v-btn {
          border-radius: 3px;
        }

        & > div {
          padding-top: 0px;
          padding-bottom: 0px;
          padding-left: 10px;
          padding-right: 0px;
        }

        // & > .multiway-form__swap-button {
        //   justify-self: center;
        //   cursor: pointer;
        // }
        & > .multiway-form__textfield--depdatepicker {
          // padding-left: 0em;
          // padding-right: 0em;
          input {
            color: #fff !important;
            font-size: 13px;
          }
        }

        & > .multiway-form__textfield--retdatepicker {
          // padding-left: 1em;
          // padding-right: 0em;
          input {
            color: #fff !important;
            font-size: 13px;
          }
        }

        .multiway-form {
          &__segment {
            grid-area: formsegment;
            padding: 0px;

            &-row {
              > div {
                position: relative;
                display: grid;
                grid-template-rows: [row1-start] 1fr;
                grid-template-columns:
                  5% minmax(30%, 1fr) 0.005px minmax(30%, 1fr)
                  25%;
                grid-template-areas: "remove origin button destination depdatepicker";

                &
                  > div:not(.multiway-form__segment-row__swap-button):not(
                    .multiway-form__segment-row__btn--remove
                  ) {
                  padding: 0 10px;
                  cursor: pointer;
                }
              }

              &__input {
                &--origin {
                  grid-area: origin;

                  input {
                    padding: 0px 15px;
                  }

                  .v-autocomplete__content {
                    left: 10px !important;
                  }
                }

                &--destination {
                  grid-area: destination;

                  input {
                    padding: 0px 15px;
                  }

                  .v-autocomplete__content {
                    left: 10px !important;
                  }
                }
              }

              &__btn--remove {
                grid-area: remove;

                > .v-btn {
                  min-width: 35px;
                  height: 35px;
                }
              }

              &__textfield--depdatepicker {
                grid-area: depdatepicker;
              }

              &__swap-button {
                display: flex;
                justify-content: center;
                align-items: center;
                align-self: start;
                grid-area: button;
                cursor: pointer;

                @media (max-width: 991px) {
                  position: absolute;
                }

                > i {
                  z-index: 10;
                  top: 9px;
                  background-color: white;
                  border: solid 1px #616161;
                  border-radius: 50%;
                  padding: 6px;
                  margin-top: 8px;

                  @media (max-width: 991px) {
                    transform: rotate(90deg);
                  }

                  &:hover {
                    background: #e6e6e6;
                  }
                }
              }
            }
          }

          &__btn--add {
            grid-area: add;
            display: flex;

            > .v-btn {
              min-width: 50%;
              height: 56px;
              margin: 0px;
            }
          }

          &__btn--search {
            grid-area: search;
          }

          &__menu--passengers {
            grid-area: passengers;
            padding-right: 0px !important;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }

              &:nth-child(3) {
                margin-bottom: 10px;
              }
            }
          }
        }
      }
    }

    .hotel-panel__dynamic-component {
      font-size: 13px;

      .domestic-form > form {
        & .v-input__slot > fieldset {
          border: 1px solid #fff;
          border-radius: 8px;
        }
        @media (min-width: 1023px) {
          display: grid;
          grid-template-columns: minmax(250px, 2fr) repeat(
              2,
              minmax(250px, 1fr)
            );
          grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end];
          grid-template-areas: "hotel checkin checkout" ". guests search";
          //grid-template-areas: "checkout checkin chekin""checkin checkin checkin";

          & > div {
            padding-top: 0px;
            padding-bottom: 0px;
            padding-left: 10px;
            padding-right: 0px;
          }
        }

        // padding: 0em 1em;
        display: grid;
        grid-template-columns: repeat(1, minmax(60px, 1fr));
        grid-auto-rows: minmax(70px, auto);
        grid-template-areas: "hotel" "checkin" "checkout" "guests" "search";
      }

      // >*:not(.oneway-form__swap-button) {
      //     padding: 0px .5em;
      // }

      .domestic-form {
        font-size: 13px !important;

        &__input {
          &--hotel {
            grid-area: hotel;

            .v-autocomplete__content {
              left: 10px !important;
            }
          }
        }

        &__textfield--checkinDatepicker {
          grid-area: checkin;

          input {
            color: #fff !important;
            font-size: 13px;
          }
        }

        &__textfield--checkoutDatepicker {
          grid-area: checkout;

          input {
            color: #fff !important;
            font-size: 13px;
          }
        }

        &__menu--guests {
          @media (min-width: 1023px) {
            grid-area: guests;

            .v-input {
              grid-area: guest_input;
            }

            input {
              font-size: 13px !important;
              color: #fff !important;
            }

            .v-menu__content.theme--light.menuable__content__active {
              border-bottom-left-radius: 10px;
              border-bottom-right-radius: 10px;
            }

            .v-list-item {
              justify-content: space-between;
              min-height: 35px;

              &::after {
                display: none;
              }

              &:nth-child(3) {
                margin-bottom: 10px;
              }
            }

            .v-menu__content {
              & > div {
                & > button {
                  border: 1.5px solid rgb(46, 196, 182) !important;
                  color: rgb(46, 196, 182) !important;
                  background-color: white !important;
                  box-shadow: none !important;
                  width: 90%;
                  margin: 0.4rem 0;
                }
              }
            }
          }
        }

        &__btn--search {
          grid-area: search;

          > button {
            font-size: 13px;
            box-shadow: 0px 12px 15px -3px #5f5f5f3b;
          }
        }
      }

      .foreign-form > form {
        position: relative;
        display: grid;
        grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end];
        grid-template-columns: repeat(4, minmax(250px, 1fr));
        grid-template-areas: "hotel hotel checkin checkout" "guests nationality country search";

        & > div {
          padding-top: 0px;
          padding-bottom: 0px;
          padding-left: 10px;
          padding-right: 0px;
        }

        & > .foreign-form__textfield--checkinDatepicker {
          // padding-left: 0em;
          // padding-right: 0em;
          input {
            font-size: 13px;
          }
        }

        & > .foreign-form__textfield--checkoutDatepicker {
          // padding-left: 1em;
          // padding-right: 0em;
          input {
            font-size: 13px;
          }
        }

        @media (max-width: 1023px) {
          grid-template-columns: repeat(1, minmax(60px, 1fr));
          grid-auto-rows: minmax(70px, auto);
          grid-template-areas: "hotel" "checkin" "checkout" "guests" "nationality" "country" "search";
        }

        .foreign-form {
          &__input {
            &--hotel {
              grid-area: hotel;

              .v-autocomplete__content {
                left: 10px !important;
              }
            }
          }

          &__menu--guests {
            grid-area: guests;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }

              &:nth-child(3) {
                margin-bottom: 10px;
              }
            }

            .v-menu__content {
              & > div {
                & > button {
                  border: 1.5px solid rgb(46, 196, 182) !important;
                  color: rgb(46, 196, 182) !important;
                  background-color: white !important;
                  box-shadow: none !important;
                  width: 90%;
                  margin: 0.4rem 0;
                }
              }
            }
          }

          &__menu--country {
            grid-area: country;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }
            }
          }

          &__menu--nationality {
            grid-area: nationality;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }
            }
          }

          &__textfield {
            &--checkinDatepicker {
              grid-area: checkin;
            }

            &--checkoutDatepicker {
              grid-area: checkout;
            }
          }

          &__btn--search {
            grid-area: search;

            > button {
              font-size: 13px;
              box-shadow: 0px 12px 15px -3px #5f5f5f3b;
            }
          }
        }
      }
    }

    .cip-panel__dynamic-component {
      .cip-form__advanced {
        .cip-form__btn--search button {
          font-size: 13px;
          box-shadow: 0px 12px 15px -3px #5f5f5f3b;
        }
        & .v-input__slot > fieldset {
          border: 1px solid #fff;
          border-radius: unset;
        }
        .cip-form__moreItems {
          > button {
            color: #fff;
          }
        }
        .cip-form-travelType,
        .cip-form-flightType {
          .v-input__slot {
            background: #fff;
          }
        }
        .cip-form__btn--search {
          button {
            border-radius: 3px !important;
          }
        }
        .v-btn {
          i {
            color: #fff;
          }
        }
      }

      .cip-form {
        & .v-input__slot > fieldset {
          border: 1px solid #fff;
          border-radius: 8px;
        }

        & .error--text .v-input__slot > fieldset {
          border: 2px solid var(--v-error-base);
        }

        .v-btn {
          border-radius: 8px;
        }

        .cip-form__btn--search {
          button {
            border-radius: 3px !important;
          }
        }

        position: relative;
        display: grid;
        grid-column-gap: 10px;
        grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end];
        grid-template-columns: 3fr 2fr 2fr;
        grid-template-areas: "origin depdate passengers" ".  . search";

        & > .cip-form__textfield--depdatepicker {
          input {
            font-size: 13px;
          }
        }

        .cip-form {
          &__input {
            &--origin {
              grid-area: origin;

              .v-autocomplete__content {
                left: 10px !important;
              }
            }
          }

          &-travelType {
            grid-area: travelType;
          }

          &-flightType {
            grid-area: flightType;
          }

          &__menu--passengers {
            grid-area: passengers;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }
            }
          }

          &__textfield {
            &--depdatepicker {
              grid-area: depdate;
            }
          }

          &__btn--search {
            grid-area: search;

            > button {
              font-size: 13px;
              box-shadow: 0px 12px 15px -3px #5f5f5f3b;
            }
          }
        }
      }
    }

    .v-divider {
      max-width: 96%;
      margin: auto !important;
      display: none;
    }
  }

  &.theme2 {
    padding: 2em 0;
    box-shadow: 0 1px 6px 0 #00000040;
    border-radius: 30px;
    background: #ffffffa1;
    .defaultMenu {
      background: #fff !important;
    }

    .v-card {
      box-shadow: unset;
      .v-divider {
        display: none;
      }

      .v-tabs-bar {
        justify-content: center;
        background: transparent;

        .v-slide-group__wrapper {
          display: flex;
          justify-content: center;
          flex: unset;
        }

        .v-slide-group__content {
          width: unset;

          > .tabs {
            min-width: 100px;
            background: transparent !important;
            border-radius: 10px;
            border: 1px solid grey;
            margin: 2px;
            overflow: hidden;
            transition: all 0.4s;
            font-size: 0.9rem !important;
            padding: 0;
            flex-direction: column-reverse !important;

            &:hover {
              color: $secondary_color_fly !important;

              > i {
                color: $secondary_color_fly !important;
              }
            }

            &::before {
              content: none;
            }

            &.v-tab--active {
              border-color: grey !important;
              color: $secondary_color_fly !important;

              > i {
                color: $secondary_color_fly !important;
              }

              &::before {
                content: "";
                background: linear-gradient(
                  45deg,
                  $primary_color_fly 0%,
                  lighten($primary_color_fly, 35%) 100%
                );
                z-index: -1;
                opacity: 1;
              }
            }

            > i {
              color: $primary_color_fly;
            }

            &.flightandhotel {
              > svg {
                fill: black;
              }

              &:hover {
                > svg {
                  fill: #dda627;
                }
              }

              &.v-tab--active {
                > svg {
                  fill: #dda627;
                }
              }
            }
          }
        }

        @media (min-width: 768px) {
          height: 100px !important;

          .v-slide-group__content > .tabs {
            flex: unset;

            &:not(:last-child):not(:first-child) {
              margin: 0 0 0 5px;
            }

            &:last-child {
              margin: 0 0 0 auto;
            }
          }
        }
      }
    }

    .flight-panel__radiogroup {
      & > div > div > div > div {
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin: 1em 0;
      }
    }

    .flight-panel__radio {
      &--oneway,
      &--twoway,
      &--multiway {
        & > div {
          &.v-item--active {
            > label {
              background: linear-gradient(
                45deg,
                $primary_color_fly 0%,
                lighten($primary_color_fly, 35%) 100%
              );
              color: $secondary_color_fly !important;

              .caption {
                color: $secondary_color_fly !important;
              }
            }
          }

          > label {
            margin: 0;
            border: 1px solid grey;
            padding: 2px 0;
            border-radius: 7px;
            display: flex;
            justify-content: center;
            min-width: 85px;
            background: #fff;

            .caption {
              color: grey !important;
            }
          }

          > .v-input--selection-controls__input {
            display: none;
          }
        }

        margin: 0.5em 0.25em;
      }
    }

    .cip-panel__radio {
      &--oneway,
      &--twoway {
        & > div > label {
          margin: 0;
        }

        margin-top: 20px;
        margin-bottom: 10px;
      }
    }

    .hotel-panel__dynamic-component {
      font-size: 13px;

      .domestic-form > form {
        @media (min-width: 1023px) {
          display: grid;
          grid-template-columns: repeat(1, 6fr) repeat(2, 3fr);
          grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end];
          grid-template-areas: "hotel checkin checkout" ". guests search";
          //grid-template-areas: "checkout checkin chekin""checkin checkin checkin";

          & > div {
            padding-top: 0px;
            padding-bottom: 0px;
            padding-left: 10px;
            padding-right: 0px;
          }
        }

        // padding: 0em 1em;
        display: grid;
        grid-template-columns: repeat(1, minmax(60px, 1fr));
        grid-auto-rows: minmax(70px, auto);
        grid-template-areas: "hotel" "checkin" "checkout" "guests" "search";
      }

      .domestic-form {
        font-size: 13px !important;

        &__input {
          &--hotel {
            grid-area: hotel;

            .v-autocomplete__content {
              left: 10px !important;
            }
          }
        }

        &__textfield--checkinDatepicker {
          grid-area: checkin;

          input {
            font-size: 13px;
          }
        }

        &__textfield--checkoutDatepicker {
          grid-area: checkout;

          input {
            font-size: 13px;
          }
        }

        &__menu--guests {
          @media (min-width: 1023px) {
            grid-area: guests;

            .v-input {
              grid-area: guest_input;
            }

            input {
              font-size: 13px !important;
            }

            .v-menu__content.theme--light.menuable__content__active {
              border-bottom-left-radius: 10px;
              border-bottom-right-radius: 10px;
            }

            .v-list-item {
              justify-content: space-between;
              min-height: 35px;

              &::after {
                display: none;
              }

              &:nth-child(3) {
                margin-bottom: 10px;
              }
            }

            .v-menu__content {
              & > div {
                & > button {
                  border: 1.5px solid rgb(46, 196, 182) !important;
                  color: rgb(46, 196, 182) !important;
                  background-color: white !important;
                  box-shadow: none !important;
                  width: 90%;
                  margin: 0.4rem 0;
                }
              }
            }
          }
        }

        &__btn--search {
          grid-area: search;

          > button {
            font-size: 13px;
            box-shadow: 0px 12px 15px -3px #5f5f5f3b;
            .v-btn__content span {
              font-size: 16px !important;
            }
          }
        }
      }

      .foreign-form > form {
        position: relative;
        display: grid;
        grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end];
        grid-template-columns: repeat(4, minmax(250px, 1fr));
        grid-template-areas: "hotel hotel checkin checkout" "guests nationality country search";

        & > div {
          padding-top: 0px;
          padding-bottom: 0px;
          padding-left: 10px;
          padding-right: 0px;
        }

        & > .foreign-form__textfield--checkinDatepicker {
          // padding-left: 0em;
          // padding-right: 0em;
          input {
            font-size: 13px;
          }
        }

        & > .foreign-form__textfield--checkoutDatepicker {
          // padding-left: 1em;
          // padding-right: 0em;
          input {
            font-size: 13px;
          }
        }

        @media (max-width: 1023px) {
          grid-template-columns: repeat(1, minmax(60px, 1fr));
          grid-auto-rows: minmax(70px, auto);
          grid-template-areas: "hotel" "checkin" "checkout" "guests" "nationality" "country" "search";
        }

        .foreign-form {
          &__input {
            &--hotel {
              grid-area: hotel;

              .v-autocomplete__content {
                left: 10px !important;
              }
            }
          }

          &__menu--guests {
            grid-area: guests;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }

              &:nth-child(3) {
                margin-bottom: 10px;
              }
            }

            .v-menu__content {
              & > div {
                & > button {
                  border: 1.5px solid rgb(46, 196, 182) !important;
                  color: rgb(46, 196, 182) !important;
                  background-color: white !important;
                  box-shadow: none !important;
                  width: 90%;
                  margin: 0.4rem 0;
                }
              }
            }
          }

          &__menu--country {
            grid-area: country;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }
            }
          }

          &__menu--nationality {
            grid-area: nationality;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }
            }
          }

          &__textfield {
            &--checkinDatepicker {
              grid-area: checkin;
            }

            &--checkoutDatepicker {
              grid-area: checkout;
            }
          }

          &__btn--search {
            grid-area: search;

            > button {
              font-size: 13px;
              box-shadow: 0px 12px 15px -3px #5f5f5f3b;
              .v-btn__content span {
                font-size: 16px !important;
              }
            }
          }
        }
      }
    }

    .flight-panel__dynamic-component {
      font-size: 13px;

      .oneway-form > form {
        @media (min-width: 1023px) {
          display: grid;
          grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end row3-start] 1fr [row3-end];
          grid-template-columns: 1fr 1fr 0px 1fr 1fr;
          grid-template-areas: "origin  origin swapbutton destination destination" "depdatepicker depdatepicker . passengers passengers" ". search search search .";
        }

        //padding: 0em 1em;
        display: grid;
        grid-template-columns: repeat(1, minmax(6em, 1fr));
        grid-template-rows:
          minmax(5em, auto) 30px minmax(5em, auto) minmax(5em, auto)
          minmax(5em, auto) minmax(5em, auto) minmax(5em, auto);
        grid-template-areas: "origin" "swapbutton" "destination" "depdatepicker" "passengers" "search";

        > *:not(.oneway-form__swap-button) {
          padding: 0px 0.5em;

          .v-input {
            &__slot {
              //min-height: 35px !important;
              border-radius: 7px;

              input {
                padding: 0 2rem 0 0;
              }

              fieldset {
                padding: 0;

                legend {
                  margin-right: 17px;
                }
              }

              .v-input__append-inner {
                margin-right: unset;
                padding-right: 4px;
                margin: 0 0 0 100%;
                align-self: center;
                position: absolute;

                > i {
                  margin: 0;
                  color: $secondary_color_fly !important;
                }
              }

              .v-select__slot {
                .v-select__selections {
                  > .body-2 {
                    width: 130px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  }

                  > input {
                    padding: 0;
                    min-width: 5px;
                  }
                }
              }

              .v-label {
                transform: translateX(50%);
                padding: 0;
                margin-right: 25%;

                &.v-label--active {
                  transform: translateY(-25px) scale(0.75) translateX(50%);
                }
              }
            }
          }
        }

        .oneway-form {
          font-size: 1.4em !important;

          &__input {
            &--origin {
              grid-area: origin;

              .v-input {
                &__slot {
                  .v-label {
                    margin-right: 10%;
                  }
                }
              }
            }

            &--destination {
              @media (max-width: 1023px) {
                // padding-top: 10px;
              }

              grid-area: destination;

              .v-input {
                &__slot {
                  .v-label {
                    margin-right: 11%;
                  }
                }
              }
            }
          }

          &__swap-button {
            display: flex;
            justify-content: center;
            align-items: center;
            grid-area: swapbutton;
            align-self: start;
            cursor: pointer;

            > i {
              @media (max-width: 1023px) {
                transform: rotate(90deg);
                margin-top: -0.8em;
              }

              margin-top: 0.4em;
              padding: 6px;
              z-index: 10;
              top: 9px;
              background: $secondary_color_fly;
              border-radius: 7px;
              color: $primary_color_fly;
            }
          }

          &__textfield--depdatepicker {
            grid-area: depdatepicker;

            .v-input {
              &__slot {
                .v-label {
                  margin-right: 7%;
                }
              }

              &__append-inner {
                > i {
                  margin-right: 10px !important;
                }
              }
            }
          }

          &__textfield--retdatepicker {
            display: none;
          }

          &__menu--passengers {
            .v-text-field__slot {
              > input {
                padding-right: 2rem;
                color: $light_text_fly;
              }

              .v-label {
                margin-right: 11%;
              }
            }

            .v-input {
              &__append-inner {
                position: unset !important;
                > button {
                  margin-right: 10px !important;
                  color: $secondary_color_fly !important;
                }
              }
            }

            @media (min-width: 1023px) {
              grid-area: passengers;
            }
          }

          &__btn--search {
            grid-area: search;

            > button {
              background: linear-gradient(
                45deg,
                $primary_color_fly 0%,
                lighten($primary_color_fly, 35%) 100%
              );
              grid-area: submit;
              color: $secondary_color_fly;
              font-size: 1em !important;
              border-radius: 7px;
              box-shadow: unset;
              width: 50% !important;

              .v-icon {
                display: none;
              }
            }

            // @media (min-width: 992px) {
            //     display: grid;
            //     // grid-template-columns: repeat(5, 1fr);
            //     grid-template-areas: ". . submit . .";
            // }
            @media (min-width: 1023px) {
              grid-template-columns: repeat(3, 1fr);
              grid-template-areas: ". submit .";
            }

            @media (min-width: 1200px) {
              grid-template-columns: repeat(5, 1fr);
              grid-template-areas: ". . submit . .";
            }
          }
        }
      }

      .twoway-form > form {
        position: relative;
        display: grid;
        grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end row3-start] 1fr [row3-end];
        grid-template-columns: 1fr 1fr 0px 1fr 1fr;
        grid-template-areas: "origin origin button destination destination" "depdate retdate . passengers passengers" ". search search search .";

        @media (max-width: 1023px) {
          grid-template-columns: repeat(1, minmax(6em, 1fr));
          grid-template-rows:
            minmax(5em, auto) 30px minmax(5em, auto) minmax(5em, auto)
            minmax(5em, auto) minmax(5em, auto) minmax(5em, auto);
          grid-template-areas: "origin " "button" "destination" "depdate" "retdate" "passengers" "search";

          & > div:not(.twoway-form__swap-button) {
            padding: 0 1em;
          }
        }

        > *:not(.twoway-form__swap-button) {
          padding: 0px 0.5em;

          .v-input {
            &__slot {
              //min-height: 35px !important;
              border-radius: 7px;

              input {
                padding: 0 2rem 0 0;

                &::placeholder,
                &::-webkit-input-placeholder,
                &::-moz-placeholder,
                &::-ms-input-placeholder {
                  color: $light_text_fly !important;
                  opacity: 1;
                }
              }

              fieldset {
                padding: 0;

                legend {
                  margin-right: 17px;
                }
              }

              .v-input__append-inner {
                margin-right: unset;
                padding-right: unset;
                margin: 0 0 0 100%;
                align-self: center;
                position: absolute;

                > i {
                  margin: 0;
                  color: $secondary_color_fly !important;
                }
              }

              .v-select__slot {
                .v-select__selections {
                  > .body-2 {
                    width: 130px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  }

                  > input {
                    padding: 0;
                    min-width: 5px;
                  }
                }

                //input { display: none; }
              }

              .v-label {
                transform: translateX(50%);
                padding: 0;
                margin-right: 25%;

                &.v-label--active {
                  transform: translateY(-25px) scale(0.75) translateX(50%);
                }
              }
            }
          }
        }

        .twoway-form {
          &__input {
            &--origin {
              grid-area: origin;

              .v-input {
                &__slot {
                  .v-label {
                    margin-right: 10%;
                  }
                }
              }
            }

            &--destination {
              grid-area: destination;

              .v-input {
                &__slot {
                  .v-label {
                    margin-right: 11%;
                  }
                }
              }
            }
          }

          &__menu--passengers {
            .v-text-field__slot {
              > input {
                padding-right: 2rem;
                color: $light_text_fly;
              }

              .v-label {
                margin-right: 11%;
              }
            }

            .v-input {
              &__append-inner {
                position: unset !important;
                > button {
                  margin-right: 10px !important;
                  color: $secondary_color_fly !important;
                }
              }
            }

            grid-area: passengers;
          }

          &__textfield {
            &--depdatepicker {
              grid-area: depdate;
              padding-left: 0;

              .v-input__slot {
                input {
                  font-size: 0.65em !important;
                }

                @media (min-width: 1025px) {
                  border-top-left-radius: 0;
                  border-bottom-left-radius: 0;
                }

                .v-text-field__slot {
                  label {
                    padding-right: 1.5em !important;
                  }

                  .v-label {
                    margin-right: 12%;
                  }
                }

                .v-input__append-inner {
                  > i {
                    margin-right: 10px;
                  }
                }

                fieldset {
                  > legend {
                    width: 58px !important;
                  }
                }
              }
            }

            &--retdatepicker {
              grid-area: retdate;
              padding-right: 0;

              .v-input__slot {
                input {
                  font-size: 0.65em !important;
                }

                @media (min-width: 1025px) {
                  border-top-right-radius: 0;
                  border-bottom-right-radius: 0;
                }

                .v-text-field__slot {
                  label {
                    padding-right: 2.8em !important;
                  }

                  .v-label {
                    margin-right: 12%;
                  }
                }

                .v-input__append-inner {
                  > i {
                    margin-right: 10px;
                  }
                }

                fieldset {
                  > legend {
                    width: 69px !important;
                  }
                }
              }
            }
          }

          &__btn--search {
            grid-area: search;

            > button {
              background: linear-gradient(
                45deg,
                $primary_color_fly 0%,
                lighten($primary_color_fly, 35%) 100%
              );
              grid-area: submit;
              color: $secondary_color_fly;
              font-size: 1em !important;
              border-radius: 7px;
              box-shadow: unset;
              width: 50% !important;

              .v-icon {
                display: none;
              }
            }

            // @media (min-width: 992px) {
            //     display: grid;
            //     grid-template-columns: repeat(5, 1fr);
            //     grid-template-areas: ". . submit . .";
            // }
            @media (min-width: 1023px) {
              grid-template-columns: repeat(3, 1fr);
              grid-template-areas: ". submit .";
            }

            @media (min-width: 1200px) {
              grid-template-columns: repeat(5, 1fr);
              grid-template-areas: ". . submit . .";
            }
          }

          &__swap-button {
            display: flex;
            justify-content: center;
            align-items: center;
            align-self: start;
            grid-area: button;

            > i {
              @media (max-width: 1023px) {
                transform: rotate(90deg);
                margin-top: -0.8em !important;
              }

              margin-top: 0.4em !important;
              padding: 6px;
              z-index: 10;
              top: 9px;
              background: $secondary_color_fly;
              border-radius: 7px;
              color: $primary_color_fly;
            }
          }
        }
      }

      .multiway-form > form {
        display: grid;
        grid-template-rows: [row1-start] 1fr [row1-end row2-start] min-content [row2-end];
        grid-template-columns: 5% minmax(25%, 1fr) 0.005px repeat(
            2,
            minmax(25%, 1fr)
          );
        // grid-template-columns: repeat(6, 1fr);
        grid-template-areas: "formsegment formsegment formsegment formsegment formsegment" ". add . passengers search";

        & > div:not(.multiway-form__segment-row__swap-button) {
          padding: 0px 0.5em;
          cursor: pointer;

          .v-input {
            &__slot {
              border-radius: 7px;

              fieldset {
                padding: 0;

                legend {
                  margin-right: 17px;
                }
              }

              .v-label {
                transform: translateX(50%);
                padding: 0;
                margin-right: 11%;

                &.v-label--active {
                  transform: translateY(-25px) scale(0.75) translateX(50%);
                }
              }
            }
          }
        }

        & .v-input__slot > fieldset {
          border-radius: 8px;
        }

        .v-btn {
          border-radius: 8px;
        }

        & > div {
          padding-top: 0px;
          padding-bottom: 0px;
          padding-left: 10px;
          padding-right: 0px;
        }

        // & > .multiway-form__swap-button {
        //   justify-self: center;
        //   cursor: pointer;
        // }
        & > .multiway-form__textfield--depdatepicker {
          // padding-left: 0em;
          // padding-right: 0em;
          input {
            font-size: 13px;
          }
        }

        .multiway-form {
          &__segment {
            grid-area: formsegment;
            padding: 0px;

            &-row {
              > div {
                position: relative;
                display: grid;
                grid-template-rows: [row1-start] 1fr;
                grid-template-columns:
                  5% minmax(30%, 1fr) 0.005px minmax(30%, 1fr)
                  minmax(20%, 1fr);
                grid-template-areas: "remove origin button destination depdatepicker";

                &
                  > div:not(.multiway-form__segment-row__swap-button):not(
                    .multiway-form__segment-row__btn--remove
                  ) {
                  padding: 0 10px;
                  cursor: pointer;
                }
              }

              .v-input__slot {
                .v-input {
                  &__append-inner {
                    > i {
                      color: $secondary_color_fly !important;
                    }
                  }
                }
              }

              &__input {
                &--origin {
                  grid-area: origin;

                  input {
                    padding: 0px 15px;
                  }

                  .v-autocomplete__content {
                    left: 10px !important;
                  }

                  .v-input--is-focused {
                    fieldset > legend {
                      width: 50px !important;
                    }
                  }
                }

                &--destination {
                  grid-area: destination;

                  input {
                    padding: 0px 15px;
                  }

                  .v-autocomplete__content {
                    left: 10px !important;
                  }
                }
              }

              &__btn--remove {
                grid-area: remove;

                > .v-btn {
                  min-width: 35px;
                  height: 35px;
                }
              }

              &__textfield--depdatepicker {
                grid-area: depdatepicker;

                .v-input__slot {
                  &__append-inner {
                    > i {
                      color: #dda627 !important;
                    }
                  }
                }
              }

              &__swap-button {
                display: flex;
                justify-content: center;
                align-items: center;
                align-self: start;
                grid-area: button;
                cursor: pointer;

                @media (max-width: 991px) {
                  position: absolute;
                }

                > i {
                  margin-top: 0.4em;
                  padding: 6px;
                  z-index: 10;
                  top: 9px;
                  background: $secondary_color_fly;
                  border-radius: 7px;
                  color: $primary_color_fly;

                  @media (max-width: 991px) {
                    transform: rotate(90deg);
                  }

                  &:hover {
                    background: #e6e6e6;
                  }
                }
              }
            }
          }

          &__btn--add {
            grid-area: add;
            display: flex;

            > .v-btn {
              min-width: 50%;
              height: 56px;
              margin-right: 10px;
            }
          }

          &__btn--search {
            grid-area: search;
            padding-left: 17px !important;

            > button {
              background: linear-gradient(
                45deg,
                $primary_color_fly 0%,
                lighten($primary_color_fly, 35%) 100%
              );
              grid-area: submit;
              color: $secondary_color_fly;
              font-size: 1em !important;
              border-radius: 7px;
              box-shadow: unset;

              .v-icon {
                display: none;
              }
            }
          }

          &__menu--passengers {
            grid-area: passengers;
            padding: 0 13px !important;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }

              &:nth-child(3) {
                margin-bottom: 10px;
              }
            }

            .v-input__slot .v-label {
              margin-right: 21% !important;
            }

            .v-input {
              &__append-inner {
                > button {
                  color: $secondary_color_fly !important;
                }
              }
            }
          }
        }
      }
    }
    .package-panel__dynamic-component {
      font-size: 13px;

      .package-form > form {
        @media (min-width: 1023px) {
          display: grid;
          grid-template-columns: repeat(1, 6fr) repeat(2, 3fr);
          grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end];
          grid-template-areas: "package checkin checkout" ". guests search";
          //grid-template-areas: "checkout checkin chekin""checkin checkin checkin";

          & > div {
            padding-top: 0px;
            padding-bottom: 0px;
            padding-left: 10px;
            padding-right: 0px;
          }
        }

        // padding: 0em 1em;
        display: grid;
        grid-template-columns: repeat(1, minmax(60px, 1fr));
        grid-auto-rows: minmax(70px, auto);
        grid-template-areas: "package" "checkin" "checkout" "guests" "search";
      }

      .package-form {
        font-size: 13px !important;

        &__input {
          &--hotel {
            grid-area: hotel;

            .v-autocomplete__content {
              left: 10px !important;
            }
          }
        }

        &__textfield--checkinDatepicker {
          grid-area: checkin;

          input {
            font-size: 13px;
          }
        }

        &__textfield--checkoutDatepicker {
          grid-area: checkout;

          input {
            font-size: 13px;
          }
        }

        &__menu--guests {
          @media (min-width: 1023px) {
            grid-area: guests;

            .v-input {
              grid-area: guest_input;
            }

            input {
              font-size: 13px !important;
            }

            .v-menu__content.theme--light.menuable__content__active {
              border-bottom-left-radius: 10px;
              border-bottom-right-radius: 10px;
            }

            .v-list-item {
              justify-content: space-between;
              min-height: 35px;

              &::after {
                display: none;
              }

              &:nth-child(3) {
                margin-bottom: 10px;
              }
            }

            .v-menu__content {
              & > div {
                & > button {
                  border: 1.5px solid rgb(46, 196, 182) !important;
                  color: rgb(46, 196, 182) !important;
                  background-color: white !important;
                  box-shadow: none !important;
                  width: 90%;
                  margin: 0.4rem 0;
                }
              }
            }
          }
        }

        &__btn--search {
          grid-area: search;

          > button {
            font-size: 13px;
            box-shadow: 0px 12px 15px -3px #5f5f5f3b;
            .v-btn__content span {
              font-size: 16px !important;
            }
          }
        }
      }

      .foreign-form > form {
        position: relative;
        display: grid;
        grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end];
        grid-template-columns: repeat(4, minmax(250px, 1fr));
        grid-template-areas: "hotel hotel checkin checkout" "guests nationality country search";

        & > div {
          padding-top: 0px;
          padding-bottom: 0px;
          padding-left: 10px;
          padding-right: 0px;
        }

        & > .foreign-form__textfield--checkinDatepicker {
          // padding-left: 0em;
          // padding-right: 0em;
          input {
            font-size: 13px;
          }
        }

        & > .foreign-form__textfield--checkoutDatepicker {
          // padding-left: 1em;
          // padding-right: 0em;
          input {
            font-size: 13px;
          }
        }

        @media (max-width: 1023px) {
          grid-template-columns: repeat(1, minmax(60px, 1fr));
          grid-auto-rows: minmax(70px, auto);
          grid-template-areas: "hotel" "checkin" "checkout" "guests" "nationality" "country" "search";
        }

        .foreign-form {
          &__input {
            &--hotel {
              grid-area: hotel;

              .v-autocomplete__content {
                left: 10px !important;
              }
            }
          }

          &__menu--guests {
            grid-area: guests;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }

              &:nth-child(3) {
                margin-bottom: 10px;
              }
            }

            .v-menu__content {
              & > div {
                & > button {
                  border: 1.5px solid rgb(46, 196, 182) !important;
                  color: rgb(46, 196, 182) !important;
                  background-color: white !important;
                  box-shadow: none !important;
                  width: 90%;
                  margin: 0.4rem 0;
                }
              }
            }
          }

          &__menu--country {
            grid-area: country;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }
            }
          }

          &__menu--nationality {
            grid-area: nationality;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }
            }
          }

          &__textfield {
            &--checkinDatepicker {
              grid-area: checkin;
            }

            &--checkoutDatepicker {
              grid-area: checkout;
            }
          }

          &__btn--search {
            grid-area: search;

            > button {
              font-size: 13px;
              box-shadow: 0px 12px 15px -3px #5f5f5f3b;
              .v-btn__content span {
                font-size: 16px !important;
              }
            }
          }
        }
      }
    }
    .flightAndHotel-panel__dynamic-component {
      font-size: 13px;

      .v-input--is-disabled {
        .v-input__slot > fieldset {
          border: 1px solid #cecece !important;
          border-radius: 8px;
        }
      }

      .oneway-form > form {
        & .error--text .v-input__slot > fieldset {
          border: 2px solid var(--v-error-base);
        }

        .v-btn {
          border-radius: 8px;
        }

        @media (max-width: 1023px) {
          .v-input__slot,
          .v-text-field__details {
            margin-bottom: 0px;
          }
        }

        position: relative;
        display: grid;
        grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end];
        grid-template-columns: repeat(2, minmax(25%, 1fr)) 0.005px repeat(
            2,
            minmax(25%, 1fr)
          );
        grid-template-areas: "origin origin button destination destination" "depdate retdate . guests search";
        &.advanced {
          grid-template-areas:
            "hotel hotel . checkin checkout"
            "origin origin button destination destination"
            "depdate retdate . guests search";
        }

        & > div {
          padding-top: 0px;
          padding-bottom: 0px;
          padding-left: 10px;
          padding-right: 0px;
        }

        & > .oneway-form__swap-button {
          justify-self: center;
          cursor: pointer;
        }

        & > .oneway-form__textfield--checkout,
        & > .oneway-form__textfield--checkin,
        & > .oneway-form__textfield--depdatepicker,
        & > .oneway-form__textfield--retdatepicker {
          input {
            font-size: 13px;
          }
        }

        @media (max-width: 1023px) {
          grid-template-columns: repeat(1, minmax(60px, 1fr));
          grid-auto-rows: minmax(70px, auto);
          grid-template-areas: "origin " "destination" "depdate" "retdate" "guests" "search";

          & > div:not(.oneway-form__swap-button) {
            padding: 0 10px;
            cursor: pointer;
          }
        }
        .oneway-form {
          &__input {
            &--origin {
              grid-area: origin;

              .v-autocomplete__content {
                left: 10px !important;
              }
            }
            &--hotel {
              grid-area: hotel;
            }

            &--destination {
              grid-area: destination;

              .v-autocomplete__content {
                left: 10px !important;
              }
            }
          }

          &__menu--guests {
            @media (min-width: 1023px) {
              grid-area: guests;

              .v-input {
                grid-area: guest_input;
              }

              input {
                font-size: 13px !important;
              }

              .v-menu__content.theme--light.menuable__content__active {
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
              }

              .v-list-item {
                justify-content: space-between;
                min-height: 35px;

                &::after {
                  display: none;
                }

                &:nth-child(3) {
                  margin-bottom: 10px;
                }
              }

              .v-menu__content {
                & > div {
                  & > button {
                    border: 1.5px solid rgb(46, 196, 182) !important;
                    color: rgb(46, 196, 182) !important;
                    background-color: white !important;
                    box-shadow: none !important;
                    width: 90%;
                    margin: 0.4rem 0;
                  }
                }
              }
            }
          }

          &__textfield {
            &--checkin {
              grid-area: checkin;
            }
            &--checkout {
              grid-area: checkout;
            }
            &--depdatepicker {
              grid-area: depdate;
            }

            &--retdatepicker,
            &--duration {
              grid-area: retdate;
            }
          }

          &__btn--search {
            grid-area: search;

            > button {
              font-size: 13px;
              box-shadow: 0px 12px 15px -3px #5f5f5f3b;
              .v-btn__content span {
                font-size: 16px !important;
              }
            }
          }

          &__swap-button {
            display: flex;
            justify-content: center;
            align-items: center;
            align-self: start;
            grid-area: button;
            cursor: pointer;

            @media (max-width: 1023px) {
              position: absolute;
              top: 9%;
            }

            > i {
              z-index: 10;
              top: 9px;
              background-color: white;
              border: solid 1px #616161;
              border-radius: 50%;
              padding: 6px;
              margin-top: 8px;

              @media (max-width: 1023px) {
                transform: rotate(90deg);
              }

              &:hover {
                background: #e6e6e6;
              }
            }
          }
        }
      }

      .twoway-form > .v-input--is-disabled {
        .v-input__slot > fieldset {
          border: 1px solid #cecece !important;
          border-radius: 8px;
        }
      }

      .twoway-form > form {
        & .error--text .v-input__slot > fieldset {
          border: 2px solid var(--v-error-base);
        }

        .v-btn {
          border-radius: 8px;
        }

        @media (max-width: 1023px) {
          .v-input__slot,
          .v-text-field__details {
            margin-bottom: 0px;
          }
        }

        position: relative;
        display: grid;
        grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end];
        grid-template-columns: repeat(2, minmax(25%, 1fr)) 0.005px repeat(
            2,
            minmax(25%, 1fr)
          );
        grid-template-areas: "origin origin button destination destination" "depdate retdate . guests search";

        & > div {
          padding-top: 0px;
          padding-bottom: 0px;
          padding-left: 10px;
          padding-right: 0px;
        }

        & > .twoway-form__swap-button {
          justify-self: center;
          cursor: pointer;
        }

        & > .twoway-form__textfield--depdatepicker {
          // padding-left: 0em;
          // padding-right: 0em;
          input {
            font-size: 13px;
          }
        }

        & > .twoway-form__textfield--retdatepicker {
          // padding-left: 1em;
          // padding-right: 0em;
          input {
            font-size: 13px;
          }
        }

        @media (max-width: 1023px) {
          grid-template-columns: repeat(1, minmax(60px, 1fr));
          grid-auto-rows: minmax(70px, auto);
          grid-template-areas: "origin " "destination" "depdate" "retdate" "guests" "search";

          & > div:not(.twoway-form__swap-button) {
            padding: 0 10px;
            cursor: pointer;
          }
        }

        .twoway-form {
          &__input {
            &--origin {
              grid-area: origin;

              input {
                padding: 0px 15px;
              }

              .v-autocomplete__content {
                left: 10px !important;
              }
            }

            &--destination {
              grid-area: destination;

              input {
                padding: 0px 15px;
              }

              .v-autocomplete__content {
                left: 10px !important;
              }
            }
          }

          &__menu--guests {
            grid-area: guests;

            input {
              font-size: 12px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }

              &:nth-child(3) {
                margin-bottom: 10px;
              }
            }
          }

          &__textfield {
            &--depdatepicker {
              grid-area: depdate;
            }

            &--retdatepicker {
              grid-area: retdate;
            }
          }

          &__btn--search {
            grid-area: search;

            > button {
              font-size: 13px;
              box-shadow: 0px 12px 15px -3px #5f5f5f3b;
              .v-btn__content span {
                font-size: 16px !important;
              }
            }
          }

          &__swap-button {
            display: flex;
            justify-content: center;
            align-items: center;
            align-self: start;
            grid-area: button;
            cursor: pointer;

            @media (max-width: 1023px) {
              position: absolute;
              top: 9%;
            }

            > i {
              z-index: 10;
              top: 9px;
              background-color: white;
              border: solid 1px #616161;
              border-radius: 50%;
              padding: 6px;
              margin-top: 8px;

              @media (max-width: 1023px) {
                transform: rotate(90deg);
              }

              &:hover {
                background: #e6e6e6;
              }
            }
          }
        }
      }
    }

    .cip-panel__dynamic-component {
      .cip-form__advanced {
        .cip-form__btn--search button {
          font-size: 13px;
          box-shadow: 0px 12px 15px -3px #5f5f5f3b;
        }
      }

      .cip-form {
        & .v-input__slot > fieldset {
          border: 1px solid #616161;
          border-radius: 8px;
        }

        & .error--text .v-input__slot > fieldset {
          border: 2px solid var(--v-error-base);
        }

        .v-btn {
          border-radius: 8px;
        }

        position: relative;
        display: grid;
        grid-column-gap: 10px;
        grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end];
        grid-template-columns: 3fr 2fr 2fr;
        grid-template-areas: "origin depdate passengers" ".  . search";

        & > .cip-form__textfield--depdatepicker {
          input {
            font-size: 13px;
          }
        }

        .cip-form {
          &__input {
            &--origin {
              grid-area: origin;

              .v-autocomplete__content {
                left: 10px !important;
              }
            }
          }

          &-travelType {
            grid-area: travelType;
          }

          &-flightType {
            grid-area: flightType;
          }

          &__menu--passengers {
            grid-area: passengers;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }
            }
          }

          &__textfield {
            &--depdatepicker {
              grid-area: depdate;
            }
          }

          &__btn--search {
            grid-area: search;

            > button {
              font-size: 13px;
              box-shadow: 0px 12px 15px -3px #5f5f5f3b;
            }
          }
        }
      }
    }
  }
  &.theme3 {
    // width: 80%;
    margin: auto;

    .v-card.v-sheet.theme--light {
      box-shadow: none;
      border-radius: 20px;
    }
    .defaultMenu {
      background: #fff !important;
    }

    .v-tabs-bar {
      height: 20%;
      border-radius: 20px;
      background-color: transparent;
    }

    > div .v-tab {
      padding: 10px 0 !important;
      font-size: 13px;
      letter-spacing: 0px !important;
      max-width: 15%;

      @media (max-width: 960px) {
        max-width: 14%;
        min-width: 14;
      }

      @media (max-width: 600px) {
        max-width: 12%;
        min-width: 12%;
        margin-right: 8px !important;
        margin-left: 8px !important;
      }
      &.flight {
        > i {
          transform: unset !important;
        }
      }
      > span {
        margin-top: 13px;
      }
      > i {
        margin-left: 0 !important;
        margin-right: 0 !important;
        background: #fff;
        border-radius: 50%;
        padding: 0.75em;
        box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.54) inset;
        border: 8px solid #fff;
      }

      > svg {
        height: 80px;
        padding: 20px;
        width: 80px;
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: unset !important;
        background: #fff;
        box-shadow: 0 0 0 3px #0000008a inset;
        border: 8px solid #fff;
        border-radius: 50%;
        fill: #0000008a;
      }

      &--active {
        // border-bottom: 2px solid var(--v-primary-base) !important;

        i {
          color: var(--v-primary-base) !important;
          box-shadow: 0 0 0 3px var(--v-primary-base) inset;
        }
        > svg {
          box-shadow: 0 0 0 3px var(--v-primary-base) inset;
          fill: var(--v-primary-base);
        }
        &:hover,
        &:focus {
          &::before {
            opacity: 0;
          }
        }
      }
      &:focus {
        &::before {
          opacity: 0;
        }
      }
    }

    .flight-panel__radiogroup,
    .flightAndHotel-panel__radiogroup,
    .hotel-panel__radiogroup {
      margin-top: 10px;

      & > div > div > div > div {
        display: flex;
        flex-direction: row;
        font-size: 13px;
      }
    }

    .flightAndHotel-panel__radio,
    .flight-panel__radio {
      &--oneway,
      &--twoway,
      &--multiway {
        & > div > label {
          margin: 0;
        }

        margin: 5px;
      }
    }

    .hotel-panel__radio {
      &--domestic,
      &--foreign {
        & > div > label {
          margin: 0;
        }

        margin: 5px;
      }
    }

    .cip-panel__radio {
      &--oneway,
      &--twoway {
        & > div > label {
          margin: 0;
        }

        margin-top: 20px;
        margin-bottom: 10px;
      }
    }

    .flightAndHotel-panel__select-container,
    .flight-panel__select-container {
      display: flex !important;
      justify-content: space-between;
    }

    .flight-panel__checkboxes {
      width: 50%;

      .v-input--checkbox {
        align-items: center;
      }
    }

    .flight-panel__dynamic-component {
      font-size: 13px;

      .v-input--is-disabled {
        .v-input__slot > fieldset {
          border: 1px solid #cecece !important;
          border-radius: 8px;
        }
      }

      .oneway-form > form {
        & .v-input__slot > fieldset {
          border: 1px solid #616161;
          border-radius: 8px;
        }

        // & .v-input--is-focused .v-input__slot>fieldset {
        //   border: 2px solid var(--v-primary-base);
        // }

        & .error--text .v-input__slot > fieldset {
          border: 2px solid var(--v-error-base);
        }

        .v-btn {
          border-radius: 8px;
        }

        @media (max-width: 1023px) {
          .v-input__slot,
          .v-text-field__details {
            margin-bottom: 0px;
          }
        }

        position: relative;
        display: grid;
        grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end];
        grid-template-columns: repeat(2, minmax(25%, 1fr)) 0.005px repeat(
            2,
            minmax(25%, 1fr)
          );
        grid-template-areas: "origin origin button destination destination" "depdate retdate . passengers search";

        & > div {
          padding-top: 0px;
          padding-bottom: 0px;
          padding-left: 10px;
          padding-right: 0px;
        }

        & > .oneway-form__swap-button {
          justify-self: center;
          cursor: pointer;
        }

        & > .oneway-form__textfield--depdatepicker {
          // padding-left: 0em;
          // padding-right: 0em;
          input {
            font-size: 13px;
          }
        }

        & > .oneway-form__textfield--retdatepicker {
          // padding-left: 1em;
          // padding-right: 0em;
          input {
            font-size: 13px;
          }
        }

        @media (max-width: 1023px) {
          grid-template-columns: repeat(1, minmax(60px, 1fr));
          grid-auto-rows: minmax(70px, auto);
          grid-template-areas: "origin " "destination" "depdate" "retdate" "passengers" "search";

          & > div:not(.oneway-form__swap-button) {
            padding: 0 10px;
            cursor: pointer;
          }
        }

        .oneway-form {
          &__input {
            &--origin {
              grid-area: origin;

              .v-autocomplete__content {
                left: 10px !important;
              }
            }

            &--destination {
              grid-area: destination;

              .v-autocomplete__content {
                left: 10px !important;
              }
            }
          }

          &__menu--passengers {
            grid-area: passengers;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }
            }
          }

          &__textfield {
            &--depdatepicker {
              grid-area: depdate;
            }

            &--retdatepicker {
              grid-area: retdate;
            }
          }

          &__btn--search {
            grid-area: search;

            > button {
              font-size: 13px;
              box-shadow: 0px 12px 15px -3px #5f5f5f3b;
            }
          }

          &__swap-button {
            display: flex;
            justify-content: center;
            align-items: center;
            align-self: start;
            grid-area: button;
            cursor: pointer;

            @media (max-width: 1023px) {
              position: absolute;
              top: 9%;
            }

            > i {
              z-index: 10;
              top: 9px;
              background-color: white;
              border: solid 1px #616161;
              border-radius: 50%;
              padding: 6px;
              margin-top: 8px;

              @media (max-width: 1023px) {
                transform: rotate(90deg);
              }

              &:hover {
                background: #e6e6e6;
              }
            }
          }
        }
      }

      .twoway-form > .v-input--is-disabled {
        .v-input__slot > fieldset {
          border: 1px solid #cecece !important;
          border-radius: 8px;
        }
      }

      .twoway-form > form {
        & .v-input__slot > fieldset {
          border: 1px solid #616161;
          border-radius: 8px;
        }

        // & .v-input--is-focused .v-input__slot>fieldset {
        //   border: 2px solid var(--v-primary-base);
        // }

        & .error--text .v-input__slot > fieldset {
          border: 2px solid var(--v-error-base);
        }

        .v-btn {
          border-radius: 8px;
        }

        @media (max-width: 1023px) {
          .v-input__slot,
          .v-text-field__details {
            margin-bottom: 0px;
          }
        }

        position: relative;
        display: grid;
        grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end];
        grid-template-columns: repeat(2, minmax(25%, 1fr)) 0.005px repeat(
            2,
            minmax(25%, 1fr)
          );
        grid-template-areas: "origin origin button destination destination" "depdate retdate . passengers search";

        & > div {
          padding-top: 0px;
          padding-bottom: 0px;
          padding-left: 10px;
          padding-right: 0px;
        }

        & > .twoway-form__swap-button {
          justify-self: center;
          cursor: pointer;
        }

        & > .twoway-form__textfield--depdatepicker {
          // padding-left: 0em;
          // padding-right: 0em;
          input {
            font-size: 13px;
          }
        }

        & > .twoway-form__textfield--retdatepicker {
          // padding-left: 1em;
          // padding-right: 0em;
          input {
            font-size: 13px;
          }
        }

        @media (max-width: 1023px) {
          grid-template-columns: repeat(1, minmax(60px, 1fr));
          grid-auto-rows: minmax(70px, auto);
          grid-template-areas: "origin " "destination" "depdate" "retdate" "passengers" "search";

          & > div:not(.twoway-form__swap-button) {
            padding: 0 10px;
            cursor: pointer;
          }
        }

        .twoway-form {
          &__input {
            &--origin {
              grid-area: origin;

              input {
                padding: 0px 15px;
              }

              .v-autocomplete__content {
                left: 10px !important;
              }
            }

            &--destination {
              grid-area: destination;

              input {
                padding: 0px 15px;
              }

              .v-autocomplete__content {
                left: 10px !important;
              }
            }
          }

          &__menu--passengers {
            grid-area: passengers;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }

              &:nth-child(3) {
                margin-bottom: 10px;
              }
            }
          }

          &__textfield {
            &--depdatepicker {
              grid-area: depdate;
            }

            &--retdatepicker {
              grid-area: retdate;
            }
          }

          &__btn--search {
            grid-area: search;

            > button {
              font-size: 13px;
              box-shadow: 0px 12px 15px -3px #5f5f5f3b;
            }
          }

          &__swap-button {
            display: flex;
            justify-content: center;
            align-items: center;
            align-self: start;
            grid-area: button;
            cursor: pointer;

            @media (max-width: 1023px) {
              position: absolute;
              top: 9%;
            }

            > i {
              z-index: 10;
              top: 9px;
              background-color: white;
              border: solid 1px #616161;
              border-radius: 50%;
              padding: 6px;
              margin-top: 8px;

              @media (max-width: 1023px) {
                transform: rotate(90deg);
              }

              &:hover {
                background: #e6e6e6;
              }
            }
          }
        }
      }

      .multiway-form > form {
        display: grid;
        grid-template-rows: [row1-start] 1fr [row1-end row2-start] min-content [row2-end];
        grid-template-columns: 5% minmax(30%, 1fr) 0.005px minmax(30%, 1fr) 25%;
        // grid-template-columns: repeat(6, 1fr);
        grid-template-areas: "formsegment formsegment formsegment formsegment formsegment" ". add passengers passengers search";

        & > div:not(.multiway-form__segment) {
          padding: 10px;
          cursor: pointer;
        }

        & .v-input__slot > fieldset {
          border: 1px solid #616161;
          border-radius: 8px;
        }

        // & .v-input--is-focused .v-input__slot>fieldset {
        //   border: 2px solid var(--v-primary-base);
        // }

        & .error--text .v-input__slot > fieldset {
          border: 2px solid var(--v-error-base);
        }

        .v-btn {
          border-radius: 8px;
        }

        & > div {
          padding-top: 0px;
          padding-bottom: 0px;
          padding-left: 10px;
          padding-right: 0px;
        }

        // & > .multiway-form__swap-button {
        //   justify-self: center;
        //   cursor: pointer;
        // }
        & > .multiway-form__textfield--depdatepicker {
          // padding-left: 0em;
          // padding-right: 0em;
          input {
            font-size: 13px;
          }
        }

        & > .multiway-form__textfield--retdatepicker {
          // padding-left: 1em;
          // padding-right: 0em;
          input {
            font-size: 13px;
          }
        }

        .multiway-form {
          &__segment {
            grid-area: formsegment;
            padding: 0px;

            &-row {
              > div {
                position: relative;
                display: grid;
                grid-template-rows: [row1-start] 1fr;
                grid-template-columns:
                  5% minmax(30%, 1fr) 0.005px minmax(30%, 1fr)
                  25%;
                grid-template-areas: "remove origin button destination depdatepicker";

                &
                  > div:not(.multiway-form__segment-row__swap-button):not(
                    .multiway-form__segment-row__btn--remove
                  ) {
                  padding: 0 10px;
                  cursor: pointer;
                }
              }

              &__input {
                &--origin {
                  grid-area: origin;

                  input {
                    padding: 0px 15px;
                  }

                  .v-autocomplete__content {
                    left: 10px !important;
                  }
                }

                &--destination {
                  grid-area: destination;

                  input {
                    padding: 0px 15px;
                  }

                  .v-autocomplete__content {
                    left: 10px !important;
                  }
                }
              }

              &__btn--remove {
                grid-area: remove;

                > .v-btn {
                  min-width: 35px;
                  height: 35px;
                }
              }

              &__textfield--depdatepicker {
                grid-area: depdatepicker;
              }

              &__swap-button {
                display: flex;
                justify-content: center;
                align-items: center;
                align-self: start;
                grid-area: button;
                cursor: pointer;

                @media (max-width: 991px) {
                  position: absolute;
                }

                > i {
                  z-index: 10;
                  top: 9px;
                  background-color: white;
                  border: solid 1px #616161;
                  border-radius: 50%;
                  padding: 6px;
                  margin-top: 8px;

                  @media (max-width: 991px) {
                    transform: rotate(90deg);
                  }

                  &:hover {
                    background: #e6e6e6;
                  }
                }
              }
            }
          }

          &__btn--add {
            grid-area: add;
            display: flex;

            > .v-btn {
              min-width: 50%;
              height: 56px;
              margin: 0px;
            }
          }

          &__btn--search {
            grid-area: search;
          }

          &__menu--passengers {
            grid-area: passengers;
            padding-right: 0px !important;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }

              &:nth-child(3) {
                margin-bottom: 10px;
              }
            }
          }
        }
      }
    }

    .hotel-panel__dynamic-component {
      font-size: 13px;

      .domestic-form > form {
        @media (min-width: 1023px) {
          display: grid;
          grid-template-columns: minmax(250px, 2fr) repeat(
              2,
              minmax(250px, 1fr)
            );
          grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end];
          grid-template-areas: "hotel checkin checkout" ". guests search";
          //grid-template-areas: "checkout checkin chekin""checkin checkin checkin";

          & > div {
            padding-top: 0px;
            padding-bottom: 0px;
            padding-left: 10px;
            padding-right: 0px;
          }
        }

        // padding: 0em 1em;
        display: grid;
        grid-template-columns: repeat(1, minmax(60px, 1fr));
        grid-auto-rows: minmax(70px, auto);
        grid-template-areas: "hotel" "checkin" "checkout" "guests" "search";
      }

      .domestic-form {
        font-size: 13px !important;

        &__input {
          &--hotel {
            grid-area: hotel;

            .v-autocomplete__content {
              left: 10px !important;
            }
          }
        }

        &__textfield--checkinDatepicker {
          grid-area: checkin;

          input {
            font-size: 13px;
          }
        }

        &__textfield--checkoutDatepicker {
          grid-area: checkout;

          input {
            font-size: 13px;
          }
        }

        &__menu--guests {
          @media (min-width: 1023px) {
            grid-area: guests;

            .v-input {
              grid-area: guest_input;
            }

            input {
              font-size: 13px !important;
            }

            .v-menu__content.theme--light.menuable__content__active {
              border-bottom-left-radius: 10px;
              border-bottom-right-radius: 10px;
            }

            .v-list-item {
              justify-content: space-between;
              min-height: 35px;

              &::after {
                display: none;
              }

              &:nth-child(3) {
                margin-bottom: 10px;
              }
            }

            .v-menu__content {
              & > div {
                & > button {
                  border: 1.5px solid rgb(46, 196, 182) !important;
                  color: rgb(46, 196, 182) !important;
                  background-color: white !important;
                  box-shadow: none !important;
                  width: 90%;
                  margin: 0.4rem 0;
                }
              }
            }
          }
        }

        &__btn--search {
          grid-area: search;

          > button {
            font-size: 13px;
            box-shadow: 0px 12px 15px -3px #5f5f5f3b;
          }
        }
      }

      .foreign-form > form {
        position: relative;
        display: grid;
        grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end];
        grid-template-columns: repeat(4, minmax(250px, 1fr));
        grid-template-areas: "hotel hotel checkin checkout" "guests nationality country search";

        & > div {
          padding-top: 0px;
          padding-bottom: 0px;
          padding-left: 10px;
          padding-right: 0px;
        }

        & > .foreign-form__textfield--checkinDatepicker {
          // padding-left: 0em;
          // padding-right: 0em;
          input {
            font-size: 13px;
          }
        }

        & > .foreign-form__textfield--checkoutDatepicker {
          // padding-left: 1em;
          // padding-right: 0em;
          input {
            font-size: 13px;
          }
        }

        @media (max-width: 1023px) {
          grid-template-columns: repeat(1, minmax(60px, 1fr));
          grid-auto-rows: minmax(70px, auto);
          grid-template-areas: "hotel" "checkin" "checkout" "guests" "nationality" "country" "search";
        }

        .foreign-form {
          &__input {
            &--hotel {
              grid-area: hotel;

              .v-autocomplete__content {
                left: 10px !important;
              }
            }
          }

          &__menu--guests {
            grid-area: guests;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }

              &:nth-child(3) {
                margin-bottom: 10px;
              }
            }

            .v-menu__content {
              & > div {
                & > button {
                  border: 1.5px solid rgb(46, 196, 182) !important;
                  color: rgb(46, 196, 182) !important;
                  background-color: white !important;
                  box-shadow: none !important;
                  width: 90%;
                  margin: 0.4rem 0;
                }
              }
            }
          }

          &__menu--country {
            grid-area: country;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }
            }
          }

          &__menu--nationality {
            grid-area: nationality;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }
            }
          }

          &__textfield {
            &--checkinDatepicker {
              grid-area: checkin;
            }

            &--checkoutDatepicker {
              grid-area: checkout;
            }
          }

          &__btn--search {
            grid-area: search;

            > button {
              font-size: 13px;
              box-shadow: 0px 12px 15px -3px #5f5f5f3b;
            }
          }
        }
      }
    }
    .package-panel__dynamic-component {
      font-size: 13px;

      .package-form > form {
        @media (min-width: 1023px) {
          display: grid;
          grid-template-columns: repeat(1, 6fr) repeat(2, 3fr);
          grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end];
          grid-template-areas: "package checkin checkout" ". guests search";
          //grid-template-areas: "checkout checkin chekin""checkin checkin checkin";

          & > div {
            padding-top: 0px;
            padding-bottom: 0px;
            padding-left: 10px;
            padding-right: 0px;
          }
        }

        // padding: 0em 1em;
        display: grid;
        grid-template-columns: repeat(1, minmax(60px, 1fr));
        grid-auto-rows: minmax(70px, auto);
        grid-template-areas: "package" "checkin" "checkout" "guests" "search";
      }

      .package-form {
        font-size: 13px !important;

        &__input {
          &--hotel {
            grid-area: hotel;

            .v-autocomplete__content {
              left: 10px !important;
            }
          }
        }

        &__textfield--checkinDatepicker {
          grid-area: checkin;

          input {
            font-size: 13px;
          }
        }

        &__textfield--checkoutDatepicker {
          grid-area: checkout;

          input {
            font-size: 13px;
          }
        }

        &__menu--guests {
          @media (min-width: 1023px) {
            grid-area: guests;

            .v-input {
              grid-area: guest_input;
            }

            input {
              font-size: 13px !important;
            }

            .v-menu__content.theme--light.menuable__content__active {
              border-bottom-left-radius: 10px;
              border-bottom-right-radius: 10px;
            }

            .v-list-item {
              justify-content: space-between;
              min-height: 35px;

              &::after {
                display: none;
              }

              &:nth-child(3) {
                margin-bottom: 10px;
              }
            }

            .v-menu__content {
              & > div {
                & > button {
                  border: 1.5px solid rgb(46, 196, 182) !important;
                  color: rgb(46, 196, 182) !important;
                  background-color: white !important;
                  box-shadow: none !important;
                  width: 90%;
                  margin: 0.4rem 0;
                }
              }
            }
          }
        }

        &__btn--search {
          grid-area: search;

          > button {
            font-size: 13px;
            box-shadow: 0px 12px 15px -3px #5f5f5f3b;
            .v-btn__content span {
              font-size: 16px !important;
            }
          }
        }
      }

      .foreign-form > form {
        position: relative;
        display: grid;
        grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end];
        grid-template-columns: repeat(4, minmax(250px, 1fr));
        grid-template-areas: "hotel hotel checkin checkout" "guests nationality country search";

        & > div {
          padding-top: 0px;
          padding-bottom: 0px;
          padding-left: 10px;
          padding-right: 0px;
        }

        & > .foreign-form__textfield--checkinDatepicker {
          // padding-left: 0em;
          // padding-right: 0em;
          input {
            font-size: 13px;
          }
        }

        & > .foreign-form__textfield--checkoutDatepicker {
          // padding-left: 1em;
          // padding-right: 0em;
          input {
            font-size: 13px;
          }
        }

        @media (max-width: 1023px) {
          grid-template-columns: repeat(1, minmax(60px, 1fr));
          grid-auto-rows: minmax(70px, auto);
          grid-template-areas: "hotel" "checkin" "checkout" "guests" "nationality" "country" "search";
        }

        .foreign-form {
          &__input {
            &--hotel {
              grid-area: hotel;

              .v-autocomplete__content {
                left: 10px !important;
              }
            }
          }

          &__menu--guests {
            grid-area: guests;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }

              &:nth-child(3) {
                margin-bottom: 10px;
              }
            }

            .v-menu__content {
              & > div {
                & > button {
                  border: 1.5px solid rgb(46, 196, 182) !important;
                  color: rgb(46, 196, 182) !important;
                  background-color: white !important;
                  box-shadow: none !important;
                  width: 90%;
                  margin: 0.4rem 0;
                }
              }
            }
          }

          &__menu--country {
            grid-area: country;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }
            }
          }

          &__menu--nationality {
            grid-area: nationality;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }
            }
          }

          &__textfield {
            &--checkinDatepicker {
              grid-area: checkin;
            }

            &--checkoutDatepicker {
              grid-area: checkout;
            }
          }

          &__btn--search {
            grid-area: search;

            > button {
              font-size: 13px;
              box-shadow: 0px 12px 15px -3px #5f5f5f3b;
              .v-btn__content span {
                font-size: 16px !important;
              }
            }
          }
        }
      }
    }
    .package-panel__dynamic-component {
      font-size: 13px;

      .package-form > form {
        @media (min-width: 1023px) {
          display: grid;
          grid-template-columns: repeat(1, 6fr) repeat(2, 3fr);
          grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end];
          grid-template-areas: "package checkin checkout" ". guests search";
          //grid-template-areas: "checkout checkin chekin""checkin checkin checkin";

          & > div {
            padding-top: 0px;
            padding-bottom: 0px;
            padding-left: 10px;
            padding-right: 0px;
          }
        }

        // padding: 0em 1em;
        display: grid;
        grid-template-columns: repeat(1, minmax(60px, 1fr));
        grid-auto-rows: minmax(70px, auto);
        grid-template-areas: "package" "checkin" "checkout" "guests" "search";
      }

      .package-form {
        font-size: 13px !important;

        &__input {
          &--hotel {
            grid-area: hotel;

            .v-autocomplete__content {
              left: 10px !important;
            }
          }
        }

        &__textfield--checkinDatepicker {
          grid-area: checkin;

          input {
            font-size: 13px;
          }
        }

        &__textfield--checkoutDatepicker {
          grid-area: checkout;

          input {
            font-size: 13px;
          }
        }

        &__menu--guests {
          @media (min-width: 1023px) {
            grid-area: guests;

            .v-input {
              grid-area: guest_input;
            }

            input {
              font-size: 13px !important;
            }

            .v-menu__content.theme--light.menuable__content__active {
              border-bottom-left-radius: 10px;
              border-bottom-right-radius: 10px;
            }

            .v-list-item {
              justify-content: space-between;
              min-height: 35px;

              &::after {
                display: none;
              }

              &:nth-child(3) {
                margin-bottom: 10px;
              }
            }

            .v-menu__content {
              & > div {
                & > button {
                  border: 1.5px solid rgb(46, 196, 182) !important;
                  color: rgb(46, 196, 182) !important;
                  background-color: white !important;
                  box-shadow: none !important;
                  width: 90%;
                  margin: 0.4rem 0;
                }
              }
            }
          }
        }

        &__btn--search {
          grid-area: search;

          > button {
            font-size: 13px;
            box-shadow: 0px 12px 15px -3px #5f5f5f3b;
            .v-btn__content span {
              font-size: 16px !important;
            }
          }
        }
      }

      .foreign-form > form {
        position: relative;
        display: grid;
        grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end];
        grid-template-columns: repeat(4, minmax(250px, 1fr));
        grid-template-areas: "hotel hotel checkin checkout" "guests nationality country search";

        & > div {
          padding-top: 0px;
          padding-bottom: 0px;
          padding-left: 10px;
          padding-right: 0px;
        }

        & > .foreign-form__textfield--checkinDatepicker {
          // padding-left: 0em;
          // padding-right: 0em;
          input {
            font-size: 13px;
          }
        }

        & > .foreign-form__textfield--checkoutDatepicker {
          // padding-left: 1em;
          // padding-right: 0em;
          input {
            font-size: 13px;
          }
        }

        @media (max-width: 1023px) {
          grid-template-columns: repeat(1, minmax(60px, 1fr));
          grid-auto-rows: minmax(70px, auto);
          grid-template-areas: "hotel" "checkin" "checkout" "guests" "nationality" "country" "search";
        }

        .foreign-form {
          &__input {
            &--hotel {
              grid-area: hotel;

              .v-autocomplete__content {
                left: 10px !important;
              }
            }
          }

          &__menu--guests {
            grid-area: guests;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }

              &:nth-child(3) {
                margin-bottom: 10px;
              }
            }

            .v-menu__content {
              & > div {
                & > button {
                  border: 1.5px solid rgb(46, 196, 182) !important;
                  color: rgb(46, 196, 182) !important;
                  background-color: white !important;
                  box-shadow: none !important;
                  width: 90%;
                  margin: 0.4rem 0;
                }
              }
            }
          }

          &__menu--country {
            grid-area: country;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }
            }
          }

          &__menu--nationality {
            grid-area: nationality;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }
            }
          }

          &__textfield {
            &--checkinDatepicker {
              grid-area: checkin;
            }
            &--checkoutDatepicker {
              grid-area: checkout;
            }
          }

          &__btn--search {
            grid-area: search;

            > button {
              font-size: 13px;
              box-shadow: 0px 12px 15px -3px #5f5f5f3b;
              .v-btn__content span {
                font-size: 16px !important;
              }
            }
          }
        }
      }
    }
    .flightAndHotel-panel__dynamic-component {
      font-size: 13px;

      .v-input--is-disabled {
        .v-input__slot > fieldset {
          border: 1px solid #cecece !important;
          border-radius: 8px;
        }
      }

      .oneway-form > form {
        & .error--text .v-input__slot > fieldset {
          border: 2px solid var(--v-error-base);
        }

        .v-btn {
          border-radius: 8px;
        }

        @media (max-width: 1023px) {
          .v-input__slot,
          .v-text-field__details {
            margin-bottom: 0px;
          }
        }

        position: relative;
        display: grid;
        grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end];
        grid-template-columns: repeat(2, minmax(25%, 1fr)) 0.005px repeat(
            2,
            minmax(25%, 1fr)
          );
        grid-template-areas: "origin origin button destination destination" "depdate retdate . guests search";
        &.advanced {
          grid-template-areas:
            "hotel hotel . checkin checkout"
            "origin origin button destination destination"
            "depdate retdate . guests search";
        }

        & > div {
          padding-top: 0px;
          padding-bottom: 0px;
          padding-left: 10px;
          padding-right: 0px;
        }

        & > .oneway-form__swap-button {
          justify-self: center;
          cursor: pointer;
        }

        & > .oneway-form__textfield--checkout,
        & > .oneway-form__textfield--checkin,
        & > .oneway-form__textfield--depdatepicker,
        & > .oneway-form__textfield--retdatepicker {
          input {
            font-size: 13px;
          }
        }

        @media (max-width: 1023px) {
          grid-template-columns: repeat(1, minmax(60px, 1fr));
          grid-auto-rows: minmax(70px, auto);
          grid-template-areas: "origin " "destination" "depdate" "retdate" "guests" "search";

          & > div:not(.oneway-form__swap-button) {
            padding: 0 10px;
            cursor: pointer;
          }
        }
        .oneway-form {
          &__input {
            &--origin {
              grid-area: origin;

              .v-autocomplete__content {
                left: 10px !important;
              }
            }
            &--hotel {
              grid-area: hotel;
            }

            &--destination {
              grid-area: destination;

              .v-autocomplete__content {
                left: 10px !important;
              }
            }
          }

          &__menu--guests {
            @media (min-width: 1023px) {
              grid-area: guests;

              .v-input {
                grid-area: guest_input;
              }

              input {
                font-size: 13px !important;
              }

              .v-menu__content.theme--light.menuable__content__active {
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
              }

              .v-list-item {
                justify-content: space-between;
                min-height: 35px;

                &::after {
                  display: none;
                }

                &:nth-child(3) {
                  margin-bottom: 10px;
                }
              }

              .v-menu__content {
                & > div {
                  & > button {
                    border: 1.5px solid rgb(46, 196, 182) !important;
                    color: rgb(46, 196, 182) !important;
                    background-color: white !important;
                    box-shadow: none !important;
                    width: 90%;
                    margin: 0.4rem 0;
                  }
                }
              }
            }
          }

          &__textfield {
            &--checkin {
              grid-area: checkin;
            }
            &--checkout {
              grid-area: checkout;
            }
            &--depdatepicker {
              grid-area: depdate;
            }

            &--retdatepicker,
            &--duration {
              grid-area: retdate;
            }
          }

          &__btn--search {
            grid-area: search;

            > button {
              font-size: 13px;
              box-shadow: 0px 12px 15px -3px #5f5f5f3b;
            }
          }

          &__swap-button {
            display: flex;
            justify-content: center;
            align-items: center;
            align-self: start;
            grid-area: button;
            cursor: pointer;

            @media (max-width: 1023px) {
              position: absolute;
              top: 9%;
            }

            > i {
              z-index: 10;
              top: 9px;
              background-color: white;
              border: solid 1px #616161;
              border-radius: 50%;
              padding: 6px;
              margin-top: 8px;

              @media (max-width: 1023px) {
                transform: rotate(90deg);
              }

              &:hover {
                background: #e6e6e6;
              }
            }
          }
        }
      }

      .twoway-form > .v-input--is-disabled {
        .v-input__slot > fieldset {
          border: 1px solid #cecece !important;
          border-radius: 8px;
        }
      }

      .twoway-form > form {
        & .error--text .v-input__slot > fieldset {
          border: 2px solid var(--v-error-base);
        }

        .v-btn {
          border-radius: 8px;
        }

        @media (max-width: 1023px) {
          .v-input__slot,
          .v-text-field__details {
            margin-bottom: 0px;
          }
        }

        position: relative;
        display: grid;
        grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end];
        grid-template-columns: repeat(2, minmax(25%, 1fr)) 0.005px repeat(
            2,
            minmax(25%, 1fr)
          );
        grid-template-areas: "origin origin button destination destination" "depdate retdate . guests search";

        & > div {
          padding-top: 0px;
          padding-bottom: 0px;
          padding-left: 10px;
          padding-right: 0px;
        }

        & > .twoway-form__swap-button {
          justify-self: center;
          cursor: pointer;
        }

        & > .twoway-form__textfield--depdatepicker {
          // padding-left: 0em;
          // padding-right: 0em;
          input {
            font-size: 13px;
          }
        }

        & > .twoway-form__textfield--retdatepicker {
          // padding-left: 1em;
          // padding-right: 0em;
          input {
            font-size: 13px;
          }
        }

        @media (max-width: 1023px) {
          grid-template-columns: repeat(1, minmax(60px, 1fr));
          grid-auto-rows: minmax(70px, auto);
          grid-template-areas: "origin " "destination" "depdate" "retdate" "guests" "search";

          & > div:not(.twoway-form__swap-button) {
            padding: 0 10px;
            cursor: pointer;
          }
        }

        .twoway-form {
          &__input {
            &--origin {
              grid-area: origin;

              input {
                padding: 0px 15px;
              }

              .v-autocomplete__content {
                left: 10px !important;
              }
            }

            &--destination {
              grid-area: destination;

              input {
                padding: 0px 15px;
              }

              .v-autocomplete__content {
                left: 10px !important;
              }
            }
          }

          &__menu--guests {
            grid-area: guests;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }

              &:nth-child(3) {
                margin-bottom: 10px;
              }
            }
          }

          &__textfield {
            &--depdatepicker {
              grid-area: depdate;
            }

            &--retdatepicker {
              grid-area: retdate;
            }
          }

          &__btn--search {
            grid-area: search;

            > button {
              font-size: 13px;
              box-shadow: 0px 12px 15px -3px #5f5f5f3b;
            }
          }

          &__swap-button {
            display: flex;
            justify-content: center;
            align-items: center;
            align-self: start;
            grid-area: button;
            cursor: pointer;

            @media (max-width: 1023px) {
              position: absolute;
              top: 9%;
            }

            > i {
              z-index: 10;
              top: 9px;
              background-color: white;
              border: solid 1px #616161;
              border-radius: 50%;
              padding: 6px;
              margin-top: 8px;

              @media (max-width: 1023px) {
                transform: rotate(90deg);
              }

              &:hover {
                background: #e6e6e6;
              }
            }
          }
        }
      }
    }

    .cip-panel__dynamic-component {
      .cip-form__advanced {
        .cip-form__btn--search button {
          font-size: 13px;
          box-shadow: 0px 12px 15px -3px #5f5f5f3b;
          .v-btn__content span {
            font-size: 16px !important;
          }
        }
      }

      .cip-form {
        & .v-input__slot > fieldset {
          border-radius: 8px;
        }

        & .error--text .v-input__slot > fieldset {
          border: 2px solid var(--v-error-base);
        }

        .v-btn {
          border-radius: 8px;
        }

        position: relative;
        display: grid;
        grid-column-gap: 10px;
        grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end];
        grid-template-columns: 3fr 2.4fr 1.6fr;
        grid-template-areas: "origin cipType depdate" ". passengers search";

        & > .cip-form__textfield--depdatepicker {
          input {
            font-size: 13px;
          }
        }

        .cip-form {
          &__input {
            &--origin {
              grid-area: origin;
              .v-autocomplete__content {
                left: 10px !important;
              }
            }
          }

          &__cipType {
            grid-area: cipType;
          }
          &__menu--passengers {
            grid-area: passengers;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }
            }
          }

          &__textfield {
            &--depdatepicker {
              grid-area: depdate;
            }
          }

          &__btn--search {
            grid-area: search;

            > button {
              font-size: 13px;
              box-shadow: 0px 12px 15px -3px #5f5f5f3b;
              .v-btn__content span {
                font-size: 16px !important;
              }
            }
          }
        }
      }
    }

    .insurance-panel__dynamic-component {
      font-size: 13px;

      .insurance-form > form {
        @media (min-width: 1023px) {
          display: grid;
          grid-template-columns: 3fr 2.4fr 1.6fr;
          grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end];
          grid-template-areas: "country duration visatype" ". guests search";

          & > div {
            padding-top: 0px;
            padding-bottom: 0px;
            padding-left: 10px;
            padding-right: 0px;
          }
        }

        display: grid;
        grid-template-columns: repeat(1, minmax(60px, 1fr));
        grid-auto-rows: minmax(70px, auto);
        grid-template-areas: "country" "duration" "visatype" "guests" "search";
      }

      .insurance-form {
        font-size: 13px !important;

        &__input {
          &--insurance {
            grid-area: country;

            .v-autocomplete__content {
              left: 10px !important;
            }
          }
        }

        &__textfield--duration {
          grid-area: duration;

          input {
            font-size: 13px;
          }
        }

        &__textfield--visa-type {
          grid-area: visatype;

          input {
            font-size: 13px;
          }
        }

        &__menu--guests {
          @media (min-width: 1023px) {
            grid-area: guests;

            .v-input {
              grid-area: guest_input;
            }

            input {
              font-size: 13px !important;
            }

            .v-menu__content.theme--light.menuable__content__active {
              border-bottom-left-radius: 10px;
              border-bottom-right-radius: 10px;
            }

            .v-list-item {
              justify-content: space-between;
              min-height: 35px;

              &::after {
                display: none;
              }

              &:nth-child(3) {
                margin-bottom: 10px;
              }
            }

            .v-menu__content {
              & > div {
                & > button {
                  border: 1.5px solid rgb(46, 196, 182) !important;
                  color: rgb(46, 196, 182) !important;
                  background-color: white !important;
                  box-shadow: none !important;
                  width: 90%;
                  margin: 0.4rem 0;
                }
              }
            }
          }
        }

        &__btn--search {
          grid-area: search;

          > button {
            font-size: 13px;
            box-shadow: 0px 12px 15px -3px #5f5f5f3b;
            .v-btn__content span {
              font-size: 16px !important;
            }
          }
        }
      }

      .foreign-form > form {
        position: relative;
        display: grid;
        grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end];
        grid-template-columns: repeat(4, minmax(250px, 1fr));
        grid-template-areas: "hotel hotel checkin checkout" "guests nationality country search";

        & > div {
          padding-top: 0px;
          padding-bottom: 0px;
          padding-left: 10px;
          padding-right: 0px;
        }

        & > .foreign-form__textfield--checkinDatepicker {
          input {
            font-size: 13px;
          }
        }

        & > .foreign-form__textfield--checkoutDatepicker {
          input {
            font-size: 13px;
          }
        }

        @media (max-width: 1023px) {
          grid-template-columns: repeat(1, minmax(60px, 1fr));
          grid-auto-rows: minmax(70px, auto);
          grid-template-areas: "hotel" "checkin" "checkout" "guests" "nationality" "country" "search";
        }

        .foreign-form {
          &__input {
            &--hotel {
              grid-area: hotel;

              .v-autocomplete__content {
                left: 10px !important;
              }
            }
          }

          &__menu--guests {
            grid-area: guests;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }

              &:nth-child(3) {
                margin-bottom: 10px;
              }
            }

            .v-menu__content {
              & > div {
                & > button {
                  border: 1.5px solid rgb(46, 196, 182) !important;
                  color: rgb(46, 196, 182) !important;
                  background-color: white !important;
                  box-shadow: none !important;
                  width: 90%;
                  margin: 0.4rem 0;
                }
              }
            }
          }

          &__menu--country {
            grid-area: country;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }
            }
          }

          &__menu--nationality {
            grid-area: nationality;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }
            }
          }

          &__textfield {
            &--checkinDatepicker {
              grid-area: checkin;
            }

            &--checkoutDatepicker {
              grid-area: checkout;
            }
          }

          &__btn--search {
            grid-area: search;

            > button {
              font-size: 13px;
              box-shadow: 0px 12px 15px -3px #5f5f5f3b;
              .v-btn__content span {
                font-size: 16px !important;
              }
            }
          }
        }
      }
    }

    .v-divider {
      max-width: 96%;
      margin: auto !important;
      display: none;
    }
  }
  &.theme4 {
    // width: 80%;
    margin: auto;
    .v-card.v-sheet.theme--light {
      box-shadow: 0 6px 31px -13px rgba(0, 0, 0, 0.21);
      border-radius: 20px;
    }

    .v-tabs-bar {
      height: 20%;
      border-radius: 20px;
    }
    .main-homepage-class__tabs {
      > .v-tabs > .v-tabs-bar {
        background: #ffffff26 !important;
      }
    }
    .v-card:not(.defaultMenu) {
      background: #ffffffba !important;
    }
    .flight-panel {
      .v-input__slot {
        background: #ffffff26 !important;
      }
      .v-autocomplete__content {
        background: white;
      }
    }
    > div .v-tab {
      padding: 10px 0 !important;
      font-size: 13px;
      letter-spacing: 0px !important;
      max-width: 15%;

      @media (max-width: 960px) {
        max-width: 14%;
        min-width: 14;
      }

      @media (max-width: 600px) {
        max-width: 12%;
        min-width: 12%;
        margin-right: 8px !important;
        margin-left: 8px !important;
      }

      > i {
        margin-left: 0 !important;
        margin-right: 0 !important;
      }

      > svg {
        min-height: 24px;
        max-width: 28px;
      }

      &--active {
        border-bottom: 2px solid var(--v-primary-base) !important;

        i {
          color: var(--v-primary-base) !important;
        }
      }
    }

    .flight-panel__radiogroup,
    .hotel-panel__radiogroup {
      margin-top: 10px;
      .v-input__slot {
        background-color: transparent !important;
      }

      & > div > div > div > div {
        display: flex;
        flex-direction: row;
        font-size: 13px;
      }
    }

    .flight-panel__radio {
      &--oneway,
      &--twoway,
      &--multiway {
        & > div > label {
          margin: 0;
        }

        margin: 10px 0;
      }
    }

    .cip-panel__radio {
      &--oneway,
      &--twoway {
        & > div > label {
          margin: 0;
        }

        margin-top: 20px;
        margin-bottom: 10px;
      }
    }

    .hotel-panel__radio {
      &--domestic,
      &--foreign {
        & > div > label {
          margin: 0;
        }

        margin: 5px;
      }
    }

    .flight-panel__select-container {
      display: flex !important;
      justify-content: space-between;
    }

    .flight-panel__checkboxes {
      width: 50%;

      .v-input--checkbox {
        align-items: center;
      }
    }

    .flight-panel__dynamic-component {
      font-size: 13px;

      .v-input--is-disabled {
        .v-input__slot > fieldset {
          border: 1px solid #cecece !important;
          border-radius: 8px;
        }
      }

      .oneway-form > form {
        & .v-input__slot > fieldset {
          border: 1px solid #616161;
          border-radius: 8px;
        }

        // & .v-input--is-focused .v-input__slot>fieldset {
        //   border: 2px solid var(--v-primary-base);
        // }

        & .error--text .v-input__slot > fieldset {
          border: 2px solid var(--v-error-base);
        }

        .v-btn {
          border-radius: 8px;
        }

        @media (max-width: 1023px) {
          .v-input__slot,
          .v-text-field__details {
            margin-bottom: 0px;
          }
        }

        position: relative;
        display: grid;
        grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end];
        grid-template-columns: repeat(2, minmax(25%, 1fr)) 0.005px repeat(
            2,
            minmax(25%, 1fr)
          );
        grid-template-areas: "origin origin button destination destination" "depdate retdate . passengers search";

        & > div {
          padding-top: 0px;
          padding-bottom: 0px;
          padding-left: 10px;
          padding-right: 0px;
        }

        & > .oneway-form__swap-button {
          justify-self: center;
          cursor: pointer;
        }

        & > .oneway-form__textfield--depdatepicker {
          // padding-left: 0em;
          // padding-right: 0em;
          input {
            font-size: 13px;
          }
        }

        & > .oneway-form__textfield--retdatepicker {
          // padding-left: 1em;
          // padding-right: 0em;
          input {
            font-size: 13px;
          }
        }

        @media (max-width: 1023px) {
          grid-template-columns: repeat(1, minmax(60px, 1fr));
          grid-auto-rows: minmax(70px, auto);
          grid-template-areas: "origin " "destination" "depdate" "retdate" "passengers" "search";

          & > div:not(.oneway-form__swap-button) {
            padding: 0 10px;
            cursor: pointer;
          }
        }

        .oneway-form {
          &__input {
            &--origin {
              grid-area: origin;

              .v-autocomplete__content {
                left: 10px !important;
              }
            }

            &--destination {
              grid-area: destination;

              .v-autocomplete__content {
                left: 10px !important;
              }
            }
          }

          &__menu--passengers {
            grid-area: passengers;

            .v-card:not(.defaultMenu) {
              background: #fff !important;
            }

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }
            }
          }

          &__textfield {
            &--depdatepicker {
              grid-area: depdate;
            }

            &--retdatepicker {
              grid-area: retdate;
            }
          }

          &__btn--search {
            grid-area: search;

            > button {
              font-size: 13px;
              box-shadow: 0px 12px 15px -3px #5f5f5f3b;
            }
          }

          &__swap-button {
            display: flex;
            justify-content: center;
            align-items: center;
            align-self: start;
            grid-area: button;
            cursor: pointer;

            @media (max-width: 1023px) {
              position: absolute;
              top: 9%;
            }

            > i {
              z-index: 10;
              top: 9px;
              background-color: white;
              border: solid 1px #616161;
              border-radius: 50%;
              padding: 6px;
              margin-top: 8px;

              @media (max-width: 1023px) {
                transform: rotate(90deg);
              }

              &:hover {
                background: #e6e6e6;
              }
            }
          }
        }
      }

      .twoway-form > .v-input--is-disabled {
        .v-input__slot > fieldset {
          border: 1px solid #cecece !important;
          border-radius: 8px;
        }
      }

      .twoway-form > form {
        & .v-input__slot > fieldset {
          border: 1px solid #616161;
          border-radius: 8px;
        }

        // & .v-input--is-focused .v-input__slot>fieldset {
        //   border: 2px solid var(--v-primary-base);
        // }

        & .error--text .v-input__slot > fieldset {
          border: 2px solid var(--v-error-base);
        }

        .v-btn {
          border-radius: 8px;
        }

        @media (max-width: 1023px) {
          .v-input__slot,
          .v-text-field__details {
            margin-bottom: 0px;
          }
        }

        position: relative;
        display: grid;
        grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end];
        grid-template-columns: repeat(2, minmax(25%, 1fr)) 0.005px repeat(
            2,
            minmax(25%, 1fr)
          );
        grid-template-areas: "origin origin button destination destination" "depdate retdate . passengers search";

        & > div {
          padding-top: 0px;
          padding-bottom: 0px;
          padding-left: 10px;
          padding-right: 0px;
        }

        & > .twoway-form__swap-button {
          justify-self: center;
          cursor: pointer;
        }

        & > .twoway-form__textfield--depdatepicker {
          // padding-left: 0em;
          // padding-right: 0em;
          input {
            font-size: 13px;
          }
        }

        & > .twoway-form__textfield--retdatepicker {
          // padding-left: 1em;
          // padding-right: 0em;
          input {
            font-size: 13px;
          }
        }

        @media (max-width: 1023px) {
          grid-template-columns: repeat(1, minmax(60px, 1fr));
          grid-auto-rows: minmax(70px, auto);
          grid-template-areas: "origin " "destination" "depdate" "retdate" "passengers" "search";

          & > div:not(.twoway-form__swap-button) {
            padding: 0 10px;
            cursor: pointer;
          }
        }

        .twoway-form {
          &__input {
            &--origin {
              grid-area: origin;

              input {
                padding: 0px 15px;
              }

              .v-autocomplete__content {
                left: 10px !important;
              }
            }

            &--destination {
              grid-area: destination;

              input {
                padding: 0px 15px;
              }

              .v-autocomplete__content {
                left: 10px !important;
              }
            }
          }

          &__menu--passengers {
            grid-area: passengers;
            .v-card:not(.defaultMenu) {
              background: #fff !important;
            }
            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }

              &:nth-child(3) {
                margin-bottom: 10px;
              }
            }
          }

          &__textfield {
            &--depdatepicker {
              grid-area: depdate;
            }

            &--retdatepicker {
              grid-area: retdate;
            }
          }

          &__btn--search {
            grid-area: search;

            > button {
              font-size: 13px;
              box-shadow: 0px 12px 15px -3px #5f5f5f3b;
            }
          }

          &__swap-button {
            display: flex;
            justify-content: center;
            align-items: center;
            align-self: start;
            grid-area: button;
            cursor: pointer;

            @media (max-width: 1023px) {
              position: absolute;
              top: 9%;
            }

            > i {
              z-index: 10;
              top: 9px;
              background-color: white;
              border: solid 1px #616161;
              border-radius: 50%;
              padding: 6px;
              margin-top: 8px;

              @media (max-width: 1023px) {
                transform: rotate(90deg);
              }

              &:hover {
                background: #e6e6e6;
              }
            }
          }
        }
      }

      .multiway-form > form {
        display: grid;
        grid-template-rows: [row1-start] 1fr [row1-end row2-start] min-content [row2-end];
        grid-template-columns: 5% minmax(30%, 1fr) 0.005px minmax(30%, 1fr) 25%;
        // grid-template-columns: repeat(6, 1fr);
        grid-template-areas: "formsegment formsegment formsegment formsegment formsegment" ". add passengers passengers search";

        & > div:not(.multiway-form__segment) {
          padding: 10px;
          cursor: pointer;
        }

        & .v-input__slot > fieldset {
          border: 1px solid #616161;
          border-radius: 8px;
        }

        // & .v-input--is-focused .v-input__slot>fieldset {
        //   border: 2px solid var(--v-primary-base);
        // }

        & .error--text .v-input__slot > fieldset {
          border: 2px solid var(--v-error-base);
        }

        .v-btn {
          border-radius: 8px;
        }

        & > div {
          padding-top: 0px;
          padding-bottom: 0px;
          padding-left: 10px;
          padding-right: 0px;
        }

        // & > .multiway-form__swap-button {
        //   justify-self: center;
        //   cursor: pointer;
        // }
        & > .multiway-form__textfield--depdatepicker {
          // padding-left: 0em;
          // padding-right: 0em;
          input {
            font-size: 13px;
          }
        }

        & > .multiway-form__textfield--retdatepicker {
          // padding-left: 1em;
          // padding-right: 0em;
          input {
            font-size: 13px;
          }
        }

        .multiway-form {
          &__segment {
            grid-area: formsegment;
            padding: 0px;

            &-row {
              > div {
                position: relative;
                display: grid;
                grid-template-rows: [row1-start] 1fr;
                grid-template-columns:
                  5% minmax(30%, 1fr) 0.005px minmax(30%, 1fr)
                  25%;
                grid-template-areas: "remove origin button destination depdatepicker";

                &
                  > div:not(.multiway-form__segment-row__swap-button):not(
                    .multiway-form__segment-row__btn--remove
                  ) {
                  padding: 0 10px;
                  cursor: pointer;
                }
              }

              &__input {
                &--origin {
                  grid-area: origin;

                  input {
                    padding: 0px 15px;
                  }

                  .v-autocomplete__content {
                    left: 10px !important;
                  }
                }

                &--destination {
                  grid-area: destination;

                  input {
                    padding: 0px 15px;
                  }

                  .v-autocomplete__content {
                    left: 10px !important;
                  }
                }
              }

              &__btn--remove {
                grid-area: remove;

                > .v-btn {
                  min-width: 35px;
                  height: 35px;
                }
              }

              &__textfield--depdatepicker {
                grid-area: depdatepicker;
              }

              &__swap-button {
                display: flex;
                justify-content: center;
                align-items: center;
                align-self: start;
                grid-area: button;
                cursor: pointer;

                @media (max-width: 991px) {
                  position: absolute;
                }

                > i {
                  z-index: 10;
                  top: 9px;
                  background-color: white;
                  border: solid 1px #616161;
                  border-radius: 50%;
                  padding: 6px;
                  margin-top: 8px;

                  @media (max-width: 991px) {
                    transform: rotate(90deg);
                  }

                  &:hover {
                    background: #e6e6e6;
                  }
                }
              }
            }
          }

          &__btn--add {
            grid-area: add;
            display: flex;

            > .v-btn {
              min-width: 50%;
              height: 56px;
              margin: 0px;
            }
          }

          &__btn--search {
            grid-area: search;
          }

          &__menu--passengers {
            grid-area: passengers;
            padding-right: 0px !important;
            .v-card:not(.defaultMenu) {
              background: #fff !important;
            }

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }

              &:nth-child(3) {
                margin-bottom: 10px;
              }
            }
          }
        }
      }
    }

    .hotel-panel__dynamic-component {
      font-size: 13px;

      .domestic-form > form {
        @media (min-width: 1023px) {
          display: grid;
          grid-template-columns: minmax(250px, 2fr) repeat(
              2,
              minmax(250px, 1fr)
            );
          grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end];
          grid-template-areas: "hotel checkin checkout" ". guests search";
          //grid-template-areas: "checkout checkin chekin""checkin checkin checkin";

          & > div {
            padding-top: 0px;
            padding-bottom: 0px;
            padding-left: 10px;
            padding-right: 0px;
          }
        }

        // padding: 0em 1em;
        display: grid;
        grid-template-columns: repeat(1, minmax(60px, 1fr));
        grid-auto-rows: minmax(70px, auto);
        grid-template-areas: "hotel" "checkin" "checkout" "guests" "search";
      }

      // >*:not(.oneway-form__swap-button) {
      //     padding: 0px .5em;
      // }

      .domestic-form {
        font-size: 13px !important;

        &__input {
          &--hotel {
            grid-area: hotel;

            .v-autocomplete__content {
              left: 10px !important;
            }
          }
        }

        &__textfield--checkinDatepicker {
          grid-area: checkin;

          input {
            font-size: 13px;
          }
        }

        &__textfield--checkoutDatepicker {
          grid-area: checkout;

          input {
            font-size: 13px;
          }
        }

        &__menu--guests {
          @media (min-width: 1023px) {
            grid-area: guests;

            .v-input {
              grid-area: guest_input;
            }

            input {
              font-size: 13px !important;
            }

            .v-menu__content.theme--light.menuable__content__active {
              border-bottom-left-radius: 10px;
              border-bottom-right-radius: 10px;
            }

            .v-list-item {
              justify-content: space-between;
              min-height: 35px;

              &::after {
                display: none;
              }

              &:nth-child(3) {
                margin-bottom: 10px;
              }
            }

            .v-menu__content {
              & > div {
                & > button {
                  border: 1.5px solid rgb(46, 196, 182) !important;
                  color: rgb(46, 196, 182) !important;
                  background-color: white !important;
                  box-shadow: none !important;
                  width: 90%;
                  margin: 0.4rem 0;
                }
              }
            }
          }
        }

        &__btn--search {
          grid-area: search;

          > button {
            font-size: 13px;
            box-shadow: 0px 12px 15px -3px #5f5f5f3b;
          }
        }
      }

      .foreign-form > form {
        position: relative;
        display: grid;
        grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end];
        grid-template-columns: repeat(4, minmax(250px, 1fr));
        grid-template-areas: "hotel hotel checkin checkout" "guests nationality country search";

        & > div {
          padding-top: 0px;
          padding-bottom: 0px;
          padding-left: 10px;
          padding-right: 0px;
        }

        & > .foreign-form__textfield--checkinDatepicker {
          // padding-left: 0em;
          // padding-right: 0em;
          input {
            font-size: 13px;
          }
        }

        & > .foreign-form__textfield--checkoutDatepicker {
          // padding-left: 1em;
          // padding-right: 0em;
          input {
            font-size: 13px;
          }
        }

        @media (max-width: 1023px) {
          grid-template-columns: repeat(1, minmax(60px, 1fr));
          grid-auto-rows: minmax(70px, auto);
          grid-template-areas: "hotel" "checkin" "checkout" "guests" "nationality" "country" "search";
        }

        .foreign-form {
          &__input {
            &--hotel {
              grid-area: hotel;

              .v-autocomplete__content {
                left: 10px !important;
              }
            }
          }

          &__menu--guests {
            grid-area: guests;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }

              &:nth-child(3) {
                margin-bottom: 10px;
              }
            }

            .v-menu__content {
              & > div {
                & > button {
                  border: 1.5px solid rgb(46, 196, 182) !important;
                  color: rgb(46, 196, 182) !important;
                  background-color: white !important;
                  box-shadow: none !important;
                  width: 90%;
                  margin: 0.4rem 0;
                }
              }
            }
          }

          &__menu--country {
            grid-area: country;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }
            }
          }

          &__menu--nationality {
            grid-area: nationality;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }
            }
          }

          &__textfield {
            &--checkinDatepicker {
              grid-area: checkin;
            }

            &--checkoutDatepicker {
              grid-area: checkout;
            }
          }

          &__btn--search {
            grid-area: search;

            > button {
              font-size: 13px;
              box-shadow: 0px 12px 15px -3px #5f5f5f3b;
            }
          }
        }
      }
    }

    .cip-panel__dynamic-component {
      .cip-form__advanced {
        .cip-form__btn--search button {
          font-size: 13px;
          box-shadow: 0px 12px 15px -3px #5f5f5f3b;
        }
      }

      .cip-form {
        & .v-input__slot > fieldset {
          border: 1px solid #616161;
          border-radius: 8px;
        }

        & .error--text .v-input__slot > fieldset {
          border: 2px solid var(--v-error-base);
        }

        .v-btn {
          border-radius: 8px;
        }

        position: relative;
        display: grid;
        grid-column-gap: 10px;
        grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end];
        grid-template-columns: 3fr 2fr 2fr;
        grid-template-areas: "origin depdate passengers" ".  . search";

        & > .cip-form__textfield--depdatepicker {
          input {
            font-size: 13px;
          }
        }

        .cip-form {
          &__input {
            &--origin {
              grid-area: origin;

              .v-autocomplete__content {
                left: 10px !important;
              }
            }
          }

          &-travelType {
            grid-area: travelType;
          }

          &-flightType {
            grid-area: flightType;
          }

          &__menu--passengers {
            grid-area: passengers;

            input {
              font-size: 13px !important;
            }

            .v-list-item {
              justify-content: space-between;

              &::after {
                display: none;
              }
            }
          }

          &__textfield {
            &--depdatepicker {
              grid-area: depdate;
            }
          }

          &__btn--search {
            grid-area: search;

            > button {
              font-size: 13px;
              box-shadow: 0px 12px 15px -3px #5f5f5f3b;
            }
          }
        }
      }
    }

    .v-divider {
      max-width: 96%;
      margin: auto !important;
    }
  }
}