/* Resumen compra Vuelos 2 col */

.services-main-container {
  padding-left: 30px;
  padding-right: 30px;
}

.services-main {
  padding: 0;
  margin-bottom: 0;
  position: relative;
  .main-container {
    border-radius: $border-radius-large;
    box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.15);
    background-color: $brand-white;
    border: 1px solid $input-border;
    padding: 15px 15px;
    display: flex;
    flex-flow: row wrap;
    position: relative;

    .services_flights_container {
      @media (max-width: 1199px) {
        width: 100%;
      }
      @media (max-width: $grid-float-breakpoint-max) {
        flex-direction: column;
      }
    }
    .services_flights_container_tablet {
      @media (min-width: $grid-float-breakpoint) and (max-width: 1199px) {
        border-bottom: 1px dotted $input-border;
      }
    }
    .services_flights_container_full {
      width: 100%;
      .services_flights_block:nth-child(2) {
        &:before {
          display: none;
        }
      }
    }

    @media (min-width: $grid-float-breakpoint) and (max-width: 1199px) {
      .services_flights_container {
        width: 100%;
      }
    }

    .included_container_message {
      padding-top: 15px;
      border-top: 1px solid $colorBordes;
      display: inline-flex;
      flex: 1 0 100%;
      flex-direction: row-reverse;
      @media (max-width: $grid-float-breakpoint-max) {
        flex-flow: column wrap;
        span {
          text-align: center;
        }
      }
      span {
        color: $interactive-color;
        font-size: $font-size-large;
      }
    }
  }
  //Bloque etiquetas cuadro resumen --> Bloque duplicado por el diseño
  @media (max-width: 1199px) {
    .labels_container_desktop {
      display: none;
    }
  }
  @media (min-width: $screen-lg-min) {
    .labels_container_tablet {
      display: none !important;
    }
  }
  .labels_container_tablet {
    display: flex;
    margin-bottom: 10px;
    margin-top: 10px;
    float: left;
    @media (min-width: $grid-float-breakpoint) and (max-width: 1199px) {
      width: 50%;
    }
    @media (max-width: $grid-float-breakpoint-max) {
      width: 100%;
    }
  }

  .services_flights_price_block {
    width: 33%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    @media (max-width: $grid-float-breakpoint-max) {
      width: 100%;
      margin-bottom: 15px;
    }
    @media (min-width: $grid-float-breakpoint) and (max-width: 1199px) {
      width: 50%;
      flex: 1;
      min-height: 58px;
      margin-bottom: 10px;
      margin-top: 10px;
      justify-content: flex-end;
      flex-direction: row;
    }
  }
  @media (min-width: $grid-float-breakpoint) and (max-width: 1199px) {
    .services_flights_block:nth-child(2) {
      &:before {
        display: none;
      }
    }
  }
  .below_booking_button_container {
    padding-right: 0;
    .below_booking_button {
      padding-top: 10px;
      font-size: $font-size-large;
      text-align: center;
      @media (min-width: $grid-float-breakpoint) and (max-width: 1199px) {
        text-align: right !important;
      }
      .link_block-price {
        .farekeep-button {
          font-size: $font-size-base;
        }
        .icon {
          width: 18px;
          height: 18px;
          vertical-align: middle;
          * {
            fill: $brand-secondary;
          }
        }
      }
    }
  }
  .services_flights_message, .services_flights_message_sel {
    margin-top: 15px;
    margin-bottom: 15px;
    color: $brand-green;
    display: flex;
    span {
      margin: auto;
      margin-left: 0;
    }
    @media (max-width: 1199px) {
      margin-bottom: 15px;
      margin-left: 0;
    }
  }

  .return_flight_empty_option {
    @media (max-width: $grid-float-breakpoint-max) {
      padding-top: 15px;
      padding-left: 0;
    }
  }
  @media (max-width: $grid-float-breakpoint-max) {
    .return_flight_empty_option.services_flights_block {
      &:after {
        display: none;
      }
    }
    .services_flights_block:nth-child(2) {
      padding-top: 15px;
    }
  }
  @media (min-width: 1119px) {
    .services_flights_block:nth-child(2) {
      padding-left: 15px;
    }
  }

  .services_flights_block {
    width: 100%;
    position: relative;
    padding-right: 0;
    padding-left: 0;
    .services_flights_message_block, .services_flights_message {
      padding-left: 0;
    }
    &:after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      border-bottom: 1px dotted $input-border;
      bottom: 0;
    }
    @media (min-width: $screen-lg-min) {
      width: 50%;
      padding-right: 15px;
      &:after {
        display: none;
      }
      &:before {
        content: '';
        position: absolute;
        top: 5px;
        bottom: 20px;
        right: -2px;
        border-right: 1px dotted $input-border;
      }
      &.return_flight_empty_option {
        &:before {
          display: none;
        }
      }
    }

    @media (min-width: $grid-float-breakpoint) and (max-width: 1199px) {
      width: 50%;
      padding-right: 30px;
      &:after {
        display: none;
      }
      &:before {
        content: '';
        position: absolute;
        top: 5px;
        bottom: 20px;
        right: 15px;
        border-right: 1px dotted $input-border;
      }
    }
    @media (max-width: $grid-float-breakpoint-max) {
      width: 100%;
      padding-right: 0;
      padding-left: 0;
    }

    .hotel_container{
      margin-top: 0;
      min-height: 120px;
    }
    .info_container {
      min-height: 142px;
    }
    .hotel_container_active {
      &:before {
        content: '';
        position: absolute;
        left: 0;
        border-left: 2px solid $brand-secondary;
        bottom: 0;
        top: 0;
        margin-left: -15px;
      }
    }
    .info_container {
      min-height: 142px;
    }
    .service_icon * {
      fill: $brand-copy-light !important;
    }
    .service_icon {
      width: 18px;
      height: 18px;
      vertical-align: middle;
    }
    .services_container {
      .service_label {
        vertical-align: middle;
        text-transform: uppercase;
        font-weight: $roboto-light;
        color: $brand-grey-dark;
        margin-left: 10px;
      }
      @media (max-width: $grid-float-breakpoint-max) {
        .services_flights_second-block {
          margin-top: 12px;
        }
      }
      .services-label-container {
        flex: 1 1 100%;
        vertical-align: middle;
        font-size: $font-size-base;
        font-weight: $roboto-light;
        color: $brand-copy-light;
        @media (max-width: $grid-float-breakpoint-max) {
          margin-bottom: 15px;
        }
        @media (min-width: $grid-float-breakpoint) {
          margin-bottom: 12px;
        }

        .services-add {
          float: right;
          text-transform: capitalize;
          button {
            font-size: $font-size-base;
            color: $interactive-color !important;
          }
        }
      }
    }
  }

  .link_block-price {
    .farekeep-button {
      font-size: $font-size-base;
    }
    .icon {
      width: 18px;
      height: 18px;
      vertical-align: middle;
      * {
        fill: $brand-secondary;
      }
    }
  }

  .services-extra-label {
    margin-left: 10px;
    vertical-align: middle;
    text-transform: uppercase;
  }

  .service_icon_back {
    transform: rotateY(180deg);
  }


  .destacados {
    top: 0;
    left: 0;
    line-height: 15px;
    margin-bottom: 0;
    li {
      vertical-align: middle;
      padding: 1px 4px;
      line-height: 1.2;
      font-size: 11px;
      border-width: 1px;
      border-style: solid;
      overflow: hidden;
      display: inline-block;
      margin-right: 10px;
      margin-bottom: 9px;
    }
    .recomendada {
      color: $colorRecomendada;
      border-color: rgba($colorRecomendada, 0.5)!important;
      background: $brand-grey-light;
    }
    .SValentin {
      color: $colorSValentin;
      border-color: rgba($colorSValentin, 0.5) !important;
      background: $brand-grey-light;
    }
    .noGastosGestion {
      color: $colorNoGastosGestion;
      border-color: rgba($colorNoGastosGestion, 0.5) !important;
      background: $brand-grey-light;
    }
    .tarExclusiva {
      color: $colorTarExclusiva;
      border-color: rgba($colorTarExclusiva, 0.5) !important;
      background: $brand-grey-light;
    }
    .BFriday {
      color: $colorBFriday;
      border-color: rgba($colorBFriday, 0.5) !important;
      background: $brand-grey-light;
    }
    .vueloExclusivo {
      color: $colorVueloExclusivo;
      border-color: rgba($colorVueloExclusivo, 0.5) !important;
      background: $brand-grey-light;
    }
  }
}

