/* Google Map CSS */
.gmap img[src^="https://s3.us-west-2.amazonaws.com/storage-dev.inspectdeploy.io/media/guards"],
.gmap img[src*="guard.png"] {
    border-radius: 50%;
    border: 2px solid #01720771 !important;
    background-color: white !important;
    position: relative;
}

.gmap img[src$="?border-red"] {
    border: 2px solid #ff0303 !important;
}

.gmap div:has(> img[src$="circle.png"]) {
    transform: translateY(.2rem);
}

@keyframes pulse {
    from {
        background-color: #01750b7a;
    }

    to {
        background-color: #01750b31;
    }
}

.map-marker-label {
    padding: 3px 5px;
    border-radius: 5px;
    background-color: #01750a5b;
    border: 1px dashed rgb(255, 0, 0);
    text-shadow: 1px 1px 0px #333;
    min-width: 30px;
    min-height: 30px;
    transform: translateY(-.3rem);
}

.map-marker-label-cluster-name {
    padding: 3px 5px;
    border-radius: 5px !important;
    background-color: #00000025 !important;
    min-width: auto;
    transform: translateY(-1.5rem);
}

.map-marker-label.shodowless {
    background-color: #01750a5b;
    transform: translateY(2.55rem);
    min-height: auto;
    text-shadow: none;
}

.map-marker-label.center {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50%;
    transform: translateY(1.2rem);
}

.map-marker-label.center.pulse {
    animation: .8s ease-in -1s infinite alternate both running pulse;
}

.map-marker-label.center.blank {
    color: transparent !important;
    text-shadow: 1px 1px 0px rgba(51, 51, 51, 0) !important;
}

.map-marker-label.center.blank::after {
    position: absolute;
    content: '';
    width: 8px;
    height: 8px;
    top: 10px;
    left: 10px;
    background-color: rgba(255, 255, 255, 0.664);
    border-radius: 50%;
}

.map-marker-label.bottom {
    transform: translateY(2.7rem);
}

.map-marker-label-show-time {
    padding: 3px 5px;
    border-radius: 5px !important;
    background-color: #71e276 !important;
    min-width: auto;
    width: auto;
    color:white;
    transform: translateY(-0.3rem);
}

.map-marker-label.shodowless::before {
    position: absolute;
    content: '';
    left: calc(50% - 8px);
    top: -8px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #08853c;
    position: absolute;
    border-radius: 17px;
}

.map-marker-label:not(.bottom):not(.center):not(.shodowless)::before,
.map-marker-label-show-time::before {
    position: absolute;
    content: '';
    left: calc(50% - 8px);
    bottom: -7px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #71e276;
    position: absolute;
    border-radius: 17px;
}

.map-marker-label.bottom::before {
    position: absolute;
    content: '';
    left: calc(50% - 8px);
    top: -8px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #08853c;
    position: absolute;
    border-radius: 17px;
}

/* Orientation Icon CSS */
.gmap div:has(> img[src*="/oriented-arrow.png"]) {
    transform: translateX(0rem) translateY(0.72rem);
}

