neiyou_user_web/public/assets/examples/css/apps/location.css

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

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

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

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

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

.list-inline {
  height: 25px; }

.list-inline li a:hover {
  text-decoration: none;
  color: #76838f !important; }

.detail {
  background-color: #79b2fc !important; }

.leaflet-popup-pane:hover h3 {
  color: #79b2fc !important; }

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

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

@media (max-width: 1199.98px) {
  .page-aside + .page-main {
    margin-left: 450px !important; } }

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

@media (max-width: 767.98px) {
  .page-aside-inner {
    overflow: hidden !important; }
  .search-friends .panel-title {
    opacity: 0;
    position: absolute;
    z-index: -1; }
  .search-friends .panel-actions {
    padding: 15px 30px; }
  .page-aside {
    width: 260px; }
    .page-aside + .page-main {
      margin-left: 0 !important; }
    .page-aside.open {
      width: 300px; } }