/* Inico Animacion para los sprites */
.sprite{
    width: 155px;
    height: 155px;
    object-fit: cover;
    background-position: 0px 0;
    animation: anim-sprite 1s steps(6) infinite;
}

.sp-door {
    width: 155px;
    height: 155px;
    object-fit: cover;
    background-position: 0px 0;
    animation: anim-sprite 1s steps(6) infinite;
    background: url("{{asset('street/hotspot/door.png')}}") no-repeat;
}
.sp-door-b {
    width: 155px;
    height: 155px;
    object-fit: cover;
    background-position: 0px 0;
    animation: anim-sprite 1s steps(6) infinite;
    background: url("{{asset('street/hotspot/door-b.png')}}") no-repeat;
}

.sp-dron {
    width: 155px;
    height: 155px;
    object-fit: cover;
    background-position: 0px 0;
    animation: anim-sprite 1s steps(6) infinite;
    background: url("{{asset('street/hotspot/dron.png')}}") no-repeat;
}

.sp-dron-b {
    width: 155px;
    height: 155px;
    object-fit: cover;
    background-position: 0px 0;
    animation: anim-sprite 1s steps(6) infinite;
    background: url("{{asset('street/hotspot/dron-b.png')}}") no-repeat;
}

.sp-info {
    width: 155px;
    height: 155px;
    object-fit: cover;
    background-position: 0px 0;
    animation: anim-sprite 1s steps(6) infinite;
    background: url("{{asset('street/hotspot/info.png')}}") no-repeat;
}

.sp-info-b {
    width: 155px;
    height: 155px;
    object-fit: cover;
    background-position: 0px 0;
    animation: anim-sprite 1s steps(6) infinite;
    background: url("{{asset('street/hotspot/info-b.png')}}") no-repeat;
}

.sp-play {
    width: 155px;
    height: 155px;
    object-fit: cover;
    background-position: 0px 0;
    animation: anim-sprite 1s steps(6) infinite;
    background: url("{{asset('street/hotspot/play.png')}}") no-repeat;
}

.sp-play-b {
    width: 155px;
    height: 155px;
    object-fit: cover;
    background-position: 0px 0;
    animation: anim-sprite 1s steps(6) infinite;
    background: url("{{asset('street/hotspot/play-b.png')}}") no-repeat;
}

.sp-picture {
    width: 155px;
    height: 155px;
    object-fit: cover;
    background-position: 0px 0;
    animation: anim-sprite 1s steps(6) infinite;
    background: url("{{asset('street/hotspot/picture.png')}}") no-repeat;
}

.sp-picture-b {
    width: 155px;
    height: 155px;
    object-fit: cover;
    background-position: 0px 0;
    animation: anim-sprite 1s steps(6) infinite;
    background: url("{{asset('street/hotspot/picture-b.png')}}") no-repeat;
}

.sp-left {
    width: 155px;
    height: 155px;
    object-fit: cover;
    background-position: 0px 0;
    animation: anim-sprite 1s steps(6) infinite;
    background: url("{{asset('street/hotspot/left.png')}}") no-repeat;
}

.sp-left-b {
    width: 155px;
    height: 155px;
    object-fit: cover;
    background-position: 0px 0;
    animation: anim-sprite 1s steps(6) infinite;
    background: url("{{asset('street/hotspot/left-b.png')}}") no-repeat;
}

.sp-left-side {
    width: 155px;
    height: 155px;
    object-fit: cover;
    background-position: 0px 0;
    animation: anim-sprite 1s steps(6) infinite;
    background: url("{{asset('street/hotspot/left-side.png')}}") no-repeat;
}

.sp-left-side-b {
    width: 155px;
    height: 155px;
    object-fit: cover;
    background-position: 0px 0;
    animation: anim-sprite 1s steps(6) infinite;
    background: url("{{asset('street/hotspot/left-side-b.png')}}") no-repeat;
}

.sp-left-top {
    width: 155px;
    height: 155px;
    object-fit: cover;
    background-position: 0px 0;
    animation: anim-sprite 1s steps(6) infinite;
    background: url("{{asset('street/hotspot/left-top.png')}}") no-repeat;
}

.sp-left-top-b {
    width: 155px;
    height: 155px;
    object-fit: cover;
    background-position: 0px 0;
    animation: anim-sprite 1s steps(6) infinite;
    background: url("{{asset('street/hotspot/left-top-b.png')}}") no-repeat;
}

.sp-right {
    width: 155px;
    height: 155px;
    object-fit: cover;
    background-position: 0px 0;
    animation: anim-sprite 1s steps(6) infinite;
    background: url("{{asset('street/hotspot/right.png')}}") no-repeat;
}

