/*==========================================
Media Querys Mobile
============================================*/
/*/////////////////////// Dispositivos extras pequenos (telefones de retrato, menos de 576px) ////////////////////////////////////////////*/
@media (max-width: 400px) {
  html {
    body {
      .pagamento {
        .div-dados-pagamento{
          .form-pagamento{
            .dados-pagador{
              .filter-unic-pagto{
                position: absolute;
                right: -11px;
                top: 45px !important;
              }
              .primeiro-cartao-label{
                margin-top: 39px;
              }
            }
          }
        }
      }

      #modalQuaseLa .modal-content h3 {

        font-size: rem(30);

      }
      #modalQuaseLa .modal-content .desc-modal-text {
        text-align: center;
        margin-top: 45px;

        p{
          margin-bottom: 10px;
        }
      }


    }
  }

}

@media (max-width: 575px) {
  #modalQuaseLa .modal-content {
    padding: 40px 0
  }

  #modalQuaseLa .modal-content h3 {
    font-size: 2.5rem;
    text-align: center;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  #modalQuaseLa .modal-content p {
    margin-bottom: 20px;
    text-align: center;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  #modalQuaseLa .modal-content .campo .ipt {
    width: 100%
  }

  #modalQuaseLa .modal-content .btn-padrao {
    width: 100%
  }

  #modalQuaseLa form {
    margin-right: 15px;
  }

}

/*/////////////////////// Dispositivos extras pequenos (telefones de retrato, menos de 576px) ////////////////////////////////////////////*/
@media (min-width: 576px) and (max-width: 767px) {

  #modalQuaseLa .modal-content h3 {
    font-size: 3.125rem;
    text-align: center
  }

  #modalQuaseLa .modal-content p {
    text-align: center;
    margin-bottom: 20px
  }

  #modalQuaseLa .modal-content .campo .ipt {
    width: 100%
  }

  #modalQuaseLa .modal-content .btn-padrao {
    width: 100%
  }
}