/*rtl:ignore*/
[dir='rtl'] .services-main .service_icon.service_icon_back {
  transform: rotateY(0deg)!important;
}

[dir='rtl'] .services-main .service_icon:first-child {
  transform: rotateY(180deg);
}

/* Fin Resumen compra Vuelos 2 col */

/* Resumen VUELOS cuadro compra */
.box-service-summary {
  .transportline {
    display: flex;
    overflow:hidden;
    margin-bottom: 20px;
    .block-itinerary {
      display: flex;
      width: 70%;
      .starttime {
        margin-right: 10px;
      }
      .backtime {
        margin-left: 10px;
      }
    }
    .selectedservices-fixed & {
      margin-bottom: 16px;
    }
    & + .transportline {
      margin-bottom: 0;
    }
    > div {
      float:left;
      & + div {
        margin-left: 17px;
      }
      &.icons {
        float: right;
        margin-left: 0;
        svg.icon-anyfill-graph-warning{
          fill:$brand-red;
          width:20px;
          height:20px;
          margin:0;
        }
        & > img{
          width:14px;
          height:14px;
        }
      }
    }
    .icondirection {
      line-height: 36px;
      .selectedservices-fixed & {
        line-height: 22px;
      }
      svg {
        width: 11px;
        height: 11px;
        &, & * {
          fill: $brand-grey-dark;
        }
      }
      /*rtl:ignore*/
      [dir='ltr'] &.direction-vuelta, [dir='rtl'] &.direction-ida {
        .icon-anyfill-ui-arrow-right {
          transform: rotate(-180deg);
        }
      }
    }
    .placetime {
      > span {
        display: block;
        .selectedservices-fixed & {
          display: inline-block;
        }
        &.place {
          text-align: left;
          color: $brand-copy-light;
          font-size: 12px;
          line-height: 16px;
          text-transform: uppercase;
          font-weight: $roboto-light;
          .selectedservices-fixed & {
            width: 30px;
          }
        }
        &.time {
          text-align: left;
          color:$brand-grey-dark;
          font-size: 16px;
          line-height: 21px;
          font-weight: $roboto-regular;
          .extraday {
            display: inline-block;
            color: $brand-red;
            font-size: 11px;
            font-weight: $roboto-regular;
          }
        }
      }
    }
    .durationstops-flights {
      text-align: center;
      width: 22%;
      @media (min-width: 550px) and (max-width: $screen-xs-max) {
        width: 55%;
      }
      @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
        width: 30%;
        .selectedservices-fixed & {
          width: 13%;
        }
      }
      @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
        width: 48%;
        .selectedservices-fixed & {
          width: 33%;
        }
      }
      @media (min-width: $screen-lg-min) {
        width: 60%;
        .selectedservices-fixed & {
          width: 13%;
        }
      }
      .duration {
        font-size: 11px;
        line-height: 12px;
        color:$brand-copy-light;
      }
      .stopsdata {
        font-size: 12px;
        line-height: 12px;
        color: $brand-grey-dark;
        .direct {
          color: $brand-green;
        }
      }
      .duration, .stopsdata {
        .selectedservices-fixed & {
          display: none;
        }
        @media (max-width: $grid-float-breakpoint-max) {
          display: none;
        }
      }
      .stopsdiagram {
        position: relative;
        height: 8px;
        width: 100%;
        line-height: 6px;
        margin-bottom: 2px;
        .selectedservices-fixed & {
          margin-top: 7px;
        }
        @media (max-width: $grid-float-breakpoint-max) {
          margin-top: 12px;
        }
        &:before, &:after {
          content:'';
          background: $brand-copy-light;
          border-radius: 50%;
          width: 6px;
          height: 6px;
          position: absolute;
          top: 50%;
          margin-top: -3px;
          z-index: 3;
        }
        &:before {
          left: 0;
        }
        &:after {
          right: 0;
        }
        > div {
          width: 100%;
          height: 1px;
          position: absolute;
          border: 1px solid #dad7d5;
          left: 0;
          top: 50%;
          margin-top: -1px;
          z-index: 1;
        }
        > span {
          background: #fff;
          display: inline-block;
          border: 1px solid #4a4a4a;
          border-radius: 50%;
          width: 6px;
          height: 6px;
          position: relative;
          z-index: 3;
          & + span {
            margin-left: 12px;
            @media (max-width: $grid-float-breakpoint) {
              margin-left: 0;
            }
            .selectedservices-fixed & {
              margin-left: 5px;
            }
          }
        }
      }
    }
    .icons-info {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      width: 30%;
      @media (max-width: 1119px) {
        width: 40%;
      }
    }
    .icons {
      overflow:hidden;
      .icon {
        &.icon-anyfill-graph-luggage, &.icon-anyfill-graph-luggage-no {
          width: 20px !important;
          height: 20px !important;
          margin-right: 5px;
        }
        vertical-align: middle;
        .selectedservices-fixed & {
          vertical-align: top;
        }
      }
      .icono {
        float:left;
        vertical-align: middle;
        margin-top: 0;
        & + .icono {
          margin-left: 2px;
        }
        span[data-toggle="tooltip"] {
          display: inline-block;
          height: 24px;
        }
        svg {
          &.icon-anyfill-graph-luggage, &.icon-anyfill-graph-luggage-no {
            width: 20px !important;
            height: 20px !important;
          }
          vertical-align: middle;
          .selectedservices-fixed & {
            vertical-align: top;
          }
        }
        img {
          width: 24px;
          height: auto;
          vertical-align: middle;
        }
      }
    }
  }
}

/* Resumen VUELOS cuadro compra */