.sp-right-b {
    width: 155px;
    height: 155px;
    object-fit: cover;
    background-position: 0px 0;
    animation: anim-sprite 1s steps(6) infinite;
    background: url("{{asset('street/hotspot/right-b.png')}}") no-repeat;
}

.sp-right-side {
    width: 155px;
    height: 155px;
    object-fit: cover;
    background-position: 0px 0;
    animation: anim-sprite 1s steps(6) infinite;
    background: url("{{asset('street/hotspot/right-side.png')}}") no-repeat;
}

.sp-right-side-b {
    width: 155px;
    height: 155px;
    object-fit: cover;
    background-position: 0px 0;
    animation: anim-sprite 1s steps(6) infinite;
    background: url("{{asset('street/hotspot/right-side-b.png')}}") no-repeat;
}

.sp-right-top {
    width: 155px;
    height: 155px;
    object-fit: cover;
    background-position: 0px 0;
    animation: anim-sprite 1s steps(6) infinite;
    background: url("{{asset('street/hotspot/right-top.png')}}") no-repeat;
}

.sp-right-top-b {
    width: 155px;
    height: 155px;
    object-fit: cover;
    background-position: 0px 0;
    animation: anim-sprite 1s steps(6) infinite;
    background: url("{{asset('street/hotspot/right-top-b.png')}}") no-repeat;
}

.sp-side {
    width: 155px;
    height: 155px;
    object-fit: cover;
    background-position: 0px 0;
    animation: anim-sprite 1s steps(6) infinite;
    background: url("{{asset('street/hotspot/side.png')}}") no-repeat;
}

.sp-side-b {
    width: 155px;
    height: 155px;
    object-fit: cover;
    background-position: 0px 0;
    animation: anim-sprite 1s steps(6) infinite;
    background: url("{{asset('street/hotspot/side-b.png')}}") no-repeat;
}

.sp-top {
    width: 155px;
    height: 155px;
    object-fit: cover;
    background-position: 0px 0;
    animation: anim-sprite 1s steps(6) infinite;
    background: url("{{asset('street/hotspot/top.png')}}") no-repeat;
}

.sp-top-b {
    width: 155px;
    height: 155px;
    object-fit: cover;
    background-position: 0px 0;
    animation: anim-sprite 1s steps(6) infinite;
    background: url("{{asset('street/hotspot/top-b.png')}}") no-repeat;
}

@keyframes anim-sprite {
    to {
        background-position: -930px 0;
    }
}


/* Animacion en grados */

.sprite-grados{
    width: 155px;
    height: 58px;
    object-fit: cover;
    background-position: 0px 0;
    animation: anim-sprite-grados 1s steps(6) infinite;
}

@keyframes anim-sprite-grados {
    to {
        background-position: -930px 0;
    }
}

.sp-g-left {
    width: 155px;
    height: 58px;
    object-fit: cover;
    background-position: 0px 0;
    animation: anim-sprite-grados 1s steps(6) infinite;
    background: url("{{asset('street/hotspot/g-left.png')}}") no-repeat;
}

.sp-g-left-b {
    width: 155px;
    height: 58px;
    object-fit: cover;
    background-position: 0px 0;
    animation: anim-sprite-grados 1s steps(6) infinite;
    background: url("{{asset('street/hotspot/g-left-b.png')}}") no-repeat;
}

.sp-g-left-top {
    width: 155px;
    height: 58px;
    object-fit: cover;
    background-position: 0px 0;
    animation: anim-sprite-grados 1s steps(6) infinite;
    background: url("{{asset('street/hotspot/g-left-top.png')}}") no-repeat;
}

.sp-g-left-top-b {
    width: 155px;
    height: 58px;
    object-fit: cover;
    background-position: 0px 0;
    animation: anim-sprite-grados 1s steps(6) infinite;
    background: url("{{asset('street/hotspot/g-left-top-b.png')}}") no-repeat;
}

.sp-g-right {
    width: 155px;
    height: 58px;
    object-fit: cover;
    background-position: 0px 0;
    animation: anim-sprite-grados 1s steps(6) infinite;
    background: url("{{asset('street/hotspot/g-right.png')}}") no-repeat;
}

.sp-g-right-b {
    width: 155px;
    height: 58px;
    object-fit: cover;
    background-position: 0px 0;
    animation: anim-sprite-grados 1s steps(6) infinite;
    background: url("{{asset('street/hotspot/g-right-b.png')}}") no-repeat;
}

.sp-g-right-top {
    width: 155px;
    height: 58px;
    object-fit: cover;
    background-position: 0px 0;
    animation: anim-sprite-grados 1s steps(6) infinite;
    background: url("{{asset('street/hotspot/g-right-top.png')}}") no-repeat;
}