.gmap div:has(> img[src$="/oriented-arrow.png?degree=0"]) {
    transform: translateX(0rem) translateY(-0.3rem) rotate(0deg); /*Done*/
}
/* -------------------------------------------------------------------------- */
/*                                  Negative                                  */
/* -------------------------------------------------------------------------- */
.gmap div:has(> img[src$="/oriented-arrow.png?degree=-10"]) {
    transform: translateX(-.3rem) translateY(-0.3rem) rotate(0deg);
}
.gmap div:has(> img[src$="/oriented-arrow.png?degree=-20"]) {
    transform: translateX(-0.4rem) translateY(-0.4rem) rotate(-20deg);
}
.gmap div:has(> img[src$="/oriented-arrow.png?degree=-30"]) {
    transform: translateX(-0.4rem) translateY(0.1rem) rotate(-30deg);
}
.gmap div:has(> img[src$="/oriented-arrow.png?degree=-40"]) {
    transform: translateX(-0.5rem) translateY(0.2rem) rotate(-40deg);
}
.gmap div:has(> img[src$="/oriented-arrow.png?degree=-50"]) {
    transform: translateX(-0.6rem) translateY(0.3rem) rotate(-50deg);
}
.gmap div:has(> img[src$="/oriented-arrow.png?degree=-60"]) {
    transform: translateX(-0.7rem) translateY(0.3rem) rotate(-60deg);
}
.gmap div:has(> img[src$="/oriented-arrow.png?degree=-70"]) {
    transform: translateX(-0.8rem) translateY(0.4rem) rotate(-70deg);
}
.gmap div:has(> img[src$="/oriented-arrow.png?degree=-80"]) {
    transform: translateX(-0.8rem) translateY(0.5rem) rotate(-80deg);
}
.gmap div:has(> img[src$="/oriented-arrow.png?degree=-90"]) {
    transform: translateX(-1rem) translateY(0.7rem) rotate(-90deg);
}
.gmap div:has(> img[src$="/oriented-arrow.png?degree=-100"]) {
    transform: translateX(-1rem) translateY(0.8rem) rotate(-100deg);
}
.gmap div:has(> img[src$="/oriented-arrow.png?degree=-110"]) {
    transform: translateX(-0.8rem) translateY(1.03rem) rotate(-110deg);
}
.gmap div:has(> img[src$="/oriented-arrow.png?degree=-120"]) {
    transform: translateX(-0.8rem) translateY(1.2rem) rotate(-120deg);
}
.gmap div:has(> img[src$="/oriented-arrow.png?degree=-130"]) {
    transform: translateX(-0.5rem) translateY(1.2rem) rotate(-130deg);
}
.gmap div:has(> img[src$="/oriented-arrow.png?degree=-140"]) {
    transform: translateX(-0.4rem) translateY(1.2rem) rotate(-140deg);
}
.gmap div:has(> img[src$="/oriented-arrow.png?degree=-150"]) {
    transform: translateX(-0.4rem) translateY(1.3rem) rotate(-150deg);
}
.gmap div:has(> img[src$="/oriented-arrow.png?degree=-160"]) {
    transform: translateX(-0.1rem) translateY(1.3rem) rotate(-160deg);
}
.gmap div:has(> img[src$="/oriented-arrow.png?degree=-170"]) {
    transform: translateX(-0.05rem) translateY(1.3rem) rotate(-170deg);
}
.gmap div:has(> img[src$="-0.1remow.png?degree=-180"]) {
    transform: translateX(0rem) translateY(1.3rem) rotate(-180deg);
}
/* -------------------------------------------------------------------------- */
/*                                  Positive                                  */
/* -------------------------------------------------------------------------- */
.gmap div:has(> img[src$="/oriented-arrow.png?degree=10"]) {
    transform: translateX(.3rem) translateY(-0.3rem) rotate(10deg);
}
.gmap div:has(> img[src$="/oriented-arrow.png?degree=20"]) {
    transform: translateX(0.4rem) translateY(-0.1rem) rotate(20deg);
}
.gmap div:has(> img[src$="/oriented-arrow.png?degree=30"]) {
    transform: translateX(0.4rem) translateY(-0.1rem) rotate(30deg);
}
.gmap div:has(> img[src$="/oriented-arrow.png?degree=40"]) {
    transform: translateX(0.6rem) translateY(-0.2rem) rotate(40deg);
}
.gmap div:has(> img[src$="/oriented-arrow.png?degree=50"]) {
    transform: translateX(0.7rem) translateY(-0.1rem) rotate(50deg);
}
.gmap div:has(> img[src$="/oriented-arrow.png?degree=60"]) {
    transform: translateX(0.7rem) translateY(0.4rem) rotate(60deg);
}
.gmap div:has(> img[src$="/oriented-arrow.png?degree=70"]) {
    transform: translateX(0.9rem) translateY(0.5rem) rotate(70deg);
}
.gmap div:has(> img[src$="/oriented-arrow.png?degree=80"]) {
    transform: translateX(0.9rem) translateY(0.5rem) rotate(80deg);
}
.gmap div:has(> img[src$="/oriented-arrow.png?degree=90"]) {
    transform: translateX(1rem) translateY(0.7rem) rotate(90deg);
}
.gmap div:has(> img[src$="/oriented-arrow.png?degree=100"]) {
    transform: translateX(1rem) translateY(0.7rem) rotate(100deg);
}
.gmap div:has(> img[src$="/oriented-arrow.png?degree=110"]) {
    transform: translateX(0.8rem) translateY(1rem) rotate(110deg);
}
.gmap div:has(> img[src$="/oriented-arrow.png?degree=120"]) {
    transform: translateX(0.8rem) translateY(1.2rem) rotate(120deg);
}
.gmap div:has(> img[src$="/oriented-arrow.png?degree=130"]) {
    transform: translateX(0.7rem) translateY(1.2rem) rotate(130deg);
}
.gmap div:has(> img[src$="/oriented-arrow.png?degree=140"]) {
    transform: translateX(0.3rem) translateY(1.2rem) rotate(140deg);
}
.gmap div:has(> img[src$="/oriented-arrow.png?degree=150"]) {
    transform: translateX(0.2rem) translateY(1.2rem) rotate(150deg);
}
.gmap div:has(> img[src$="/oriented-arrow.png?degree=160"]) {
    transform: translateX(0.2rem) translateY(1.3rem) rotate(160deg);
}
.gmap div:has(> img[src$="/oriented-arrow.png?degree=170"]) {
    transform: translateX(0.1rem) translateY(1.3rem) rotate(170deg);
}
.gmap div:has(> img[src$="/oriented-arrow.png?degree=180"]) {
    transform: translateX(0rem) translateY(1.3rem) rotate(180deg);
}