/*/////////////////////// Dispositivos médios (tablets, 768px e acima) ///////////////////////////////////////////////////////////////////*/
@media(max-width: 768px) {
  html {
    body {
      header {
        .navbar {
          height: 119px;

          .container {
            flex-direction: column;

            .navbar-brand {
              margin-right: 0 !important;
            }

            .logo {
              width: 200px;
            }
          }

          .header-info {
            display: none;
          }
        }
      }

      .page-header-info {
        display: flex;
        align-items: center;


        .float-left {
          float: none !important;
        }

        h4 {
          font-size: rem(17);
          text-align: center;

          b {
            display: block;
          }
        }

        .float-right {
          display: none;
        }

      }

      .loading {
        .container {
          .fone {
            font-size: rem(49) !important;

          }
        }
      }

      .hotel-page {
        .order {
          .float-left {
            margin-bottom: 2rem;
          }

          .price-opt {
            width: 100%;
            float: none !important;
            display: flex;
            margin-bottom: 2rem;
            background: #fff;


            .open-filter {
              width: 50%;
              margin-bottom: 0;

              .btn {
                margin-bottom: 0;
                width: 100%;
                left: 0;

                i {
                  margin-right: 9px;
                  color: #62DEE8;
                }
              }
            }

            .border-filtro {
              border: 1px solid #ececec;
              position: absolute;
              right: 32%;
              /* margin-left: 50px; */
              display: block;
              z-index: 998;
              right: 50%;
              height: 26px;
              top: 66px;
            }

            .price-opt-title {
              display: none;
            }

            .listsearch-input-item {
              width: 50%;
              margin-top: 0;
              height: 47px;
              margin-left: 0;
              float: none;
              margin-bottom: 0;

              .nice-select {
                border: none;
                height: 47px;
              }
            }
          }

        }

        .open-filter {
          margin-bottom: 18px;
          text-align: end;
          display: block !important;

          button {
            width: 54px;
          }
        }


        .hotel-pesquisa {

          .sidebar-filter {
            display: none;

            &.open {
              display: block;
              position: fixed;
              z-index: 10001;
              background: #fff;
              left: 0;
              top: 0;
              height: 100%;
              max-height: 100%;
              width: 100%;
              padding-top: 51px;
              overflow-y: auto;
              padding-right: 15px;
              padding-left: 15px;
            }

            .filter-item {
              .header-search-input-item {
                .qty-dropdown {
                  .qty-dropdown-header {
                    .col-md-6 {
                      width: 50% !important;
                    }
                  }
                }
              }

            }
          }

          #hotelList {
            padding: 0 !important;
          }

          .hotel-list {
            .hotel {
              height: auto;

              .div-img-hotel {
                .img-hotel {
                  height: 250px;
                }
              }

              .div-hotel-info {
                .border-l {
                  border: none !important;
                }

                .nm-hotel {
                  font-size: rem(18);
                }

                .mensagem {
                  font-size: rem(12);
                }

                .ref {
                  font-size: rem(12);
                }

                .destaque {
                  width: 100%;
                }
              }

              .div-preco {
                display: flex;

                .info-preco {
                  width: 60%;
                  border-top: 1px solid #d8cece;
                }

                padding: 9px 16px 8px;
                margin-bottom: 2rem;
                text-align: center;

                .diarias {

                  padding-top: 17px;
                }

                .taxas {
                  margin-top: 0;
                }

                .vl-periodo {
                  display: none;
                }
              }

              .div-btn {
                width: 40%;
                border-top: 1px solid #d8cece;
              }

              .btn-comprar {
                font-size: rem(14);
                height: 37px;
                margin-top: 50px;

              }
            }
          }

          .back-to-up {
            .btn-topo {
              width: 50%;
            }
          }
        }
      }

      .tabs {
        .col-md-6 {
          font-size: rem(15);
          padding: 14px 0px 9px 24px;

          .passo-r {
            display: none;
          }

          .number {
            width: 34px;
            height: 33px;
          }
        }
      }

      .detalhe-hotel {


        .motor {
          font-size: rem(12);

          .row {
            .flex-20 {
              flex: 0 0 100%;
              margin-top: 2px;
            }

            .input-group-icon {
              .input-icon {
                top: 5px;
              }
            }

            .col-xs-12 {
              padding-right: 10px !important;
              padding-left: 10px !important;;
            }

            .qty-dropdown {
              margin-top: 5px;

              .col-6 {
                padding-right: 10px !important;
                padding-left: 10px !important;;
              }
            }

            .div-btn-verificar {
              width: 100%;
              padding-right: 10px;
              padding-left: 10px;
            }

            .btn-pesquisar {
              height: 35px;
              margin-top: 31px;
              width: 100%;
              background: #09A7B4;
              border: none;
              border-radius: 40px;
              font-size: 14px;
            }
          }

        }

        .galeria {
          .img-secundarias {
            display: none;
          }

          .img-principal {
            img {
              width: 100%;
              height: 100%;
            }
          }
        }

        .hotel-info {
          .share {
            .btn-compartilhar {
              .compartilhar-box {
                background: unset;

                em {
                  display: none;
                }

                .fa-share-alt {
                  color: #45dee8;
                  font-size: 18px;
                }

                #compartilhar-itens {

                  width: 172px !important;
                }
              }
            }
          }


          .nm-hotel {
            font-size: rem(25);
          }

          .location {
            font-size: rem(14);
          }

          .d-flex {
            display: block !important;

            .stars {
              font-size: rem(13);
              border-right: none !important;
            }

            .regime {
              margin-left: 0;
              font-size: 14px;
              margin-top: 10px;
            }
          }

          .hotel-desc {
            h5 {
              font-size: rem(15);
            }

            .desc {
              font-size: rem(13);
            }

            .text-ver-mais {
              button {
                font-size: rem(12);
              }
            }
          }
        }

        .quartos {
          .apt-disp {
            font-size: 16px !important;
          }

          .quarto-list {
            .quarto {

              .col-md-9 {
                padding: 0;
              }

              .quarto-info {

                flex-wrap: wrap;

                .col-md-7 {
                  border-right: none !important;
                }

                .col-md-5 {
                  font-size: rem(14);
                  border-right: none;
                }

                .uh-nome {
                  font-size: rem(17);
                }

                .stars {
                  font-size: rem(13);
                }

                .uh-desc {
                  font-size: rem(14);
                }

                .uh-info {
                  font-size: rem(14);
                }
              }

              .quarto-preco {
                padding: 10px 16px 8px;
                margin-bottom: 12px;
                text-align: center;

                .diarias {
                  border-top: 1px solid;
                  padding-top: 22px;
                }

                .valor {
                  font-size: rem(40) !important;
                }

                .promo {
                  margin-left: 38%;
                }
              }
            }
          }
        }
      }

      .popover-item {
        max-width: 344px !important;
        width: 100% !important;
        left: 12px;
        right: 0 !important;

        .close-popover {
          border: 1px solid #f4f4f4;
        }
      }

      .pagamento {
        .pagto-forma {
          padding: 20px 11px 20px 17px;

          .accordion {
            .card {
              .card-header {
                padding: 1.5rem;

                .icons {
                  display: none;
                }

                .info {
                  display: none;
                }
              }

              .collapse {
                .nav {
                  li {
                    text-align: center;

                    a {
                      span {
                        display: none;
                      }
                    }
                  }
                }

                #tabs-container-custom {
                  .tab-content {
                    .form-row {
                      .cvv {
                        margin-top: -9px;

                        img {
                          width: 100%;
                        }
                      }
                    }
                  }
                }
              }
            }
          }

        }

        .btn-comprar-1 {
          width: 100%;
        }

        .div-dados-pagamento {
          order: 2;
        }

        .aside-pagamento {
          margin-top: unset !important;

          .pagamento-checkout {
            padding-left: 0 !important;
            margin-bottom: 64px;
            max-width: unset !important;
          }
        }
      }

      footer {
        .col-md-6 {
          border: none !important;

          .central-vendas {
            font-size: rem(20);
          }

          .atendimento {
            font-size: rem(18);
          }

          .fone {
            border-bottom: 1px solid;
            padding-bottom: 21px;
            font-size: rem(34);
          }

          .forma-pagamento {
            margin-top: 4px;
            font-size: rem(20);
          }
        }
      }

      .ui-autocomplete {
        width: 83% !important;
        z-index: 99999999;
      }

      .modal-error {
        width: 100%;

        .modal-content {
          width: 100%;
          height: 100%;

          .msg {
            font-size: 1.375rem !important;;
          }

          .status-compra {
            font-size: 1.8rem !important;
          }

          .svg {
            width: 95px !important;;
            height: 95px !important;;
            padding-top: 7px !important;
            transform: translateX(21vw) !important;

            svg {
              width: 40px;
            }
          }
        }
      }

      #modal-sucess {
        margin: 0.5rem;
        margin-left: -1px;
      }

      .modal-sucess {
        width: 100%;

        .modal-content {
          width: 100%;
          height: 100%;

          .msg {
            font-size: 1.375rem !important;;
          }

          .status-compra {
            font-size: 1.7rem !important;
          }

          svg {
            width: 140px;
          }

        }

      }

      #modalQuaseLa {
        .modal-lg {
          width: unset;
          max-width: unset;

          .modal-content {
            .campo {
              .ipt {
                width: 100%;
              }
            }

            .btn-padrao {
              width: 100%;
            }

          }
        }
      }
    }


  }


}

/*/////////////////////// Dispositivos grandes (desktops, 992 px e acima) ////////////////////////////////////////////////////////////////*/
@media (min-width: 992px) and (max-width: 1199px) {
  #modalQuaseLa .modal-content h3 {
    font-size: 2.5rem
  }

  #modalQuaseLa .modal-content .campo .ipt {
    width: 100%
  }

  #modalQuaseLa .modal-content .btn-padrao {
    width: 100%
  }
}

/*/////////////////////// Dispositivos extra grandes (grandes áreas de trabalho, 1200px e acima) /////////////////////////////////////////*/
@media (min-width: 1200px) {

}

/*/////////////////////// Dispositivos extra extra grandes (grandes áreas de trabalho maior ainda, 1500px e acima) ///////////////////////*/
@media (min-width: 1500px) {

}

/*/////////////////////// Dispositivos menores que extra grandes (abaixo de 1066px) ///////////////////////*/
@media (max-width: 1066px) {

}