.maha-search-panel {
  .translate-y-transition(100%, 0, .5s);
  background-color: @white;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.maha-search-header {
  border-bottom: 1px solid fadeout(@black, 85);
}
.maha-search-landing {
  flex: 1;
  display: flex;
  .maha-search-landing-message {
    margin: auto;
    text-align: center;
    padding: 20px;
    h2 {
      margin: 0 0 20px;
      font-size: 50px;
      i {
        color: fadeout(@black, 80);
      }
    }
    h3 {
      font-size: 22px;
      line-height: 28px;
      margin: 0;
      color: fadeout(@black, 80);
    }
  }
}
.maha-search-results {
  .scrollable();
  flex: 1;
}
.maha-search-section-header {
  border-bottom: 1px solid fadeout(@black, 95);
  text-transform: uppercase;
  color: fadeout(@black, 70);
  padding: 0.8em;
  background-color: lighten(@black, 95);
  position: relative;
  line-height: 1.5em;
  font-weight: bold;
}
.maha-search-section-header-link {
  position: absolute;
  line-height: 1.5em;
  right: 1em;
  top: ~"calc(50% - .75em)";
  color: @blue;
  cursor: pointer;
}
.maha-search-section-header-icon {
  .border-radius(5px);
  color: #FFF;
  display: flex;
  width: 1.5em;
  height: 1.5em;
  text-align: center;
  background-color: @darkgrey;
  float: left;
  margin-right: 1em;
  &.red { background-color: @red; }
  &.orange { background-color: @orange; }
  &.yellow { background-color: @yellow; }
  &.olive { background-color: @olive; }
  &.green { background-color: @green; }
  &.teal { background-color: @teal; }
  &.blue { background-color: @blue; }
  &.purple { background-color: @purple; }
  &.violet { background-color: @violet; }
  &.pink { background-color: @pink; }
  &.brown { background-color: @brown; }
  &.grey { background-color: @grey; }
  &.black { background-color: @black; }
  i {
    margin: auto;
  }
}
.maha-search-result {
  .hover(background-color, fadeout(@black, 99));
  border-bottom: 1px solid fadeout(@black, 95);
  background-color: @white;
  cursor: pointer;
  display: flex;
}
.maha-search-result-icon {
  flex: 0 0 3em;
  display: flex;
  i {
    margin: auto;
  }
  .fa {
    font-size: 1.4em;
  }
  .icon {
    font-size: 1em;
    background: #444;
    color: #FFF;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    display: flex;
    &:before {
      margin: auto;
    }
  }
}
.maha-search-result-image {
  flex: 0 0 3em;
  display: flex;
  & > img {
    margin: auto;
  }
  img {
    width: 2em;
    height: 2em;
    display: block;
    border-radius: 50%;
  }
  .maha-avatar,
  .maha-image {
    margin: auto;
    width: 2em;
    height: 2em;
  }
}
.maha-search-result-details {
  flex: 1;
  padding: 0.5em;
  color: #888;
  line-height: 2em;
}
.maha-search-result-proceed {
  display: flex;
  padding: 0.8em 0.8em 0.8em 0;
  font-size: 0.8em;
  margin: 0;
  .fa {
    color: fadeout(@black, 80);
    margin: auto !important;
    font-size: 1.2em;
    line-height: 1em;
  }

}