/**
 * Default out of the box styling for the google maps popups.
 * Overwrite the styling in your own theme for customization.
 */
@keyframes gmapIn {
    to{
        transform: none;
        opacity:.9;
    }
}

.gmap-popup{
    opacity: 0;
    transform: perspective(300px) translateY(20px) rotate3d(1, 0, 0, 10deg);
    transform-origin: bottom center;
    animation: .25s 0.1s gmapIn forwards cubic-bezier(0.4, 0, 0.2, 1);
}

/**
 * I take full responsibility for this code
 */
.geolocation-common-map-container > div > div > div:nth-child(1) > div:nth-child(4) > div > div{
    opacity: 0;
}

.gmap-popup__original-bg{
    display: none;
}

.gmap-popup__content{
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    border-radius: 10px;
    margin: 0;
    padding: 1rem;
    background-color: #3aa9e3;
    color: white;
    transform: translateY(20px);
    overflow: visible !important;
}

.gmap-popup__content:before{
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 100%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 5px solid #3aa9e3;
}

.gmap-popup__close-button{
    top: 0 !important;
    right: 0 !important;
    transform: translate(50%, 50%);
    background: #3aa9e3 url('../img/close-white.svg') no-repeat center;
    width: 30px !important;
    height: 30px !important;
    border-radius: 15px;
    border: 2px solid white;
    opacity: 1 !important;
}

.gmap-popup__close-button img{
    display: none;
}