@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap');

/* General */
.ggskin {
    font-family: 'avenir', 'Poppins', serif !important;
}

.hotspot_box_wrapper {
    border-radius: 10px;
}

.hotspot_box {
    border-radius: 10px;
    backdrop-filter: blur(5px);
    /* filter: blur(5px);
    -webkit-filter: blur(5px); */
    cursor: pointer;

    left: 50% !important;
    transform: translateX(-50%) !important;

    top: unset !important;
}

.hotspot_text {
    width: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.hotspot_text:hover .hotspot_box {
    background-color: rgba(255, 255, 255, 0.539) !important;
}

/* .hotspot_text:hover>div {
    font-size: 24px !important;
} */

.hotspot_text>div {
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0) !important;

    height: 50px !important;

    /* background: red; */
    padding: 10px 20px !important;

    /* slowly transition border transparency */
    transition: all 0.5s ease;

    /* Transition for slowly making text larger
    transition: font-size 0.2s ease; */
    left: unset !important;
    top: unset !important;
    cursor: pointer !important;
    position: unset !important;

    white-space: nowrap;

    /* This makes the text be vertically centered even with 100% height of the parent element. */
    display: flex;
    align-items: center;
}

.hotspot_text>div:hover {
    border: 1px solid rgba(255, 255, 255, 0.543) !important;
}

.hotspot-preview-image {
    visibility: visible !important;
}

.hotspot-preview-image img {
    border-radius: 9999px;
}

/* .hotspot_text>div:hover {
    font-size: 24px !important;
} */



.mobile_style_circle {
    border-radius: 1000px;
    backdrop-filter: blur(5px);
}


/* Bottom bar */

.text-detached {
    font-size: 1.3em;
    font-weight: bold;
}

.text-detached>div {
    cursor: pointer !important;
}


/* Modal */

/* per default, the backgrounds shall be hidden. */
.clickable_close {
    display: none;
}

.modal_background {
    height: 0px !important;
    margin-left: 25% !important;
    width: 50% !important;
    border: none !important;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
    border-bottom: none !important;
    background-color: rgba(0, 0, 0, 0.201) !important;
    backdrop-filter: blur(5px) !important;
    transition: all 1s ease;
 }