doneit-web/src/app/pages/search/search.page.scss

@import "~src/function.scss";

.top-box {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  flex-direction: row-reverse;
}
.header-main {
  padding: 5px 18px;
  padding-bottom: 2px;
  padding-top: 25px;
  ion-form {
    width: 100%;
    padding-right: 10px;
  }
  .btn-modal-dismiss {
    display: flex;
    width: 50px !important;
    height: fit-content;
    padding: 0 !important;
    margin: 0 !important;
    margin-left: 25px !important;
    margin-top: 5px !important;
    align-content: center;
    align-items: center;
  }
  .ion-align-content-center {
    align-content: center;
  }
  .search-input-container {
    width: 100%;
    background-color: white;
    border-radius: 27.5px;
    border: solid 1px #ebebeb;
    .icon {
      color: #797979;
      width: rem(45);
      height: rem(45);
      display: flex;
      justify-content: center;
      font-size: rem(25);
      align-items: center;
    }
    .input-text {
      width: 100%;
    }
    .icon-z {
      width: 20px;
    }
  }
  .icon-z {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: rem(45);
  }
  .profile {
    display: none;
    font-size: rem(45);
  }
}

.searchParent {
  display: flex;
  justify-content: center;
}
.searchChild {
  display: inline !important;
}

ion-slide {
  padding-top: 5px;
}

// search result type
.options {
  max-width: 900px;
  margin-top: rem(10);
  .container {
    .d-flex {
      width: 100%;
      .button {
        min-width: 116px;
        border: solid 1px #e9e9e9;
        margin: 0px rem(5);
        margin-bottom: rem(10);
        padding: rem(5) rem(20);
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        span {
          padding: 0px;
          margin: 0px;
          font-family: Roboto;
          color: var(--title-text-color);
          font-size: rem(15);
          text-align: center;
        }
        .label {
          width: 100%;
          font-family: Roboto;
          font-size: rem(13);
          font-weight: 300;
          color: #797979;
          text-align: center;
        }
        border-radius: 15px;
      }

      .active-category {
        background-color: #42b9fe;
        color: white;
        span {
          color: white;
        }
        .label {
          color: white;
        }
      }
    }
    .icon {
      display: none;
      width: rem(45);
      height: rem(45);
      justify-content: center;
      align-items: center;
      ion-icon {
        width: rem(25);
      }
    }
  }
}

.d-flex {
  display: flex;
}

// search result
.search-result {
  width: 100%;
  border-bottom: unset;
  padding: 0px 20px;

  .header {
    /*  border-top: 1px solid #ebebeb; */
    .sort-by {
      width: 100%;
      .order {
        font-family: Roboto;
        font-size: rem(13);
        font-weight: 300;
        color: #797979;
      }
      .order-labal {
        font-family: Roboto;
        font-size: rem(15);
        color: var(--title-text-color);
        margin-left: 20px;
      }
    }
    ion-icon {
      font-size: rem(25);
    }
  }
  ul {
    padding: 0px;
    margin: 0px;
    li {
      padding-top: 8px;
      padding-bottom: 8px;
      border-top: 1px solid #ebebeb;
      display: flex;
      align-items: center;
      .icon {
        font-size: rem(35);
        align-items: center;
        display: flex;
      }
      .content {
        width: 100%;
        margin-left: 10px;
        .result-name {
          margin: 0px;
          width: 100%;
          font-family: Roboto;
          font-size: rem(15);
          color: var(--title-text-color);
          line-height: 1.67;
        }
        span {
          font-family: Roboto;
          font-size: rem(13);
          font-weight: 300;
          color: #797979;
        }
        .app-name {
          background: var(--font-awesome);
          border-radius: 18px;
          text-align: center;
          display: flex;
          align-items: center;
          padding: 0px 5px;
          color: white;
          font-size: rem(12);
          font-weight: 500;
          height: 19px;
          -webkit-border-radius: 18px;
          -moz-border-radius: 18px;
          -ms-border-radius: 18px;
          -o-border-radius: 18px;
        }
        span.documente-date {
        }
        span.organic-entity {
          width: 100%;
        }
      }
    }
  }
}
// most searched word
.most-searched-words {
  width: 100% !important;
  //min-width: 441px;
  p.title {
    width: 100%;
    height: 24px;
    font-family: Roboto;
    font-size: rem(20);
    text-align: center;
    color: black;
    margin-bottom: 25px;
  }

  .most-searched-word-container {
    height: 400px;
  }
}

@media only screen and (min-width: 1024px) {
  .advance-search {
    max-width: 47%;
  }
}

/* Advance search */
.advance-search {
  padding: 20px 20px;
  padding-top: 14px;

  .icon {
    color: #797979;
    width: rem(45);
    height: rem(45);
    display: flex;
    justify-content: center;
    font-size: rem(25);
    align-items: center;
  }
  .input-container {
    margin-bottom: 15px;
    width: 100%;
    border-radius: 5px;
    border: solid 1px #ebebeb;
  }
  .date-container {
    .icon-mer {
      margin-right: 10px;
    }
  }

  ion-datetime {
    width: 100%;
  }

  .subject-container {
  }
}

.loader {
  position: absolute;
  margin-top: -14px;
  width: calc(100% - 39px);
}

.swiper-container {
  width: 100%;
}