/*=====================================
Lista aéreo
====================================*/
.pagina-aereo {
  background: $background-2;
  min-height: calc(100vh - 100px);
  overflow: hidden;
  //overflow-y: scroll;
  color: $gray-2;

  p {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: inherit;
    font-size: 100%;
    font-weight: inherit;
    font-style: inherit;
    line-height: inherit;
    vertical-align: baseline;
    font-variant: inherit;
  }

  b {
    font-weight: bold;
  }

  .col-fechar {
    margin: 20px 0;
  }

  .resultado-titulo {
    display: flex;
    align-items: center;
    padding: 0 4px 12px 16px;

    h2 {
      color: $cinzaEscuro;
      font-size: rem(20);
      letter-spacing: normal;
      flex: 1;
      text-align: left;
    }

    .ordenacao {
      top: 0;
      flex: 0.5;
      max-width: 160px;
      text-align: right;

      .nice-select {
      }
    }
  }

  .aereo-filtros {
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 0 4px 12px 16px;

    .topo-filtro {
      padding-bottom: 10px;

      h2 {
        color: $cinzaEscuro;
        font-size: rem(20);
        letter-spacing: normal;
        padding-left: 8px;

        a {
          display: none;
          top: 7px;
          left: 7px;
          padding: 15px;
          position: absolute;
        }
      }
    }

    .box-filtro {
      border-top: 1px solid $gray-4;
      padding: 0 8px;

      &:last-child {
        border-bottom: 1px solid $gray-4;
      }

      .filtro-titulo {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        padding: 15px 0;
        overflow: hidden;
        cursor: pointer;

        .titulo {
          flex: 1;
          color: $gray-5;
          display: block;
          font-size: rem(18);
          font-weigth: $bold;
          position: relative;
          text-decoration: none;
          width: 100%;
        }

        .icone {
          flex: 0.01;
          position: relative;
          right: 3px;
          @include simple-transition();

          i {
            color: $gray-5;
            top: calc(50% - 8px);
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            font-size: rem(18);
          }
        }
      }

      .lista-filtro {
        display: flex;
        flex-direction: column;
        padding-bottom: 20px;
        display: none;

        h4 {
          font-size: rem(16);
          margin: 10px 0;
          position: relative;
          display: block;
          width: 100%;
          font-weight: $bold;

          &:first-of-type {
            margin-top: 0;
          }
        }

        .form-radio {
          padding: 0;
          margin-top: 18px;
          display: flex;
          align-items: center;

          img {
            margin-right: 10px;
          }

          &:first-of-type {
            margin-top: 0;
          }

          .form-radio-input {
            position: absolute;
            opacity: 0;
            z-index: -1;
          }

          label {
            font-size: rem(12);
            position: relative;
            display: inline-block;
            width: 100%;
            padding: 2px 0 0;
            min-height: 20px;
            line-height: normal;
            cursor: pointer;
            margin: 0;

            &::before,
            &::after {
              position: absolute;
              display: block;
            }

            &::before {
              content: " ";
              background-color: $branco;
              border: 1px solid $gray-4;
              border-radius: 4px;
              width: 20px;
              height: 20px;
              top: 0;
              right: 0;
            }
          }

          .form-radio-input + label::after {
            content: "\f00c";
            font-family: "Font Awesome 5 Free";
            color: #083241;
            top: 4px;
            right: 3px;
            font-size: rem(14);
            font-weight: 700;
          }

          input[type="checkbox"] + label::after,
          input[type="radio"] + label::after {
            -webkit-transform: scale(0);
            -ms-transform: scale(0);
            -o-transform: scale(0);
            transform: scale(0);
          }

          input[type="checkbox"]:checked + label::after,
          input[type="radio"]:checked + label::after {
            -webkit-transform: scale(1);
            -ms-transform: scale(1);
            -o-transform: scale(1);
            transform: scale(1);
          }

          input[type="checkbox"]:checked + label::before,
          input[type="radio"]:checked + label::before {
            background-color: $branco;
          }

          /* Transition */
          label::before,
          label::after {
            -webkit-transition: 0.25s all ease;
            -o-transition: 0.25s all ease;
            transition: 0.25s all ease;
          }
        }

        .range-slider-wrap {
          margin-top: 0;

          .irs {
            position: relative;
            display: block;
          }

          .irs-bar,
          .irs-bar-edge {
            background: $azul;
          }

          .irs-line,
          .irs-line-left {
            background: $branco;
          }
        }

        .horarios-pediodos {
          text-align: center;
          position: relative;
          display: flex;
          width: 100%;

          a {
            font-weight: bold;
            flex: 1;

            &:hover {
              color: $azul;
            }
          }
        }
      }
    }
  }

  .aereo-list {
    display: block;
    align-items: center;
    padding: 0 0 12px 0;

    .voo-item-detalhe {
      padding: 12px;
      background: $background-1;

      .voo-item-detalhe-content {
        border-radius: 8px;
        border: 1px solid $gray-4;
        padding-top: 15px;
        overflow: hidden;
        background: $branco;

        .airline-info {
          background-color: $branco;
          display: block;
          padding: 0 10px 10px;
          border-bottom: 1px solid $border-1;
          width: 100%;
          box-sizing: border-box;

          .airline-info-container {
            display: flex;
            flex-direction: row;
            align-items: center;

            &.xs {
              display: none;
            }

            &.md {
              display: flex;
            }

            .airline-info-conteudo {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding-left: 10px;
              width: 100%;

              .airline-nome {
                display: flex;
                flex-direction: column;
                font-size: rem(16);
                color: $gray-5;
                font-weight: bold;
                padding: 0;

                .nome {
                  text-align: left;
                  font-size: 16px;
                  color: $gray-5;
                  font-weight: bold;
                }

                .resumo {
                  font-size: 12px;
                  color: $gray-3;
                  padding-top: 5px;
                  text-align: left;
                }
              }

              .airline-data {
                display: flex;
                flex-direction: column;
                font-size: rem(13);
                color: $gray-3;
                text-align: right;
                line-height: 16px;
                width: 50%;
              }
            }
          }
        }

        .segmento-info {
          display: flex;
          flex-direction: column;
          box-sizing: border-box;
          background-color: $branco;

          .segmento-info-conteudo {
            display: flex;
            flex-direction: row;
            text-align: center;
            padding: 15px;

            .segmento-voo {
              display: flex;
              flex-direction: column;
              width: 35%;

              .data {
                width: 100%;
                font-size: rem(12);
                color: $gray-5;
                text-transform: capitalize;
              }

              .horario {
                font-size: rem(24);
                font-weight: bold;
                color: $gray-5;
                padding-top: 5px;
              }

              .sg-iata {
                padding-top: 10px;
                font-size: rem(16);
                color: $gray-3;
                font-weight: bold;
              }

              .cidade {
                font-size: rem(12);
                color: $gray-3;
              }

              .aeroporto-nome {
                line-height: 14px;
                padding-top: 10px;
                font-size: rem(12);
                color: $gray-3;
              }
            }

            .segmento-duracao {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              width: 30%;

              .duracao-info {
                position: relative;
                display: inline-block;
                padding: 0 20px;
                vertical-align: middle;

                .duracao-texto {
                  font-size: rem(13);
                  text-align: center;
                  color: $gray-3;
                  padding-bottom: 5px;
                  display: block;
                }

                .duracao-tempo {
                  color: $gray-5;
                  font-weight: bold;
                  font-size: rem(16);
                  text-align: center;
                }
              }
            }

            .segmento-classe {
              display: inline-flex;
              align-items: center;
              box-sizing: border-box;
              max-width: 210px;
              height: 20px;
              padding: 0 5px;
              border-radius: 4px;
              overflow: hidden;

              .segmento-texto {
                font-size: rem(12);
                line-height: 14px;
                white-space: nowrap;
                overflow: hidden;
              }
            }
          }
        }
      }

      .segmento-detalhe {
        font-size: rem(14);
        text-align: center;
        color: $gray-5;
        width: 100%;
        display: block;
        padding: 10px;
        box-sizing: border-box;
        border: solid 1px $gray-4;
        margin: 10px 0;
        position: relative;
        border-radius: 6px;
        background: $gray-1;

        &:before {
          content: "";
          height: 10px;
          width: 2px;
          top: -10px;
          background-color: $gray-6;
          position: absolute;
          left: 50%;
        }

        &:after {
          content: "";
          bottom: -10px;
          background-color: $gray-6;
          position: absolute;
          left: 50%;
          height: 10px;
          width: 2px;
        }

        &:last-of-type:after {
          content: none;
        }

        &:empty {
          padding: 0;
          border: none;

          &:after {
            content: none;
          }
        }
      }

      .horario-local {
        font-size: 11px;
        text-align: center;
        color: $gray-3;
        padding: 0;
      }
    }

    .aereo-item {
      background: $branco;
      width: 100%;
      border-radius: 4px;
      margin-bottom: 20px;
      border-radius: 8px;
      @include box-shadow-transition();
      //border: 1px solid $gray-4;

      &:hover {
        @include box-shadow1();
      }

      .conteudo {
        display: flex;

        .voo-list {
          position: relative;
          box-sizing: border-box;
          width: 100%;

          .voo-section {
            &:first-of-type {
              .voo-header {
                border-top: none;
                border-radius: 8px 0 0 0;
              }
            }
          }

          .voo-header {
            position: relative;
            box-sizing: border-box;
            width: 100%;
            padding: 10px 24px;
            display: flex;
            border-top: 1px solid $cinzaborder;
            height: 55px;
            background: #eee;

            .descricao {
              flex: 1;
              /*min-width: 200px;*/
              /*width: 200px;*/

              .tipo {
                font-size: rem(18);
                float: left;
                position: absolute;
                top: 11px;
                color: $gray-5;

                .resumo {
                  color: $gray-3;
                  display: none;
                }
              }

              .data {
                float: left;
                position: relative;
                top: 21px;
                font-size: rem(12);
                color: $gray-3;
              }
            }

            .flex-space {
              flex: 1;
            }

            .local {
              flex: 1;
              text-align: center;
              /*width: 200px;*/

              .aeroporto {
                font-weight: $bold;
                font-size: rem(16);
              }

              .cidade {
                font-size: rem(12);
                color: $gray-3;
              }
            }
          }

          .detalhe-btn {
            width: 40px;
            @include simple-transition();

            i {
              color: $gray-5;
              top: calc(50% - 8px);
              display: flex;
              flex-direction: column;
              align-items: center;
              position: relative;
              font-size: rem(18);
            }
          }

          .voo-item {
            padding: 10px 24px;
            display: flex;
            border: 1px solid transparent;

            &:first-of-type {
              &:hover {
                border: 1px solid $azul;
                border-radius: 8px 0 0 0;
              }
            }

            &:last-of-type {
              &:hover {
                border: 1px solid $azul;
                border-radius: 0 0 0 8px;
              }
            }

            &:hover {
              border: 1px solid $azul!important;
            }

            i:hover{
              cursor: pointer;
            }

            .voo-cia-logo {
              justify-content: center;
              position: relative;
              height: 35px;
              flex: 1;
              text-align: left;
              /*width: 200px;*/
              /*min-width: 200px;*/

              .voo-check {
                float: left;
                padding: 8px 10px 0 0;

                &.active {
                  i {
                    background: var(--azul-1);
                    border-radius: 50%;
                  }
                }

                i {
                  font-size: rem(18);
                  color: $azul;
                }
              }

              .voo-cia-img {
                top: calc(50% - 12px);
                position: relative;

                img {
                  float: left;
                  flex: 1;
                }
              }

              .nm-cia {
                text-align: left;
                flex: 1;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                padding-left: 14px;
                top: 9px;
                position: relative;
                font-size: rem(14);
              }
            }

            .voo-parada {
              font-size: 12px;
              line-height: 19px;

              .paradas {
                border: 1px solid $gray-3;
                width: 50px;

                span {
                  background-color: $branco;
                  border: 1px solid $cinzaEscuro;
                  bottom: -3px;
                  margin-left: -4.5px;
                  height: 8px;
                  position: absolute;
                  width: 8px;
                  border-radius: 5px;
                  top: -4px;
                  display: block;

                  &:first-child:nth-last-child(1) {
                    left: 50%;
                  }

                  &:first-child:nth-last-child(2) {
                    left: 30%;

                    & ~ span:nth-of-type(2) {
                      left: 70%;
                    }
                  }

                  &:first-child:nth-last-child(3) {
                    left: 25%;

                    & ~ span:nth-of-type(2) {
                      left: 50%;
                    }

                    & ~ span:nth-of-type(3) {
                      left: 75%;
                    }
                  }
                }
              }

              &.direto {
                color: $verde;

                .paradas {
                  border: 1px solid $verde;
                }
              }
            }

            .voo-hora {
              font-size: rem(16);
            }

            .voo-hora,
            .voo-parada {
              flex: 1;
              font-weight: $bold;
              display: flex;
              flex-direction: column;
              align-items: center;
              position: relative;

              span {
                top: calc(50% - 10px);
                display: flex;
                flex-direction: column;
                align-items: center;
                position: relative;
              }
            }
          }
        }

        .voo-preco-box {
          position: relative;
          box-sizing: border-box;
          width: 30%;
          border-left: 1px solid $cinzaborder;
          padding: 15px 18px;
          display: flex;
          flex-direction: column;
          text-align: center;

          div {
            width: 100%;

            &.titulo {
              em {
                color: $gray-5;
                font-size: rem(16);
                font-weight: $bold;
                padding-top: 10px;
              }
            }

            &.preco-final {
              em {
                font-weight: $bold;
                color: $gray-5;
                font-size: rem(16);
                padding-top: 10px;

                display: flex;
                flex-direction: row;
                justify-content: space-between;
                line-height: 16px;

                .label {
                  flex: 0.4;
                  font-size: rem(15);
                  text-align: left;
                }

                .preco {
                  flex: 1;
                  font-size: rem(16);
                  text-align: right;
                  padding-top: 10px;
                }
              }
            }

            &.descricao {
              em {
                color: $gray-3;
                padding-bottom: 5px;
              }
            }

            &.btn-content {
              margin-top: 20px;

              button {
                top: 0;
                width: 100%;

                &.esgotado {
                  background: $red-1;
                  cursor: default;

                  &:hover,
                  &:focus {
                    background: $red-4;
                    -webkit-box-shadow: 0 1px 2px 0 $red-2, 0 1px 3px 1px $red-3;
                    box-shadow: 0 1px 2px 0 $red-2, 0 1px 3px 1px $red-3;
                    -webkit-box-shadow: 0 1px 2px 0 $red-2, 0 1px 3px 1px $red-3;
                    box-shadow: 0 1px 2px 0 $red-2, 0 1px 3px 1px $red-3;
                  }
                }
              }
            }

            &.bagagem {
              margin: 10px 0;
              color: $gray-3;

              em {
                font-size: 12px;
              }

              .icone {
                i {
                  &.i {
                    color: $gray-3;
                  }

                  &.n {
                    color: $red-1;
                  }

                  &.s {
                    color: $verde;
                  }
                }
              }
            }
          }
        }
      }
    }

    .aereo-item .conteudo .voo-list .voo-item-detalhe {
      & ~ .voo-item {
        border-top: 1px solid #eee;
      }
    }
  }

  .btn-filtro {
    display: none;
  }
}

.modal-pagina-aereo {
  height: 100vh;
  position: fixed;
  top: 0;
  right: -100%;
  width: 0;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: all 0.4s ease;
  transition-property: all;
  transition-duration: 0.4s;
  transition-timing-function: ease;
  transition-delay: 0s;
  overflow-y: auto;
  background: $background-2;

  &.aberta {
    opacity: 1;
    right: 0;
    visibility: visible;
    height: 100vh;
    width: 100%;
  }
}

.trava-scroll {
  overflow: hidden;
}