.sp-g-right-top-b {
    width: 155px;
    height: 58px;
    object-fit: cover;
    background-position: 0px 0;
    animation: anim-sprite-grados 1s steps(6) infinite;
    background: url("{{asset('street/hotspot/g-right-top-b.png')}}") no-repeat;
}

.sp-g-top {
    width: 155px;
    height: 58px;
    object-fit: cover;
    background-position: 0px 0;
    animation: anim-sprite-grados 1s steps(6) infinite;
    background: url("{{asset('street/hotspot/g-top.png')}}") no-repeat;
}

.sp-g-top-b {
    width: 155px;
    height: 58px;
    object-fit: cover;
    background-position: 0px 0;
    animation: anim-sprite-grados 1s steps(6) infinite;
    background: url("{{asset('street/hotspot/g-top-b.png')}}") no-repeat;
}
/* Fin Animacion para los sprites */

/*Inicio estilo del hotspot previsualizado*/
.hotspot-preview {
    /*position: absolute;
    cursor: move;
    z-index: 10;*/
    background: url("{{asset('street/hotspot/info.png')}}") no-repeat;
    width: 155px;
    height: 155px;
    object-fit: cover;
    background-position: 0px 0;
    animation: anim-sprite-hotspot 1s steps(6) infinite;
}

@keyframes anim-sprite-hotspot {
to {
    background-position: -930px 0;
}
}

/*Fin estilo del hotspot previsualizado*/

/* Inico scrollbar */
::-webkit-scrollbar {
background-color: #1d1d1d;
width: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}

::-webkit-scrollbar-thumb {
background: #95e3ff;
border-radius: 3px;
}
/* Fin scrollbar */

#imagenPanorama2D {
width: 100%;
height: 50vh; /* Ajusta la altura inicial según sea necesario */
border: 1px solid #1dff26;
overflow: hidden;
position: relative;


/*Dos*/
/*width: 100%;
height: 100%;
border: 1px solid #1dff26;*/


/*Uno*/
/*position: relative;*/
/*margin-bottom: 20px;
object-fit: cover;*/
}

#imagenPanorama2D canvas {
/*width: 100%;
height: 100%;
object-fit: contain;*/
}

#streetview {
/*width: 100%;
height: 100%;*/
border: 1px solid #00FCE8;
}

#panoramaContainer {
width: 100%;
height: 73vh;
margin: 0 auto;
}

.main-chart-wrapper .chat-info {
    min-width: 14.875rem;
    max-width: 14.875rem;
}

.main-chart-wrapper .chat-user-details {
    min-width: 14.875rem;
    max-width: 14.875rem;
}

.main-chart-wrapper .main-chat-area .chat-content {
    padding: 1.5rem;
}

#panorama {
    width: 100%;
    height: 100vh;
}

.imagenHotspot input{
    display: none;
}

/* Estilos para el popup */
/* Estilos para el popup */
.popup-container {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.popup-content {
    background-color: #fff;
    max-width: 80%;
    max-height: 80%;
    overflow: hidden;
    text-align: center;
    transition: transform 0.3s ease-out;
}
#popupImage {
    max-width: 100%;
    max-height: 100%;
    transition: transform 0.3s ease-out;
}

/* Estilo de los botones */

#controls {
    position: absolute;
    bottom: 0;
    left: 3rem;
    z-index: 2;
    text-align: left;
    width: 100%;
}

.ctrl {
    padding: 8px 5px;
    width: 30px;
    text-align: center;
    background: rgba(200, 200, 200, 0.8);
    display: inline-block;
    cursor: pointer;
}
.ctrl:hover {
    background: rgba(200, 200, 200, 1);
}

.pnlm-container * {
    box-sizing: border-box;
}

.btn-tour i {
    margin: -0.9rem -1.5rem;
    font-size: xx-large;
}


.pnlm-load-box {
    opacity: 0;
}
.pnlm-lbox {

}
.pnlm-loading {

}
.pnlm-lbar {

}
.pnlm-lbar-fill {

}
.pnlm-lmsg {

}



/* Estilo animacion de hotspot */

.hotspotDinamic {
    position: absolute;
    z-index: 2002;
    overflow: visible;
    opacity: 1;
    cursor: pointer;
    pointer-events: auto;
    background-image: url("{{ asset('assets/images/icon/icon_shop.png') }}");
    width: 124px;
    height: 200px;
    background-position: 0px 0px;
    background-size: 124px 200px;
    transform-origin: 50% 50%;
    transform: translateZ(0px) translate(615.293px, 562.181px) translate(-62px, -100px) rotate(0deg) translate(0px, 0px) scale(0.25, 0.25) translate(0px, -100px);
}


/*
* Vista 3D
*/


#css2dRender {
    position: absolute;
    top: 0px;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    z-index: 1; /* TODO Solve this in HTML */
}


