#location-map-main {
  margin-bottom: 20px;
}

.map {
  .loading-map {
    z-index: 200;
    position: absolute;
    height: 100%;
    padding-top: 50px;
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    color: white;
  }
  #draggable-map {
    cursor: move;

    .map-container {
      display: inline-block;
      position: relative;
    }
  }

  width: 100%;
  position: relative;
  overflow: hidden;
  height: 100vh;
  transition: all 0.5s ease;

  #location-map-image {
    height: 100%;
  }

  .point {
    cursor: pointer;
    position: absolute;
    opacity: 0.7;
    display: block;
    text-align: center;
    font-size: 26px;
    color: white;
    width: 50px;
    height: 50px;
    border-width: medium;
    border-style: solid;

    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: 50% 50% !important;

    //transition: all .2s ease-in-out;

    i {
      padding-top: 25%;
      color: white;
    }
    i.ra {
      display: inline-block;
      padding-top: 18%;
    }

    &:hover {
      opacity: 0.9;
      //transform: scale(1.1);
    }
  }

  .point-moving {
    opacity: 0.5  !important;

    &:hover {
      opacity: 0.5 !important;
    }
  }

  //.zooming-animation {
  //  transition: all 0.2s ease;
  //}

  .point-focus {
    -moz-animation-duration: 3s;
    -webkit-animation-duration: 3s;
    -moz-animation-name: ping;
    -webkit-animation-name: ping;

    animation-iteration-count: infinite;
    /* W3C and Opera */
    -moz-animation-iteration-count: infinite;
    /* Firefox */
    -webkit-animation-iteration-count: infinite;
    /*Safari and Chrome*/
    animation-direction:alternate;
    /* W3C and Opera */
    -moz-animation-direction:alternate;
    /* Firefox */
    -webkit-animation-direction:alternate;
    /* Safari and Chrome */
    animation-delay:0s;
    /* W3C and Opera */
    -moz-animation-delay:0s;
    /* Firefox */
    -webkit-animation-delay:0s;
    /* Safari and Chrome */
  }

  .square {
    border-radius: 0px;
  }

  .circle {
    border-radius: 50%;
  }

  .standard {
    width: 50px;
    height: 50px;
  }

  .small {
    width: 25px;
    height: 25px;
    font-size: 13px;
  }
  .tiny {
    width: 10px;
    height: 10px;
    font-size: 5px;
  }

  .large {
    width: 100px;
    height: 100px;
    font-size: 52px;
  }
  .huge {
    width: 200px;
    height: 200px;
    font-size: 108px;
  }

  .red {
    background-color: red;
    border-color: rgba(255, 0, 0, 0.5);
    box-shadow: 0 0 10px red;
  }
  .blue {
    background-color: blue;
    border-color: rgba(0, 0, 255, 0.5);
    box-shadow: 0 0 10px blue;
  }
  .yellow {
    background-color: yellow;
    border-color: rgba(255, 255, 0, 0.5);
    box-shadow: 0 0 10px yellow;
  }
  .green {
    background-color: green;
    border-color: rgba(0, 128, 0, 0.5);
    box-shadow: 0 0 10px green;
  }
  .white {
    background-color: white;
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 10px white;
  }
  .black {
    background-color: black;
    border-color: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 10px black;
  }
  .grey {
    background-color: grey;
    border-color: rgba(128, 128, 128, 0.7);
    box-shadow: 0 0 10px grey;
  }
  .none {
    background: none;
    border: none;
  }

  .yellow i, .white i {
    color: black;
  }
}
.map-admin {
  margin-bottom: 15px;

  button, a {
    display: inline-block;
  }
}
.map-zoom, .map-admin {
  position: absolute;
  z-index: 1000;
  padding: 5px;
  display: inline-block;
  overflow: visible;
}
.map-zoom {
  button, a {
    display: block;
    width: 100%;
    margin-bottom: 3px;
    background-color: rgba(244, 244, 244, 0.9);
  }
}

.map-admin {
  right: 0;
  margin-right: 15px;
}

.map-helper {
  bottom: 30px;
  position: absolute;
  z-index: 700;
  text-align: center;
  width: 100%;

  p {
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 10px 30px;
    border-radius: 25px;
    color: white;
    font-size: 16px;
    cursor: default;
  }
}

.map-admin-mode {
  outline: none;
  border-color: #913730;
  box-shadow: 0 0 20px #913730;
  //transition: all 0.5s ease;

  //-webkit-animation: glow 1.0s infinite alternate;
  -webkit-transition: border 0.5s linear, box-shadow 0.5s linear;
  -moz-transition: border 0.5s linear, box-shadow 0.5s linear;
  transition: border 0.5s linear, box-shadow 0.5s linear;
}

.entity-entry {
  position: relative;
  max-height: 430px;
  overflow: hidden;

  &:before {
    content:'';
    width:100%;
    height:120px;
    position:absolute;
    left:0;
    top:310px;
    background:linear-gradient(transparent 20px, white);
  }
}

.entity-close {
  cursor: pointer;
}

@-webkit-keyframes ping {
  from {
    transform: scale(1);
    -ms-transform: scale(1);
    /* IE 9 */
    -webkit-transform: scale(1);
    /* Safari and Chrome */
    -o-transform: scale(1);
    /* Opera */
    -moz-transform: scale(1);
    /* Firefox */
  }
  to {
    //transform: scale(1.1);
    //-ms-transform: scale(1.1);
    ///* IE 9 */
    //-webkit-transform: scale(1.1);
    ///* Safari and Chrome */
    //-o-transform: scale(1.1);
    ///* Opera */
    //-moz-transform: scale(1.1);
    /* Firefox */
    box-shadow: 0 0 15px darkred;
    border-color: darkred;
  }
}