@import "vars";
$app-location-search-height: 72px;
.app-location {
  #map {
    height: 100%;
    .marker-active {
      .in-map-markers .friend-icon {
        border-color: $color-blue-400;
        &::before {
          border-color: $color-blue-400 transparent transparent;
        }
      }
    }
    .in-map-markers {
      display: inline-block;
      .friend-icon {
        border: 3px solid $color-blue-600;
        transition: 0.4s ease-in-out all;
        position: relative;
        border-radius: 50%;
        display: inline-block;
        img {
          width: 62px;
          border-radius: 50%;
        }
        &::before {
          content: "";
          height: 0;
          width: 0;
          border-width: 17px 21px 0;
          border-color: $color-blue-600 transparent transparent;
          border-style: solid;
          transition: 0.4s ease-in-out all;
          position: absolute;
          top: 58px;
          left: 10px;
          z-index: -1;
        }
        &:hover {
          border-color: $color-blue-400;
        }
        &:hover::before {
          border-color: $color-blue-400 transparent transparent;
        }
      }
    }
  }

  //add to remove unneeded  col padding v4a6 20170303 ---Kevin_y

  .list-group .friend-info {
    padding: 0;
    padding-left: 15px;
  }

  //---Kevin_y
}

.page-aside {
  width: 450px;
  background-color: #f3f7f9;
  + .page-main {
    margin-left: 450px !important;
    height: 100%;
  }
}

.page-aside-inner {
  height: 100%;
  overflow: hidden;
  .search-friends {
    margin-bottom: 15px;
    border-radius: 0;
  }
  .app-location-list {
    height: 100%;
    height: -webkit-calc(100% - #{$app-location-search-height});
    height: calc(100% - #{$app-location-search-height});
    &-body {
      height: 100%;
    }
  }
}

.list-group {
  margin: 0;
  padding-right: 15px;
  
  .avatar {
    width: 62px;
  }
  .card {
    margin-bottom: 15px;
  }
  .card-block {
    transition: border .2s linear, color .2s linear, width .2s linear, background-color .2s linear;
    &:hover {
      cursor: pointer;
      background-color: $color-grey-200;
    }
  }
  .list-group-item,
  .list-group-item:hover {
    background-color: transparent;
  }
}

.list-inline {
  height: 25px;
}

.list-inline li a:hover {
  text-decoration: none;
  color: $color-blue-grey-500!important;
}

.detail {
  background-color: $color-blue-400!important;
}

.leaflet-popup-pane:hover h3 {
  color: $color-blue-400!important;
}

.marker-cluster-small {
  background-color: rgba(162, 202, 238, .6);
  & > div {
    background-color: rgba(98, 168, 234, .6);
  }
  span {
    color: #fff;
  }
}

.marker-cluster-medium {
  background-color: rgba(250, 152, 152, .6);
  & > div {
    background-color: rgba(249, 104, 104, .6);
  }
  span {
    color: #fff;
  }
}

@include media-breakpoint-down(lg) {
  .page-aside {
    + .page-main {
      margin-left: 450px !important;
    }
  }
}

@include media-breakpoint-down(xl) {
  .page-aside {
    width: 300px;
    .panel-title {
      opacity: 0;
    }
    .input-search {
      width: 240px;
    }
    + .page-main {
      margin-left: 300px !important;
    }
  }
}

@include media-breakpoint-down(sm) {
  .page-aside-inner {
    overflow: hidden!important;
  }

  .search-friends {
    .panel-title {
      opacity: 0;
      position: absolute;
      z-index: -1;
      // display: none;
    }

    .panel-actions {
      padding: 15px 30px;
    }
  }

  .page-aside {
    width: 260px;
    + .page-main {
      margin-left: 0 !important;
    }
    &.open {
      width: 300px;
    }
  }
}