@import "./dots.scss";

#formPersData{
  // new stuff for google autocompletion
  .w-75 {
      position: relative;
  }

  .dropDownGoogleAutoComplete {
      position: absolute;
      width: 100%;
      max-height: 400px;
      margin-bottom: 23px;
      background: $white;
      border-radius: 3px;
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
      border: solid 1px #e9e9e9;
      box-shadow: $box-shadow;
      z-index: 1;
      left: 0px;
      transition: all .25s;
      display: none;
      opacity: 0;
      z-index: 800;

      &.start {
        display: block;
      }

      &.enter {
        opacity: 1;
      }

      &.exit {
        opacity: 0;
      }

      .inner {
        position: relative;
      }

      .loader {
        position: absolute;
        top: 18px;
        right: 25px;
        transition: all .25s;
        transform: translate3d(0, 10px, 0);
        opacity: 0;

        &.enter {
          opacity: 1;
          transform: translate3d(0, 0, 0);
        }

        &.exit {
          opacity: 0;
          transform: translate3d(0, 10px, 0);
        }
      }


      li {
          height: 40px;
          border-bottom:  solid 1px #e9e9e9;
          padding-top: 11px;
          padding-left: 11px;
          font-size: 14px;

          &:hover{
            background: #ebebeb;
            cursor: pointer;
          }
          &:active{
            background: $grey-20;
            color: $white;
          }

          &.entry {
            transition: all .25s;
            opacity: 0;
            transform: translate3d(-10px, 0, 0);

            &.disabled {
              cursor: auto;

              &:hover {
                background: transparent;
                cursor: auto;
              }

              &:active {
                background: transparent;
                color: $grey-20;
              }
            }

            &.focus {
              box-shadow: 0 0 3px 1px rgb(94, 158, 214);
            }

            &.enter {
              opacity: 1;
              transform: translate3d(0, 0, 0);
            }

            &.exit {
              opacity: 0;
              transform: translate3d(-10px, 0, 0);
            }
          }

          .placeholder {
            color: $grey-20;
            font-size: 14px;
          }
      }

      .powered-by-google{
          text-align: center;
          padding-top: 10px;
          padding-bottom: 10px;
          img {
              height: 15px;
          }
      }

  }
}