html {
  body {
    .fl-wrap {
      float: left;
      width: 100%;
      position: relative;
    }


    background: #F4F4F4;

    .d-flex {
      display: flex;
    }

    header {
      z-index: 1001;
      background: #fff;
      position: fixed;
      width: 100%;
      top: 0;

      .navbar {
        height: 140px;
        background: #fff !important;

        .logo {
          width: 199px;
        }

        .header-info {
          position: relative;
          display: flex;

          span {
            font-size: rem(13);
            color: #959494;
            font-weight: 600;
          }

          .icon {
            margin-top: 14px;
            font-size: 30px;
            margin-right: 21px;
            color: #959494;

            span {
              font-size: 30px;
            }
          }

          .telefone {
            font-size: rem(30);
            color: #959494;
            margin-bottom: -9px;
            margin-top: -12px;
            font-weight: bold;
          }

          .opening-hours {
            font-size: rem(12);
            color: #7c7b7b;
            font-weight: 600;
          }
        }
      }

    }

    .page-header-info {
      padding: 1.8rem;
      margin-top: 138px;
      background: $blue1;
      height: 94px;

      h4 {
        color: #fff;
      }

      ul {
        font-size: rem(20);
        list-style: none;
        margin-top: -10px;

        li {
          float: left;
          line-height: 56px;
          display: inline;
          margin-left: 5px;
          font-size: 0.8333em;
          font-weight: bold;
          text-transform: none;
          color: #62DEE8;

          &:first-child:after {
            content: "/";
            color: #62DEE8;
            margin-left: 4px;

          }

          a {
            color: #62DEE8;
          }

          &.active {
            color: #fff;
          }
        }

      }
    }

    .row {
      margin: 0;
    }

    .order {
      justify-content: space-between;

      .pull-left {
        span {
          color: #898989;
          font-size: rem(18);
        }

      }


      .price-opt-title {
        color: #666;
        font-size: 11px;
        text-transform: uppercase;
        font-weight: 700;
        float: left;
        margin-top: 0px;
      }

      .price-opt .listsearch-input-item {
        float: left;
        margin-left: 20px;
        position: relative;
        min-width: 160px;
        margin-top: -11px;
        margin-bottom: 2rem;
      }

      .price-opt .listsearch-input-item .nice-select {
        background: #fff;
        width: 100%;
      }

      .grid-opt {
        float: right;
      }

      .price-opt .listsearch-input-item .nice-select li {
        padding-top: 15px;
      }

      .grid-opt li {
        float: left;
        padding-top: 15px;
        margin-left: 10px;
      }

      .grid-opt li span {
        float: left;
        font-size: 14px;
        font-weight: 900;
        color: #ccc;
        background: #fff;
        width: 36px;
        height: 36px;
        border-radius: 100%;
        border: 1px solid #eee;
        line-height: 36px;
        cursor: pointer;
      }

      .float-right {


        .btn {
          background: #fff;
          color: #A8A8A8;
          font-size: 14px;
          border: none;
          margin-bottom: 2rem;
          /* margin-left: 39px; */
          position: relative;
          left: -13px;
          width: 242px;
          height: 47px;

          &::after {
            float: right;
            margin-top: 9px;
            position: relative;
            margin-left: 42px;
          }
        }

      }

      margin-top: 2rem;
    }

    .hotel-pesquisa {

      .sidebar-filter {
        padding: 0;


        .header-search-input-item {


          .flex-20 {
            flex: 0 0 20%;
            padding-right: 10px;
            padding-left: 10px;
          }

          .qty-dropdown {
            float: left;
            width: 100%;
            border: 1px solid #eee;
            padding: 0;
            border-radius: 6px;
            background: #FFF;
            height: 47px;

            .qty-dropdown-header {
              font-size: 14px;
              color: #666;
              text-align: left;
              font-weight: 300;
              padding-left: 15px;
              height: 50px;
              line-height: 50px;
              cursor: pointer;
              position: relative;

              .float-right {
                width: 50%;
              }

              .col-md-6 {

                padding-right: 0;
              }

              .float-left {
                width: 50%;
              }
            }

          }

          .quarto-dropdown {
            top: 67px;
            display: none;
            position: absolute;
            width: 100%;
            z-index: 1003;
            text-align: center;
            border: 1px solid #eee;
            padding: 0;
            border-radius: 0;
            background: #ffffff;
            box-shadow: rgba(0, 0, 0, 0.25) 0 2px 4px;
            min-width: 237px;
            max-height: 70vh;
            overflow-y: auto;
            overflow-x: hidden;
          }

          .quarto-dropdown.open {
            display: block;
          }


          .quarto-dropdown span {
            color: #333;
            font-weight: bold;
            float: left;
            margin-left: 10px;
            margin-top: 9px;
            font-size: 12px;
          }

          .quarto-dropdown article:first-of-type .header {
            border-top: none !important;
          }

          .quarto-dropdown .header {
            color: #9196a7;
            height: 40px;
            background: #fff;
            border-bottom: 1px solid #f5f5f5;
            border-top: 1px solid #f5f5f5;
            margin: 0 0 0 0;
            padding-left: 0;
            float: left;
            text-align: left;
          }

          .quarto-dropdown .header h3 {
            margin-top: 10px;
            margin-left: 10px;
          }

          .quarto-dropdown .header h3 span {
            float: right;
            margin: 0 10px 0 0;
          }

          .quarto-dropdown .header select {
            background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc);
            background-position: calc(100% - 8px) calc(1em + -5.8px), calc(100% - 3px) calc(1em + -5.8px), calc(100% - 1.2em) 0em;
            background-size: 5px 5px, 5px 5px, 1px 1.5em;
            background-repeat: no-repeat;
            padding-left: 6px;
            width: 47px;
            height: 21px;
            background-color: #fff;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            border-radius: 4px;
            border: 1px solid #d4d4d4;
          }

          .quarto-dropdown .quarto-dropdown-footer {
            border-top: 1px solid #f5f5f5;
          }

          .quarto-dropdown.open .quarto-dropdown-footer {
            height: 50px;
            padding-top: 5px;
            background: #fff;
          }

          .quarto-dropdown .quarto-dropdown-footer a {
            cursor: pointer;
            font-size: 1rem;
            text-decoration: none;
            float: left;
            margin: 10px;
            border: 1px solid;
            border-radius: 17px;
            padding: 1px 14px 4px 12.8px;
          }

          .quarto-dropdown .quarto-dropdown-footer a:last-child {
            float: right;
          }

          .quarto-dropdown:before {
            position: absolute;
            content: '';
            height: 15px;
            width: 15px;
            left: 15px;
            transform: rotateZ(45deg);
            top: -7px;
            box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
            background-color: #fff;
          }

          .quarto-dropdown .conteudo {
            margin-bottom: 10px;
          }


          .pes-row {
            margin-top: 10px;
          }

          .pes-row select {
            background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc);
            background-position: calc(100% - 15px) calc(1em + -2px), calc(100% - 10px) calc(1em + -2px), calc(100% - 1.9em) 0.2em;
            background-size: 5px 5px, 5px 5px, 1px 1.5em;
            background-repeat: no-repeat;
            padding-left: 10px;
            width: 89px;
            height: 33px;
            background-color: #fff;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            border-radius: 4px;
            border: 1px solid #d4d4d4;
            float: right;
            margin-right: 10px;
          }


          .pes-row.chd select {
            width: auto;
            padding-left: 2px;
            background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc);
            background-position: calc(100% - 11px) calc(1em + -2px), calc(100% - 6px) calc(1em + -2px), calc(100% - 1.9em) 0.2em;
            background-size: 5px 5px, 5px 5px, 0px 1.5em;
          }


          .quarto-dropdown .mob-header {
            height: 66px;
            border-bottom: 1px solid #c3c3c3;
            display: none;
          }

          .quarto-dropdown .mob-header h3 {
            float: left;
            width: 100%;
            font-size: 20px;
            padding: 20px 0;
            font-weight: 600;
            color: #666;
            border-bottom: 1px solid #4a4a4a;
            text-align: center;
            margin: 0;
          }

          .pes-row.chd span {
            color: #5a5a5a;
            font-size: 12px;
          }


          .input-group {


            &:before, &:after {
              content: "";
              display: table;
            }

            &:after {
              clear: both;
            }
          }


          .input-group-icon {
            position: relative;

            input {
              height: 47px;
              height: 47px;
              padding: 0.375rem 0.75rem 0.375rem 43px;
              width: 100%;
              border: 1px solid #ccc;
              border-radius: 4px;
              -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
              box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
              -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
              -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
              transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
              color: $gray1;
              font-size: 13px;

              &::placeholder {
                color: $gray1;
                font-size: 12px;

              }
            }

            .input-icon {
              position: absolute;
              top: -3px;
              left: 0;
              width: 3.4em;
              height: 3.4em;
              line-height: 3.4em;
              text-align: center;
              pointer-events: none;


              i {
                font-size: 19px;
                transition: all 0.35s ease-in-out;
              }

              img {
                height: 27px;
                width: 19px;
                transition: all 0.35s ease-in-out;
              }
            }

          }

          .btn-pesquisar {
            height: 48px;
            margin-top: 31px;
            width: 131px;
            background: $blue;
            border: none;
          }

        }

        label {
          font-size: 14px;
          color: #6F6F6F;
          font-weight: bold;
        }

        .filter-titulo {
          padding: 1rem;
          background: #EAEAEA;
          font-size: rem(18);
          font-weight: bold;
          color: #797979;
          text-align: center;
        }


        .filter-fundo {

          padding: .5rem;
          background: #fff;

          .filter-item {
            padding: 0px 12px 0px 12px;
            margin-bottom: 1rem;
          }


          .input-group {


            &:before, &:after {
              content: "";
              display: table;
            }

            &:after {
              clear: both;
            }
          }


          .input-group-icon {
            position: relative;

            input {
              padding: 0.375rem 0.75rem 0.375rem 54px;
              width: 100%;
              border: 1px solid #ccc;
              border-radius: 4px;
              -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
              box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
              -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
              -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
              transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
              color: $gray1;

              &::placeholder {
                color: $gray1;
                font-size: 14px;

              }
            }

            .input-icon {
              position: absolute;
              top: -8px;
              left: 0;
              width: 3.4em;
              height: 3.4em;
              line-height: 3.4em;
              text-align: center;
              pointer-events: none;


              i {
                transition: all 0.35s ease-in-out;
              }

              img {
                height: 27px;
                width: 19px;
                transition: all 0.35s ease-in-out;
              }
            }

          }

          .input-cupom {
            width: 60% !important;

            &::placeholder {
              color: $gray1;
              font-size: 14px;

            }
          }

          .btn-cupom {
            width: 40%;
            margin-left: 1rem;
            background: $blue;
            border-color: #E5E5E5;
            border-radius: 40px;
            font-weight: bold;
            font-size: rem(13);
          }

          .custom-checkbox {
            margin-bottom: 1rem;

            label {
              &::before {
                height: 1.3rem;
                width: 1.3rem;
                border-radius: 50% !important;
              }
            }
          }


          .btn-alterar {
            background: $orange;
            width: 100%;
            border: none;
            box-shadow: 0 6px 6px #0000004a;
            height: 47px;
            border-radius: 40px;
            font-weight: bold;
          }
        }

        .filter-t {
          h6 {
            margin-top: 1rem;
            color: #797979;
          }

          .filter-qt-encontrado {
            color: #A8A8A8;
          }

          .div-filtro-preco {

            .irs-line {
              height: 5px !important;
            }

            .irs-bar {
              background: $blue !important;
              height: 5px !important;
            }

            .irs-handle {
              top: 16px !important;
              width: 24px !important;;
              height: 24px !important;;
              border-radius: 30px !important;;
              background: #50E4F0 !important;

              i {
                display: none;
              }

              &::first-child {
                background-color: none !important;
              }
            }

            .irs-to, .irs-from {
              background-color: $orange !important;
            }

            .slider-filtro {

            }

            .result-slider {
              margin-top: 1rem;
              background: #EAEAEA;
              height: 36px;
              padding: 0.5rem;

              span {
                color: $blue;
                font-size: 14px;
              }
            }
          }

          .custom-checkbox-div {
            margin-bottom: 1rem;

            .custom-control-label {
              padding-left: 17px;
              padding-top: 9px;

              &::before {
                width: 30px !important;
                height: 30px !important;
                background: #fff;
                border: 1px solid #80808054;
              }

              &::after {
                width: 30px !important;
                height: 30px !important;

              }
            }

            .custom-control-input:checked ~ .custom-control-label {

              &::before {
                background: #50E4F0;
              }

              &:after {
                height: 2rem;
                width: 2rem;
              }
            }

            .check-result {
              background: #fff;
              width: 47px;
              height: 30px;
              text-align: center;
              color: #B4B4B4;
              font-size: 14px;
              align-items: center;
              padding-top: 4px;
            }


            .label-regime {
              width: 69%;
            }
          }

          .btn-ver-mais {
            width: 100%;
            text-align: left;
            background: none;
            border: none;
            color: #09A7B4;
            font-size: 12px;

            i {
              float: right;
              font-size: 18px;
            }
          }

          .div-mais-filtros {
            display: none;


            .filtro-nm-hotel {
              height: 80px;

              .nice-select {
                .option {
                  padding-top: 15px;
                }
              }
            }

            .filtro-estrelas {

              .color {
                color: #FFC400;
              }


            }
          }

          .expand {
            display: block !important;
          }
        }


      }

      .hotel-list {
        .hotel {
          margin-bottom: 1.4rem;
          height: 260px;
          background: #fff;
          border-radius: 9px;

          .div-img-hotel {
            padding: 0;
            height: 100%;

            .img-hotel {
              width: 100%;
              height: 100%;
              border-radius: 9px;
            }

            .recomendado {
              position: absolute;
              top: 0;
              background: #fff;
              border-radius: 20px;
              margin-top: 10px;
              left: 5px;
              font-size: 12px;
              padding: 0.1rem 0.4rem 0.2rem .4rem;
              color: #90c23e;
              font-weight: bold;
            }
          }

          .div-hotel-info {
            padding: 19px 31px 8px;

            .border-l {
              border-right: 1px solid #DEDEDE;
            }

            .addres {
              color: $gray;
              font-size: rem(18);
              line-height: 1;
            }

            .nm-hotel {
              color: #898989;
              font-weight: 700;
              font-size: rem(22);
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .itens {
              margin-top: 4px;
              font-size: rem(12);

              .stars {
                border-right: 1px solid #DEDEDE;
                width: 45%;
                color: #e6e6e6;

                .color {
                  color: #FFC400;
                }
              }

              .facilidades {
                i {
                  color: $blue;
                  margin: 4px;
                }
              }
            }

            .ref {
              margin-top: 1rem;
              color: $gray1;

              i {
                color: $blue;
              }
            }

            .c-st {
              text-align: center;
              font-size: 14px;
              margin-top: 10px;
              padding: 0.2rem;
              color: #09e0bd;
              width: 171px;
              font-weight: bold;
            }

            .destaque {
              padding: 0.3rem .5rem .5rem .5rem;
              color: #0D994A;
              background: #CFFD87;
              width: 80%;
              height: 36px;
              margin-top: 1rem;
              border-radius: 40px;
              text-align: center;

              span {
                font-size: 14px;
              }
            }

            .mensagem {
              color: $gray1;
              margin-top: 1rem;

              i {
                color: $blue;
              }
            }

            .descontos {
              margin-bottom: 17px;

              [data-tooltip] {
                position: relative;
                z-index: 2;
                cursor: pointer;
                border: 1px solid #50e4f0;
                width: 42.2px;
                /* padding: 0.4rem; */
                padding: 1px 0px 0px 10px;
                /* background: #09a7b4; */
                border-radius: 24px;
                height: auto;
              }

              i {
                color: #50e4f0;
              }

              /* Hide the tooltip content by default */
              //[data-tooltip]:before,
              //[data-tooltip]:after {
              //  visibility: hidden;
              //  opacity: 0;
              //  pointer-events: none;
              //}
              //
              ///* Position tooltip above the element */
              //[data-tooltip]:before {
              //  position: absolute;
              //  top: -27px;
              //  left: 20%;
              //  margin-bottom: 5px;
              //  margin-left: -80px;
              //  padding: 7px;
              //  width: auto;
              //  -webkit-border-radius: 3px;
              //  -moz-border-radius: 3px;
              //  border-radius: 3px;
              //  background-color: #000;
              //  background-color: hsla(0, 0%, 20%, 0.9);
              //  color: #fff;
              //  content: attr(data-tooltip);
              //  text-align: center;
              //  font-size: 10px;
              //  line-height: 1.2;
              //}
              //[data-tooltip]:after {
              //  position: absolute;
              //  top: -35px;
              //  left: 20%;
              //  margin-left: -5px;
              //  width: 0;
              //  border-top: 5px solid #000;
              //  border-top: 5px solid hsla(0, 0%, 20%, 0.9);
              //  border-right: 5px solid transparent;
              //  border-left: 5px solid transparent;
              //  content: " ";
              //  font-size: 0;
              //  line-height: 0;
              //}

              /* Show tooltip content on hover */
              [data-tooltip]:hover:before,
              [data-tooltip]:hover:after {
                visibility: visible;
                opacity: 1;
              }
            }

          }

          .div-preco {
            padding: 19px 16px 8px;

            .diarias {
              font-size: 14px;
              color: $gray1;
              line-height: 1;
            }

            .vl-total {
              .sg-moeda {
                color: #626262;
                font-size: rem(25);
                margin-right: 6px;
                line-height: 1;

              }

              .valor {
                font-size: rem(40);
                font-weight: bold;
                color: #626262;
                line-height: 1;
              }

            }


            .vl-periodo {
              font-size: rem(14);
              color: $gray1;
            }

            .taxas {
              font-size: rem(12);
              color: #626262;
              margin-top: 34px;
              line-height: 1;
            }

            .btn-comprar {
              width: 100%;
              background: $orange;
              border: none;
              box-shadow: 0 6px 6px #0000004a;
              margin-top: 20px;
              border-radius: 40px;
              font-weight: bold;
              font-size: rem(15);
              margin-bottom: 10px;
            }

          }
        }

      }

      .paginacao {
        float: unset;
        text-align: center;

        ul {
          list-style: none;
          display: inline-flex;
          align-items: center;

          a {
            display: inline-block;
            width: 44px;
            height: 44px;
            line-height: 44px;
            border-radius: 6px;
            border: 1px solid #dedede;
            box-sizing: border-box;
            position: relative;
            font-size: 13px;
            color: #888da0;
            background: #fff;
            letter-spacing: 1px;

            &.current {
              background: #ff8900;
              color: #fff;
            }

            &.disabled {
              background: #d9d9d9;
              cursor: not-allowed;
            }
          }

        }

        a {
          border-color: #dedede;
        }
      }


      .back-to-up {
        border-top: 1px solid #DEDEDE;
        border-bottom: 1px solid #DEDEDE;
        padding-top: 11px;
        height: 52px;
        margin-bottom: 3rem;

        .btn-topo {
          width: 20%;
          text-align: left;
          background: none;
          border: none;
          color: #09A7B4;
          font-size: 12px;
          float: right;


          i {
            float: right;
            font-size: 18px;
          }
        }
      }

      .hotel-nao-encontrado {
        display: flex;
        width: 100%;
        background: #FFDEDE;
        border-radius: 9px;
        padding: 2rem;
        margin-bottom: 2rem;

        .sad {
          display: inline-block;
          width: 110px;
          height: 102px;
          background: #D34949;
          padding: 0.5rem;
          text-align: center;
          margin-right: 37px;
          padding-top: 16px;
          margin-top: 7px;

          i {
            font-size: 70px;
            color: #fff;
          }
        }

        .texto {
          display: inline-block;

          .title {
            font-size: rem(22);
            color: #D34949;
            font-weight: bold;
          }

          .data-pesquisa {
            color: #C78484;
            font-size: rem(18);
          }

          .messages {
            font-size: rem(16);
            color: #626262;
          }
        }
      }
    }

    .tabs {
      background: #fff;
      margin-bottom: 1.5rem;

      .tab-active {
        border-radius: 12px 12px 0px 0px;
        background: $blue;
        font-size: 23px;
        color: #fff;
        padding: 18px 13px 21px 24px;

        .number {
          background: #21D0DE;
          width: 48px;
          height: 48px;
          display: inline-block;
          text-align: center;
          padding-top: 5px;
          border-radius: 50%;
          margin-right: 14px;
        }
      }

      .tab {
        border-radius: 12px 0 0px 0px;

        background: #FFFFFF;
        font-size: 23px;
        color: #ADADAD;
        padding: 18px 13px 21px 24px;

        .number {
          background: #F0F0F0;
          width: 48px;
          height: 48px;
          display: inline-block;
          text-align: center;
          padding-top: 5px;
          border-radius: 50%;
          margin-right: 14px;
        }
      }
    }

    .detalhe-hotel {
      margin-top: 2rem;
      margin-bottom: 1rem;


      .motor {
        background: #F2F2F2;
        border: 1px solid #E5E5E5;
        border-radius: 12px;
        padding: 25px 0px 21px 15px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0), 0 1px 2px rgba(0, 0, 0, 0.2);

        .flex-20 {
          flex: 0 0 20%;
          padding-right: 10px;
          padding-left: 10px;
        }

        .qty-dropdown {
          float: left;
          width: 100%;
          border: 1px solid #eee;
          padding: 0;
          border-radius: 6px;
          background: #FFF;
          height: 47px;

          .qty-dropdown-header {
            font-size: 14px;
            color: #666;
            text-align: left;
            font-weight: 300;
            padding-left: 15px;
            height: 50px;
            line-height: 50px;
            cursor: pointer;
            position: relative;

            .float-right {
              width: 50%;
            }

            .float-left {
              width: 50%;
            }
          }

        }

        .quarto-dropdown {
          top: 67px;
          display: none;
          position: absolute;
          width: 100%;
          z-index: 1003;
          text-align: center;
          border: 1px solid #eee;
          padding: 0;
          border-radius: 0;
          background: #ffffff;
          box-shadow: rgba(0, 0, 0, 0.25) 0 2px 4px;
          min-width: 243px;
          max-height: 70vh;
          overflow-y: auto;
          overflow-x: hidden;
        }

        .quarto-dropdown.open {
          display: block;
        }


        .quarto-dropdown span {
          color: #333;
          font-weight: bold;
          float: left;
          margin-left: 10px;
          margin-top: 9px;
          font-size: 12px;
        }

        .quarto-dropdown article:first-of-type .header {
          border-top: none !important;
        }

        .quarto-dropdown .header {
          color: #9196a7;
          height: 40px;
          background: #fff;
          border-bottom: 1px solid #f5f5f5;
          border-top: 1px solid #f5f5f5;
          margin: 0 0 0 0;
          padding-left: 0;
          float: left;
          text-align: left;
        }

        .quarto-dropdown .header h3 {
          margin-top: 10px;
          margin-left: 10px;
        }

        .quarto-dropdown .header h3 span {
          float: right;
          margin: 0 10px 0 0;
        }

        .quarto-dropdown .header select {
          background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc);
          background-position: calc(100% - 8px) calc(1em + -5.8px), calc(100% - 3px) calc(1em + -5.8px), calc(100% - 1.2em) 0em;
          background-size: 5px 5px, 5px 5px, 1px 1.5em;
          background-repeat: no-repeat;
          padding-left: 6px;
          width: 47px;
          height: 21px;
          background-color: #fff;
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
          border-radius: 4px;
          border: 1px solid #d4d4d4;
        }

        .quarto-dropdown .quarto-dropdown-footer {
          border-top: 1px solid #f5f5f5;
        }

        .quarto-dropdown.open .quarto-dropdown-footer {
          height: 50px;
          padding-top: 5px;
          background: #fff;
          padding-bottom: 50px;
        }

        .quarto-dropdown .quarto-dropdown-footer a {
          cursor: pointer;
          font-size: 1rem;
          text-decoration: none;
          float: left;
          margin: 10px;
          border: 1px solid;
          border-radius: 17px;
          padding: 1px 14px 4px 12.8px;
        }

        .quarto-dropdown .quarto-dropdown-footer a:last-child {
          float: right;
        }

        .quarto-dropdown:before {
          position: absolute;
          content: '';
          height: 15px;
          width: 15px;
          left: 15px;
          transform: rotateZ(45deg);
          top: -7px;
          box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
          background-color: #fff;
        }

        .quarto-dropdown .conteudo {
          margin-bottom: 10px;
        }


        .pes-row {
          margin-top: 10px;
        }

        .pes-row select {
          background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc);
          background-position: calc(100% - 15px) calc(1em + -2px), calc(100% - 10px) calc(1em + -2px), calc(100% - 1.9em) 0.2em;
          background-size: 5px 5px, 5px 5px, 1px 1.5em;
          background-repeat: no-repeat;
          padding-left: 10px;
          width: 89px;
          height: 33px;
          background-color: #fff;
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
          border-radius: 4px;
          border: 1px solid #d4d4d4;
          float: right;
          margin-right: 10px;
        }


        .pes-row.chd select {
          margin: 0;
          width: auto;
          padding-left: 7px;
          background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc);
          background-position: calc(100% - 11px) calc(1em + -2px), calc(100% - 6px) calc(1em + -2px), calc(100% - 1.9em) 0.2em;
          background-size: 5px 5px, 5px 5px, 0px 1.5em;
        }


        .quarto-dropdown .mob-header {
          height: 66px;
          border-bottom: 1px solid #c3c3c3;
          display: none;
        }

        .quarto-dropdown .mob-header h3 {
          float: left;
          width: 100%;
          font-size: 20px;
          padding: 20px 0;
          font-weight: 600;
          color: #666;
          border-bottom: 1px solid #4a4a4a;
          text-align: center;
          margin: 0;
        }

        .pes-row.chd span {
          color: #5a5a5a;
          font-size: 12px;
        }


        .input-group {


          &:before, &:after {
            content: "";
            display: table;
          }

          &:after {
            clear: both;
          }
        }


        .input-group-icon {
          position: relative;

          input {
            height: 47px;
            height: 47px;
            padding: 0.375rem 0.75rem 0.375rem 43px;
            width: 100%;
            border: 1px solid #ccc;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            color: $gray1;
            font-size: 13px;

            &::placeholder {
              color: $gray1;
              font-size: 12px;

            }
          }

          .input-icon {
            position: absolute;
            top: -3px;
            left: 0;
            width: 3.4em;
            height: 3.4em;
            line-height: 3.4em;
            text-align: center;
            pointer-events: none;


            i {
              font-size: 19px;
              transition: all 0.35s ease-in-out;
            }

            img {
              height: 27px;
              width: 19px;
              transition: all 0.35s ease-in-out;
            }
          }

        }

        .btn-pesquisar {
          height: 48px;
          margin-top: 31px;
          width: 131px;
          background: $blue;
          border: none;
          border-radius: 40px;
          font-weight: bold;
          font-size: 12.5px;
        }

      }

      .galeria {
        margin-top: 2rem;
        position: relative;

        img {
          border-radius: 10px;
        }

        .img-principal {

          position: relative;

          .div-slider-info {
            position: absolute;
            bottom: 1px;
            width: 100%;
            background: #000000c2;
            text-align: center;
            color: #fff;
            height: 51px;
            padding-top: 15px;
            border-radius: 0px 0px 10px 10px;
            font-size: 12px;
            font-weight: bold;

            i {
              margin-right: 8px;
              font-size: rem(18);
            }
          }

          img {
            width: 661px;
            height: 451px;
          }

        }

        .img-secundarias {
          position: absolute;

          img {
            height: 221px;
            width: 212px !important;
          }


        }


      }

      .btn-abrir-mapa {
        font-size: 11px;
        border: #ffff;
        background: #2dbbb1;

        &:focus {
          border: none;
          box-shadow: none;
        }
      }

      .hotel-info {
        margin-top: 26px;

        .location {
          font-size: 18px;
          color: #A8A8A8;
          font-weight: 500;
          line-height: 1;
        }

        .nm-hotel {
          font-size: rem(43);
          font-weight: bold;
          color: #626262;
        }

        .share {
          .btn-compartilhar {
            width: 100%;
            text-align: center;
          }

          .btn-compartilhar a,
          .btn-compartilhar > .compartilhar-box {
            background: #45dee8;
            border-radius: inherit;
            color: #ffffff;
            padding: .5rem;
            border-radius: 20px;
            font-size: 12px;
            height: 40px;
            padding-top: 0;
            /* text-align: center; */
            padding-left: 19px;
            position: relative;
            float: none;
            display: inline-block;
            line-height: 40px;
            text-align: center;
          }

          .btn-compartilhar a {
            background: #026293;
          }

          .btn-compartilhar > * > span {

            font-size: 13px;
            padding: 8px;
            line-height: 24px;
            text-align: center;
            border-radius: 50%;

            -webkit-transition: all .35s ease-in-out;
            -moz-transition: all .35s ease-in-out;
            transition: all .35s ease-in-out;
            color: #ffffff;
          }


          #compartilhar-itens {
            left: -81px;
            margin: 0 auto 0;
            position: absolute;
            top: -60px;
            transform: translate(-50%, 0);
            visibility: hidden;
            width: 400px;
          }

          #compartilhar-itens a {
            visibility: hidden;
            opacity: 0;
            margin: 5px 2px;
            background: #026293;
            position: relative;
            top: 10px;
            width: 49px;
            font-size: 20px;
            padding: 0px;
            border-radius: 29px;
            height: 42px;
            padding-top: 0px;
          }

          #compartilhar-itens a > span {
            position: relative;
            top: 4px;
            left: 4px;
            border-radius: 50%;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
          }

          .div-icones {
            cursor: default;
          }

          .pointer {
            cursor: pointer
          }

          .facebook:hover {
            background: #3b5998 !important
          }


          .instagram:hover {
            background: #f95148 !important
          }

          .twitter:hover {
            background: #00aced !important
          }

          .whatsapp:hover {
            background: #49c857 !important
          }
        }

        .itens {
          margin-top: 4px;
          font-size: rem(18);

          .stars {
            border-right: 1px solid #DEDEDE;
            margin-right: 11px;
            padding-right: 22px;
            color: #e6e6e6;

            .color {
              color: #FFC400;
            }
          }

          .facilidades {
            border-right: 1px solid #DEDEDE;
            padding-right: 22px;

            i {
              color: $blue;
              margin: 4px;
            }
          }

          .regime {
            margin-left: 12px;
            color: $gray1;

            i {
              color: $blue;
            }
          }
        }

        .hotel-desc {
          font-size: rem(16);
          color: $gray1;
          margin-top: 2.5rem;

          h5 {
            font-weight: bold;
            color: #626262;
          }

          .desc {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: justify;

            .expand {
              -webkit-line-clamp: unset;
            }
          }

          .expand {
            -webkit-line-clamp: unset !important;
          }

          .text-ver-mais {
            .btn {
              background: none;
              border: beige;
              color: $blue;
              padding: 0;
              margin-top: 12px;

              &:focus {
                box-shadow: none;

              }
            }
          }
        }

        .descricao {
          position: relative;

          h2 {
            font-size: 15px;
            font-weight: 500;
            letter-spacing: -0.1px;
            color: #444;
            padding-top: 10px;
            margin-top: 10px;
            border-top: 1px solid #eee;
          }


          .descricao-conteudo {
            font-size: 13px;
            line-height: 1.38;
            color: #888;
            white-space: pre-wrap;
            text-align: justify;
            height: 82px;
            margin-bottom: 30px;
            transition: height .5s;
            overflow: hidden;
          }

          .ler-menos {
            display: none;
          }

          .bg-white-opacity {
            background-size: 100%;
            background-image: linear-gradient(to top, #f4f4f4, rgba(255, 255, 255, 0));
            content: "";
            position: absolute;
            right: 0;
            bottom: 24px;
            left: 0;
            height: 33px;
            pointer-events: none;
            top: 61px;
          }

          &.open {
            .bg-white-opacity {
              display: none;
            }

            .ler-mais {
              display: none;
            }

            .ler-menos {
              display: block;
            }
          }
        }
      }

      .quartos {
        .header-quarto {
          margin-top: 4rem;
          width: 100%;

          .apt-disp {
            font-size: rem(22);
            color: #626262;
            font-weight: bold;
          }

          .verifique-viagem {
            color: #0D994A;
            font-size: 16px;
          }

          .btn {
            background: #fff;
            color: #A8A8A8;
            font-size: 14px;
            border: none;
            margin-bottom: 2rem;
            /* margin-left: 39px; */
            position: relative;
            left: -13px;
            width: 242px;
            height: 47px;

            &::after {
              float: right;
              margin-top: 9px;
              position: relative;
              margin-left: 42px;
            }
          }
        }

        .quarto-list {
          width: 100%;


          .quarto {
            margin-bottom: 2rem;
            background: #fff;
            width: 100%;

            .galeria-quarto {
              padding-left: 0;

              #galeria-quartos {

                position: relative;
              }

              img {
                width: 100%;
                height: 281px;
                object-fit: cover;
              }

              .div-slider-info {
                position: absolute;
                bottom: 0;
                width: 100%;
                background: #000000c2;
                text-align: center;
                color: #fff;
                height: 51px;
                padding-top: 15px;
                font-size: 12px;
                font-weight: bold;

                i {
                  margin-right: 8px;
                  font-size: rem(18);
                }
              }
            }

            .quarto-info {
              padding: 17px 0 0 0;

              .uh-nome {
                font-size: rem(22);
                color: #898989;
              }

              .stars {
                margin-top: 9px;
                margin-bottom: 25px;
                width: 45%;
                color: #e6e6e6;

                .color {
                  color: #FFC400;
                }
              }

              .uh-desc {
                margin-bottom: 25px;
                font-size: rem(14);
                color: $gray1;
              }

              .uh-info {
                background: #CFFD87;
                padding: .5rem;
                margin-bottom: 13px;
                border-radius: 40px;
                text-align: center;
              }

              .facilidades {
                margin-bottom: 1rem;

                i {
                  color: $blue;
                  margin: 4px;
                }
              }

              .regime {
                margin-bottom: 1rem;
                color: $gray1;

                i {
                  color: $blue;
                }
              }

              .qt-uh {
                color: $gray1;
                margin-bottom: 1rem;

                i {
                  color: $blue;
                }
              }

              .mensagem {
                margin-bottom: 1rem;
                color: $gray1;
                margin-top: 1rem;

                i {
                  color: $blue;
                }
              }


            }

            .quarto-preco {
              padding: 19px 16px 8px;

              .diarias {
                font-size: 14px;
                color: $gray1;
                line-height: 1;
              }

              .vl-total {
                .sg-moeda {
                  color: #626262;
                  font-size: rem(25);
                  margin-right: 6px;
                  line-height: 1;

                }

                .valor {
                  font-size: rem(45);
                  font-weight: bold;
                  color: #626262;
                  line-height: 1;
                }

              }


              .vl-periodo {
                font-weight: 600;
                font-size: rem(14);
                color: $gray1;
              }

              .promo {
                width: auto;
                /* background: #ff8900; */
                background: #FFC14B;
                color: #fff;
                text-align: center;
                margin-top: 7px;
              }

              .taxas {
                font-size: rem(12);
                color: #626262;
                margin-top: 24px;
                line-height: 1;
              }

              .btn-comprar {
                width: 100%;
                background: $orange;
                border: none;
                box-shadow: 0 6px 6px #0000004a;
                margin-top: 20px;
                border-radius: 40px;
                font-weight: bold;
                font-size: rem(14);
                margin-bottom: 10px;

              }

            }
          }
        }

      }


    }

    .pagamento {
      margin-top: 3rem;

      label {
        font-size: rem(14);
      }

      input {
        color: $gray1;

        &::placeholder {
          color: $gray1;
          font-size: rem(14);
        }

        font-size: rem(14);
      }

      select {
        font-size: rem(14);
        color: $gray1
      }

      .card {
        border: none !important;
      }

      .card-nomes {
        background: #fff;
        padding: 28px 28px 20px 28px;
        border-radius: 12px;

        .location {
          font-size: rem(18);
          color: $gray1;
          font-weight: 500;
          line-height: 1;
        }

        .destino {
          font-size: rem(22);
          color: #626262;
          font-weight: bold;
        }
      }

      .pagto-forma {
        border-radius: 12px;
        background: #fff;
        padding: 28px 28px 20px 28px;
        margin-top: 2rem;

        .accordion {
          .card-header {
            padding: 2.4rem;
            background: #F2F2F2;
          }

          .card {
            .custom-control {
              display: inline-flex;

              .custom-control-label {
                padding-left: 8px;
                padding-top: 5px;
                font-size: rem(14);

                &:before {
                  background-color: #fff;
                  width: 1.5rem;
                  height: 1.5rem;
                }

                &::after {
                  width: 1.5rem;
                  height: 1.5rem;
                }

                b {
                  color: $blue;
                }
              }

              .custom-control-input:checked ~ .custom-control-label {
                &:before {
                  background-color: #007bff !important;
                  width: 1.5rem;
                  height: 1.5rem;
                }
              }
            }

            .icons {
              display: inline-flex;
              float: right;

              i {
                margin-right: 10px;
                font-size: rem(28);
              }
            }

            .info {
              font-size: rem(14);
              color: #B2B2B2;
              margin-top: 1px;
              width: 100%;
              text-align: right;
            }

            .flex-10 {
              color: #A8A8A8;
              flex: 0 0 10%;
              max-width: 10%;
              padding-right: 5px;
              padding-left: 5px;
              margin-top: 7px;
              text-align: center;
            }

            .flex-40 {
              flex: 0 0 40%;
              max-width: 40%;
              padding-right: 5px;
              padding-left: 5px;
            }

            .cvv {
              height: 22px;
              margin-top: 42px;

              .cvv-tooltip {
                position: absolute;
                opacity: 0;
                visibility: hidden;
                z-index: 9999;
              }

              &:hover {
                .cvv-tooltip {
                  opacity: 1 !important;
                  visibility: visible !important;
                }
              }

              img {
                margin-top: 31px;
              }
            }

            .tab-tipo-pagamento-cartao {
              li {
                width: 50%;
                padding: .5rem;
                background: #fff;
                border-bottom: 2px solid #f2f2f2;


                a {
                  padding: .5rem;
                  color: black;
                  text-decoration: none;
                }

                &.current {
                  border-bottom: 2px solid #00ecff;
                }

              }

            }

          }
        }
      }

      .dados-pagador {
        border-radius: 12px;
        background: #fff;
        padding: 28px 28px 20px 28px;
        margin-top: 2rem;

        .form-endereco {
          display: contents;

          .form-group {
            padding-left: 5px;
            padding-right: 5px;
          }
        }

        .info-safety {
          font-size: rem(14);
          color: $gray1;
        }

        .dados-voucer {
          font-size: rem(18);
          color: #626262;
        }

        .voucher-info {
          font-size: rem(14);
          color: $gray1;
        }

        .info-danger {
          font-size: rem(14);
          color: #FF0000;
        }

        .termos {
          margin-top: 1rem;
          background: #F2F2F2;
          padding: 2rem 2rem 2rem 4rem;

          .custom-control-label {
            padding-left: 8px;
            padding-top: 5px;
            font-size: rem(14);

            &:before {
              background-color: #fff;
              width: 1.5rem;
              height: 1.5rem;
              border-radius: 50%;
              border: 1px solid #2dbbb1;
            }

            &::after {
              width: 1.5rem;
              height: 1.5rem;
              cursor: pointer;
            }

            b {
              color: $blue;
            }
          }

          .custom-control-input:checked ~ .custom-control-label {
            &:before {
              background-color: #007bff !important;
              width: 1.5rem;
              height: 1.5rem;
            }
          }
        }

        margin-bottom: 2rem;
      }

      .btn-comprar-1 {
        background: $orange;
        border: none;
        box-shadow: 0 6px 6px #0000004a;
        margin-top: 20px;
        font-weight: bold;
        border-radius: 40px;
      }

      .aside-pagamento {
        padding-left: 10px;
        padding-right: 10px;
        margin-top: -50px;


        .card-desconto {
          border-radius: 12px 12px 0px 0px;
          display: flex;
          padding: 2rem;
          background: $blue;

          .icone {
            margin-right: 10px;
            margin-top: 3px;
          }

          .text {
            color: #00ECFF;
            font-weight: bold;
            line-height: 1;
          }
        }

        .info-produtos {
          background: #F2F2F2;
          padding: 1.4rem;
          border: 1px solid #eae9e9;
          box-shadow: 0 1px 1px rgba(0, 0, 0, 0), 0 1px 1px rgba(0, 0, 0, 0.05);

          .location {
            color: $gray1;
          }

          .nm-produto {
            font-size: rem(18);
            color: #626262;
            font-weight: bold;
          }

          .data {
            span {
              font-size: rem(14);
              color: #A8A8A8;
            }

            i {
              color: $blue;
              margin-right: 3px;
            }
          }

          .info {
            margin-top: 1rem;
            background: #DCEDEF;
            padding: .5rem;
            text-align: center;
          }
        }

        .detalhe-produtos {
          display: flex;
          padding-top: 24px;
          padding: 1.3rem;
          background: #F7F7F7;

          .img {
            margin-right: 15px;

            img {
              width: 75px;
            }
          }

          .info {
            .nm-uh {
              font-size: rem(16);
              font-weight: bold;
              color: #898989;
              line-height: 1;
            }

            .ref {
              color: #898989;
              line-height: 1;
            }

            .price-t {
              font-size: rem(24);
              color: #626262;
              font-weight: bold;
            }

            .price-d {
              color: $gray1;
              font-size: rem(14);
            }
          }
        }

        .div-cupom {
          background: #F2F2F2;
          padding: 1.3rem;

          .input-cupom {
            height: 47px;
            width: 70.2% !important;

            &::placeholder {
              color: $gray1;
              font-size: 14px;

            }
          }

          .btn-cupom {
            width: 32%;
            margin-left: 1rem;
            background: $blue;
            border-color: #E5E5E5;
            height: 47px;
            font-size: 12px;
            font-weight: bold;
          }
        }

        .div-comprar {
          background: #FFF;
          padding: 1.3rem;
          font-size: rem(14);

          .sub {
            font-weight: bold;
          }

          .cupom {
            color: #09A7B4;
          }

          .taxa {
            color: #6F6F6F;
          }

          .tp {
            color: #6F6F6F;
            margin-top: 19px;
          }

          .parcelamento {
            color: #09A7B4;
            font-weight: bold;

            .vl-total {
              font-size: rem(15);
            }
          }

          .btn-comprar {
            width: 100%;
            background: $orange;
            border: none;
            box-shadow: 0 6px 6px #0000004a;
            margin-top: 20px;
            font-weight: bold;
            border-radius: 40px;
          }

        }
      }

      .cartaoVI {
        background-image: url('../../templates/litoral/assets/img/cards-vertical-default.png');
        background-position: center -960px;
      }

      .cartaoVIE {
        background-image: url('../../templates/litoral/assets/img/cards-vertical-default.png');
        background-position: center -999px;
      }

      .cartaoCA {
        background-image: url('../../templates/litoral/assets/img/cards-vertical-default.png');
        background-position: center -1240px;
      }

      .cartaoMAE {
        background-image: url('../../templates/litoral/assets/img/cards-vertical-default.png');
        background-position: center -3882px;
      }

      .cartaoEL {
        background-image: url('../../templates/litoral/assets/img/cards-vertical-default.png');
        background-position: center -1640px;
      }

      .cartaoAX {
        background-image: url('../../templates/litoral/assets/img/cards-vertical-default.png');
        background-position: center -1360px;
      }

      .cartaoDC {
        background-image: url('../../templates/litoral/assets/img/cards-vertical-default.png');
        background-position: center -1120px;
      }

      .cartaoHC {
        background-image: url('../../templates/litoral/assets/img/cards-vertical-default.png');
        background-position: center -1600px;
      }

      .cartaoDISC {
        background-image: url('../../templates/litoral/assets/img/cards-vertical-default.png');
        background-position: center -1840px;
      }

      .cartaoDISC {
        background-image: url('../../templates/litoral/assets/img/cards-vertical-default.png');
        background-position: center -1840px;
      }

      .dinheiro {
        background-image: url('../../templates/litoral/assets/img/cards-vertical-default.png');
        background-position: center -840px;
      }

      .boleto {
        background-image: url('../../templates/litoral/assets/img/cards-vertical-default.png');
        background-position: center 5319px;
      }
    }

    .modal-sucess {
      .modal-content {
        height: 514px;
        width: 714px;
        background: #00A8B5;
        color: #fff;
        padding: 4rem;
        text-align: center;

        .msg {
          font-size: rem(22);
        }

        .status-compra {
          color: #00ECFF;
          font-size: rem(50);
          font-weight: 500;
          margin-bottom: 17px;
        }

        .info {
          margin-top: 25px;
        }
      }
    }

    .modal-error {
      .modal-content {
        height: 514px;
        width: 714px;
        background: #F26060;
        color: #fff;
        padding: 4rem;
        text-align: center;

        .msg {
          font-size: rem(22);
        }

        .status-compra {
          color: #460000;
          font-size: rem(50);
          font-weight: 500;
          margin-bottom: 17px;
        }

        .svg {
          background: #460000;
          border-radius: 14px;
          width: 142px;
          height: 142px;
          padding-top: 28px;
          transform: translateX(221px);
        }

        .info {
          margin-top: 25px;
        }
      }
    }

    footer {
      background: $blue1;
      padding: 44px 0px 13px 0px;

      .central-vendas {
        font-size: rem(24);
        color: #ffff;
        margin-bottom: 1rem;
      }

      .atendimento {
        font-size: rem(20);
        color: #ffff;
        margin-bottom: 1rem;

      }

      .fone {
        font-size: rem(44);
        color: #fff;
        font-weight: bold;
        margin-top: 25px !important;
      }

      .forma-pagamento {
        div {
          margin-bottom: 1rem;
        }

        font-size: rem(24);
        color: #ffff;

      }

      .site-safe {
        margin-top: 63px;
        color: #ffff;
        font-size: rem(17);

        .info {
          display: inline-block;
          line-height: 1.1;
        }

        .icone {
          margin-right: 12px;
          display: inline-block;
        }

        i {
          font-size: rem(40);
          position: relative;
          top: -2px;
        }
      }


    }

    #modalQuaseLa .modal-content {
      border-radius: 8px;
      padding: 100px 0
    }

    #modalQuaseLa .modal-content h3 {
      color: #003e57;
      font-size: 32.9px;
      margin: 0;
      float: right;
      font-weight: bold;
      justify-content: space-between;
      text-align: center;
    }

    #modalQuaseLa .modal-content p {
      color: #003e57;
      font-size: 0.75rem;
    }

    #modalQuaseLa .modal-content .just-one-step {
      text-align: center;
      font-size: 17px;
      font-weight: bold;
      top: 12px;
      position: relative;
    }

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

      span {
        width: auto;
        padding: 0.3rem;
        border: 2.1px solid #012532;
        border-radius: 7px;
        font-weight: bold;
        font-size: 14px;
      }
    }

    #modalQuaseLa .modal-content .campo {
      margin-bottom: 10px
    }

    #modalQuaseLa .modal-content .campo .ipt {
      background-color: #d8d8d8;
      border: none;
      color: #003e57;
      font-size: 0.75rem;
      height: 46px;
      padding: 0 10px;
      width: 80%;
      border-radius: 8px;
    }

    #modalQuaseLa .modal-content .campo .ipt::-webkit-input-placeholder {
      color: #003e57
    }

    #modalQuaseLa .modal-content .campo .ipt::-moz-placeholder {
      color: #003e57
    }

    #modalQuaseLa .modal-content .campo .ipt:-ms-input-placeholder {
      color: #003e57
    }

    #modalQuaseLa .modal-content .campo .ipt::placeholder {
      color: #003e57
    }

    #modalQuaseLa .modal-content .btn-padrao {
      background: $orange;
      width: 80%;
      font-size: 16px;
      font-weight: bold;
    }


    #modalQuaseLa .modal-dialog {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      min-height: calc(100% - (.5rem * 2));
    }

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

    #modalQuaseLa .modal-content form {
      margin-top: 12px;
    }

    #modalQuaseLa .modal-lg {
      max-width: 900px;
      width: 900px;

    }

    #modalQuaseLa .modal-content button {
      border: none;
      border-radius: 15px;
      font-size: 14px;
      text-align: center;
      padding: 5px;
      margin-top: 6px;

    }

    #modalQuaseLa {

      .loading {
        position: relative !important;

        &:before {
          content: '' !important;;
          width: unset;
          height: unset;
        }
      }

    }


    .loading {
      position: fixed;
      z-index: 999;
      text-align: center;
      overflow: hidden;
      margin: auto;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;

      &:before {
        content: '';
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #001e27c4;
      }

      .container {
        margin-top: 40vh;
        z-index: 1001;
        color: #fff;
        position: relative;

        .title {
          font-size: 18px;
          font-weight: 600;
        }

        .fone {
          color: #FF8900;
          margin-bottom: -13px;
          margin-top: -12px;
          font-size: rem(67);
          font-weight: bold;
        }

        .div-spiner {
          i {
            font-size: rem(81);
            animation: anim-rotate 2s infinite linear;
          }
        }

        @keyframes anim-rotate {
          0% {
            transform: rotate(0);
          }
          100% {
            transform: rotate(360deg);
          }
        }
      }
    }

    .popover-item {
      position: absolute;
      right: 38px;
      color: #fff;
      padding: 1.2rem;
      z-index: 999;
      border-radius: 10px 0 10px 10px;
      width: 40%;
      display: flex;
      max-width: 480px;


      .close-popover {
        cursor: pointer;
        position: absolute;
        right: 0;
        top: -35px;
        background: #ffff;
        color: #848484;
        font-size: 14px;
        padding: 1rem;
        padding: 9px 10px 5px 11px;
        border-radius: 10px 10px 0 0;
      }


      .sad {
        display: inline-block;
        width: 48px;

        padding: 0.5rem;
        text-align: center;
        margin-right: 37px;
        padding-top: 11px;
        margin-top: 7px;
        height: 48px;

        i {
          font-size: 28px;
          color: #fff;
        }
      }

      .texto {
        display: inline-block;

        .title {
          font-size: rem(17);
          color: #FFF;
          font-weight: bold;
          line-height: 1;
        }

        .data-pesquisa {
          color: #C78484;
          font-size: rem(18);
        }

        .messages {
          font-size: rem(17);
          color: #FFF;
          line-height: 1;
        }
      }

      .arrow {
        position: absolute;
        display: block;
        width: 1rem;
        height: .5rem;
        margin: 0 .3rem;
        bottom: -9px;
        right: 82px;

        &::before {
          bottom: 0;
          border-width: .5rem .5rem 0;
          border-top-color: rgba(0, 0, 0, .25);
          position: absolute;
          display: block;
          content: "";
          border-color: transparent;
          border-style: sol
        }

        &::after {
          position: absolute;
          display: block;
          content: "";
          border-color: transparent;
          border-style: solid;
          bottom: -22px;
          border-width: 2rem 2rem 0;

        }
      }

      &.orange {
        .texto {
          padding-top: 2px;
        }

        bottom: 42px;
        position: fixed;

        background: #F58E35;

        .sad {
          background: #FF9C46;
        }

        .arrow {
          &::after {
            border-top-color: #f58e35;
          }

        }

      }

      &.blue {
        bottom: 37px;
        position: fixed;
        //background: #2DBBB1;
        background: #F58E35;

        .sad {
          //background: #43CEC4;
          background: #F58E35;
        }

        .arrow {
          &::after {
            //border-top-color: #2DBBB1;
            border-top-color: #f58e35;
          }

        }

      }
    }

  }

}