.explorexr-model-viewer-container {
position: relative;
width: 100%;
min-height: 400px;
margin-bottom: 20px;
}
.explorexr-model-viewer-container .explorexr-model{
background-color: rgba(0, 0, 0, 0) !important;
} .model-loading-indicator {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: rgba(255, 255, 255, 0.8);
z-index: 100;
transition: opacity 0.5s ease;
}
.script-loading-progress {
width: 80%;
height: 8px;
background-color: #e0e0e0;
border-radius: 4px;
overflow: hidden;
margin: 10px 0;
}
.script-loading-progress-bar {
height: 100%;
width: 0%;
background-color: #1e88e5;
border-radius: 4px;
transition: width 0.3s ease;
}
.script-loading-percentage {
font-size: 24px;
font-family: Arial, sans-serif;
color: #333333;
font-weight: bold;
margin-top: 10px;
transition: opacity 0.3s ease;
} .explorexr-loading-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.9);
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
pointer-events: none;
transition: opacity 0.5s ease;
} .loading-status-text {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 16px;
font-weight: 500;
color: #333;
text-align: center;
margin-bottom: 15px;
z-index: 20;
} .explorexr-loading-bar-container {
position: relative;
width: 80%;
height: 8px; background-color: #e0e0e0;
border-radius: 4px;
overflow: hidden;
margin: 10px 0;
}
.explorexr-loading-bar-container.explorexr-bar-position-top {
margin-top: -20%;
}
.explorexr-loading-bar-container.explorexr-bar-position-bottom {
margin-top: 20%;
}
.explorexr-loading-bar {
height: 100%;
width: 0%;
background-color: #1e88e5; border-radius: 4px;
transition: width 0.3s ease;
} .explorexr-percentage-counter {
position: relative;
font-size: 24px; font-family: Arial, sans-serif; color: #333333; font-weight: bold;
margin: 10px 0;
} .explorexr-model-poster-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.explorexr-model-poster-button {
background-color: rgba(0, 0, 0, 0.7);
color: white;
border: none;
border-radius: 50%;
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: background-color 0.3s ease;
}
.explorexr-model-poster-button:hover {
background-color: rgba(0, 0, 0, 0.85);
}
.explorexr-model-poster-button-icon {
font-size: 24px;
}
.explorexr-model-poster {
position: relative;
width: 100%;
height: 100%;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
opacity: 1;
transition: opacity 0.5s ease, visibility 0.5s ease;
z-index: 10;
}
.explorexr-model-poster.poster-hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.explorexr-loading-container.loading-hidden {
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
} model-viewer.explorexr-model,
model-viewer { width: 100%;
height: 100%;
min-height: inherit; display: block; position: relative; --progress-bar-height: 10px;
--progress-bar-color: #1e88e5;
--poster-color: #ffffff; transition: opacity 0.8s ease; overflow: hidden;
}
model-viewer.explorexr-model[data-loaded="true"] {
opacity: 1 !important;
} model-viewer::part(default-progress-bar) {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
} .explorexr-load-model-btn,
.ExploreXR-load-model-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 12px 24px;
background-color: var(--exr-loadbtn-bg, #0073aa);
color: var(--exr-loadbtn-color, #ffffff);
border: none;
border-radius: var(--exr-loadbtn-radius, 4px);
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
z-index: 10; min-width: 150px;
min-height: 44px; -webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.explorexr-load-model-btn:hover,
.ExploreXR-load-model-btn:hover {
background-color: var(--exr-loadbtn-hover-bg, #005177);
color: var(--exr-loadbtn-hover-color, #ffffff);
} .explorexr-load-model-btn:active,
.ExploreXR-load-model-btn:active {
background-color: var(--exr-loadbtn-active-bg, #003f5e);
color: var(--exr-loadbtn-hover-color, #ffffff);
transform: translate(-50%, -50%) scale(0.98);
} @keyframes pulse {
0% { opacity: 0.6; }
50% { opacity: 1; }
100% { opacity: 0.6; }
}
.explorexr-loading-bar.loading,
.explorexr-percentage-counter.loading {
animation: pulse 1.5s infinite;
} model-viewer[ar-status="session-started"] {
visibility: visible !important;
opacity: 1 !important;
}  .ExploreXR-model-container {
position: relative;
width: 100%;
min-height: 300px;
display: block;
}  .ExploreXR-model-viewer-container,
.explorexr-premium-model-container {
width: 100%;
height: 100%;
display: block;
position: relative;
}
.explorexr-model-card .explorexr-model-preview .ExploreXR-model-viewer-container {
min-height: 400px;
} .explorexr-model-error {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
min-height: 300px;
background-color: #f5f5f5;
padding: 20px;
text-align: center;
}
.explorexr-model-error-icon {
font-size: 48px;
margin-bottom: 10px;
}
.explorexr-model-error-message {
color: #d32f2f;
font-size: 16px;
max-width: 80%;
}
.explorexr-error {
text-align: center;
color: #721c24;
background-color: #f8d7da;
border: 1px solid #f5c6cb;
border-radius: 4px;
padding: 15px;
margin: 10px;
}
.explorexr-retry-btn {
background-color: #0073aa;
color: white;
border: none;
border-radius: 4px;
padding: 10px 15px;
margin-top: 10px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s ease;
}
.explorexr-retry-btn:hover {
background-color: #005177;
} .explorexr-hotspot {
display: block;
width: 20px;
height: 20px;
border-radius: 10px;
border: none;
background-color: #ff0000;
box-sizing: border-box;
pointer-events: all;
--min-hotspot-opacity: 0.4;
transition: transform 0.2s;
}
.explorexr-hotspot:hover {
transform: scale(1.2);
} .explorexr-annotation {
position: absolute;
top: 0;
left: 25px;
width: 300px;
max-width: calc(100vw - 50px);
border-radius: 6px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
transform: translateY(-50%);
pointer-events: none;
opacity: 0;
transition: all 0.3s;
z-index: 999;
background-color: #000000;
color: #ffffff;
padding: 10px;
max-height: 400px;
overflow-y: auto;
}
.explorexr-annotation h1,
.explorexr-annotation h2, 
.explorexr-annotation h3, 
.explorexr-annotation h4, 
.explorexr-annotation h5, 
.explorexr-annotation h6 {
margin: 0 0 10px;
}
.explorexr-hotspot:hover .explorexr-annotation {
opacity: 1;
} .ExploreXR-model-poster {
width: 100%;
height: 100%;
position: relative;
display: block;
}
.ExploreXR-model-viewer-wrapper {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: block;
} @media (max-width: 768px) {
.explorexr-load-model-btn,
.ExploreXR-load-model-btn { padding: 14px 28px;
font-size: 18px;
min-width: 180px;
min-height: 50px;
} .explorexr-loading-container {
background-color: rgba(255, 255, 255, 0.85); }
.loading-status-text {
font-size: 18px;
margin-bottom: 20px;
}
.explorexr-loading-bar-container {
width: 85%;
height: 10px;
}
.explorexr-percentage-counter {
font-size: 28px;
margin-top: 15px;
} .explorexr-annotation {
max-width: 80vw;
width: 250px;
}
} @media (max-width: 480px) {
.explorexr-loading-bar-container {
width: 90%;
}
}  .ExploreXR-model-container > *:not(model-viewer):not(.explorexr-overlay-group) {
pointer-events: none !important;
} .ExploreXR-model-container button,
.ExploreXR-model-container .explorexr-premium-hotspot,
.ExploreXR-model-container .explorexr-premium-annotation-content.active,
.ExploreXR-model-container .ExploreXR-load-model-btn,
.ExploreXR-model-container .explorexr-overlay-group > * {
pointer-events: auto !important;
} .explorexr-overlay-group {
position: absolute;
z-index: 1000;
display: flex;
flex-wrap: wrap;
gap: 8px;
pointer-events: none;
max-width: 50%;
}
.explorexr-overlay-group:empty {
display: none;
}
.explorexr-overlay-group > * {
pointer-events: auto;
position: relative !important;
top: auto !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
transform: none !important;
} .explorexr-overlay-top-left {
top: 12px;
left: 12px;
align-items: flex-start;
flex-direction: row;
}
.explorexr-overlay-top-right {
top: 12px;
right: 12px;
align-items: flex-start;
flex-direction: row-reverse;
justify-content: flex-start;
}
.explorexr-overlay-bottom-left {
bottom: 12px;
left: 12px;
align-items: flex-end;
flex-direction: row;
}
.explorexr-overlay-bottom-right {
bottom: 12px;
right: 12px;
align-items: flex-end;
flex-direction: row-reverse;
justify-content: flex-start;
}
.explorexr-overlay-bottom-center {
bottom: 12px;
left: 50%;
transform: translateX(-50%);
align-items: flex-end;
flex-direction: row;
justify-content: center;
} .explorexr-overlay-top-center {
top: 12px;
left: 50%;
transform: translateX(-50%);
align-items: flex-start;
flex-direction: row;
justify-content: center;
}
.explorexr-overlay-middle-left {
top: 50%;
left: 12px;
transform: translateY(-50%);
align-items: flex-start;
flex-direction: column;
}
.explorexr-overlay-middle-right {
top: 50%;
right: 12px;
transform: translateY(-50%);
align-items: flex-end;
flex-direction: column;
}
@media (max-width: 480px) {
.explorexr-overlay-group {
gap: 4px;
max-width: 70%;
}
} model-viewer.explorexr-model,
model-viewer.ExploreXR-model {
pointer-events: auto !important;
position: relative;
z-index: 1;
touch-action: pan-y; } .explorexr-model-poster.poster-hidden {
pointer-events: none !important;
}  .explorexr-hidden {
display: none !important;
} model-viewer {
--poster-color: transparent;
} .explorexr-ar-session-active model-viewer {
visibility: visible !important;
opacity: 1 !important;
display: block !important;
} @supports (-webkit-touch-callout: none) {
model-viewer::part(default-ar-button) {
transform: scale(1.5);
}
.explorexr-ar-session-active {
height: 100vh !important;
overflow: hidden !important;
}
}  .explorexr-hidden {
} model-viewer {
--poster-color: transparent;
} .explorexr-ar-session-active model-viewer {
} @supports (-webkit-touch-callout: none) {
model-viewer::part(default-ar-button) {
transform: scale(1.5);
}
.explorexr-ar-session-active {
}
}  .explorexr-hidden {
display: none !important;
}  .ExploreXR-load-model-btn {
position: relative;
z-index: 10;
} .ExploreXR-model-poster img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
} model-viewer {
--poster-color: transparent;
} .explorexr-ar-session-active model-viewer {
visibility: visible !important;
opacity: 1 !important;
display: block !important;
} @supports (-webkit-touch-callout: none) {
model-viewer::part(default-ar-button) {
transform: scale(1.5);
}
.explorexr-ar-session-active {
height: 100vh !important;
overflow: hidden !important;
}
}