/* *************************************** */
/* Points */
.point
{
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
    pointer-events: all;

}

.point .label
{
    position: absolute;
    top: -20px;
    left: -20px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffffc7;
    border: 1px solid #000000;
    color: #ffffff;
    font-family: 'Archivo';
    text-align: center;
    line-height: 40px;
    font-weight: 100;
    font-size: 14px;
    cursor: zoom-in;
    transform: scale(0, 0);
    transition: transform 0.3s;
    z-index: 4;
}

.point.visible .label
{
    transform: scale(1, 1);
}

.point .text
{
    position: absolute;
    /* top: -2vh; */
    /* left: 20px; */
    width: 95px;
    padding: 10px;
    border-radius: 4px;
    background: #000000bf;
    border: 1px solid #ffffff;
    color: #ffffff;
    line-height: 1.3em;
    font-family: 'Archivo';
    font-weight: 100;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 4;
    text-align: center;
}

.point:hover .text
{
    opacity: 1;
}

#div-points{
    top: 0px;
    left: 0px;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 5;
    width: 100%;
    height: 100%;
    pointer-events: none;
    visibility: hidden;
}

#interior-view:before,
#interior-view:after {
    content: '';
    position: absolute;
    left: -20px;
    top: -20px;
    right: -20px;
    bottom: -20px;
    border: 2px solid #cdcdcd38;
    border-radius: 50%;
    animation: animate 3s linear infinite;
}

#interior-view:after {
    animation-delay: 1s;
}

@keyframes animate {
    0% {
        transform: scale(2.0);
    }

    100% {
        transform: scale(0.7);
    }
}
#point {
    width: 16px;
    height: 16px;
    border-radius: 100%;
    border: 3px solid #fff;
    position: fixed;
    left: 10px;
    top: 10px;
    box-shadow: #fff 0px 0px 8px;
    user-select: none;
}


.build_tag {
    pointer-events: all;
}


/* Estilo para el hotspot específico con imagen de fondo */
.build_tag {
    width: 50px; /* Ajusta el ancho según tu diseño */
    height: 50px; /* Ajusta la altura según tu diseño */
    /*background-color: rgb(0, 145, 255); /* Color de fondo de respaldo */
    border-radius: 50%; /* Para hacerlo redondo, si es necesario */
    text-align: center;
    line-height: 50px; /* Alineación vertical del texto */
    color: #fff; /* Color del texto */
    font-weight: bold;
    font-size: 0;
    cursor: pointer;
}

/* Estilo para el primer hotspot con una imagen de fondo */
.build_tag {
    background-image: url('./ubis.png'); /* Ruta de la imagen */
    background-size: cover; /* Ajusta el tamaño de la imagen */
    background-position: center; /* Posición de la imagen de fondo */
}

.toltipHotpot {
    pointer-events: all;
    width: 90px; /* Ajusta el ancho según tu diseño */
    height: 90px; /* Ajusta la altura según tu diseño */
    /*background-color: rgb(0, 145, 255); /* Color de fondo de respaldo */
    border-radius: 50%; /* Para hacerlo redondo, si es necesario */
    text-align: center;
    line-height: 50px; /* Alineación vertical del texto */
    color: #fff; /* Color del texto */
    font-weight: bold;
    font-size: 0;
    cursor: pointer;
}

.toltipImg{
    width: 50px; /* Ajusta el ancho según tu diseño */
    height: 50px; /* Ajusta la altura según tu diseño */
    background-size: cover; /* Ajusta el tamaño de la imagen */
    background-position: center; /* Posición de la imagen de fondo */
    transition: transform 0.3s ease;
}

.toltipImg:hover {
    transform: scale(1.5);
}

.containerTag {
    pointer-events: all;
    position: relative;
    width: fit-content;
}

.imageContainerTag {
    position: relative;
    display: inline-block;
    /* overflow: hidden; */
}

.toltipImgTag {

    width: 50px; /* Ajusta el ancho según tu diseño */
    height: 50px; /* Ajusta la altura según tu diseño */
    transition: transform 0.5s ease;
}

.toltipImgTagLogo {

    width: 150px; /* Ajusta el ancho según tu diseño */
    height: 150px; /* Ajusta la altura según tu diseño */
    transition: transform 0.5s ease;
}

.infoTag {
    position: absolute;
    top: -125%;
    left: -50%;

    text-overflow: ellipsis;
    white-space: nowrap;
    display: none;
    background: rgba(255, 255, 255, 0.9);
    color: black;
    padding: 10px;
    border-radius: 5px;
    transition: opacity 0.5s ease;
}

.imageContainerTag:hover img {
    transform: scale(1.5);
}

.imageContainerTag:hover .infoTag {
    display: block;
    opacity: 1;
}