/* cargador de rafagas */
.transportesrafagas-container {
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 0;
}
.transportesrafagas-content {
  background: $brand-grey-light;
  .container-limited {
    > div {
      height: 50px;
      margin: 0;
      @media (min-width: $screen-sm-min) {
        margin: 5px 0;
      }
      span {
        line-height: 50px;
        vertical-align: middle;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .rafagas-text {
      font-size: 16px;
      @media (min-width: $screen-sm-min) {
        font-size: 18px;
      }
      font-weight: $roboto-light;
      color: $brand-grey-dark;
      padding-left: 0;
      text-align: center;
      @media (min-width: $screen-sm-min) {
        text-align: left;
      }
      @media (min-width: $screen-md-min) {
        padding-left: 100px;
        background-repeat: no-repeat;
        background-position: left top;
        background-image: url('/headers/ilusion/img/flights/transport_design.png');
        @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
          background-image: url('/headers/ilusion/img/flights/transport_design@2x.png');
          background-size: contain;
        }
      }
      span {
        color: $brand-primary;
        &:after {
          content: '...';
        }
      }
      &.rafagas-hotel{
        @media (min-width: $screen-md-min) {
          padding-left: 100px;
          background-repeat: no-repeat;
          background-position: left top;
          background-image: url('/headers/ilusion/img/hotels/icn-rafaga-hotel.png');
          @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
            background-image: url('/headers/ilusion/img/hotels/icn-rafaga-hotel@2x.png');
            background-size: contain;
          }
        }
      }
    }
    .rafagas-company {
      text-transform: uppercase;
    }
    .rafagas-company, .rafagas-journey {
      font-size: 14px;
      color: $brand-copy-light;
      border-left: 2px dotted #dfdfde;
      padding-left: 30px;
      span {
        font-weight: $roboto-light;
        padding-left: 20px;
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
        &:after {
          position: absolute;
          left: 0;
          top: 50%;
          margin-top: -6px;
          background-image: url('/headers/ilusion/'+ $assets-folder +'/dist/svg/icon-ownfill-graph-check-ec5b14.svg'), none;
        }
      }
    }
  }
}
.transportesrafagas-loader {
  background: $brand-brown-medium;
  width: 100%;
  height: 6px;
  &:before {
    content: '';
    display: block;
    background: $brand-primary;
    width: 0;
    height: 6px;
    transition: width 30s linear;
  }
  &.transportesrafagas-slow {
    &:before {
      transition: width 60s linear;
    }
  }
  &.loading:before {
    width: 100%;
  }
}


  /* a partir de 992 */
@media (min-width: $screen-sm) {
  // Progress Bar
  .progress_bar_availability {
    height: 6px;
    background-color: $brand-brown-medium;
    border-radius: 0;
    overflow: hidden;
    margin:0;
    .line_move {
      animation: 2.5s indeterminate linear infinite;
      width: 180px;
      background:$brand-primary;
      height:6px;
    }
  }
  @keyframes indeterminate {
    from {
      transform: translate(0, 0) ;   /* UC Browser */
      transform: translate(-15vw, 0) ;
    }
    100% {
      transform: translate(900%, 0) ;/* UC Browser */
      transform: translate(115vw, 0) ;
    }
    0%{
      transform: translate(0, 0) ;   /* UC Browser */
      transform: translate(-15vw, 0) ;
    }
  }
}

/* Comportamientos móvil y tablet: BOC */
@media (max-width: $screen-sm-max) {
  // Progress Bar Mobile
  .progress_bar_availability {
    height: 6px;
    background-color: $brand-brown-medium;
    border-radius: 0;
    overflow: hidden;
    margin:0;
    .line_move {
      animation: 1.3s indeterminate linear infinite;
      width: 90px;
      background:$brand-primary;
      height:6px;
    }
  }
  @keyframes indeterminate {
    0% {
      transform: translate(0, 0) ;    /* UC Browser */
      transform: translate(-15vw, 0) ;
    }
    100% {
      transform: translate(600%, 0%) ;/* UC Browser */
      transform: translate(115vw, 0) ;
    }
    0%{
      transform: translate(0, 0) ;   /* UC Browser */
      transform: translate(-15vw, 0) ;
    }
  }
}