#ar-button_118427_pop{top:40px !important;}/* Custom loading bar style for model-viewer */ 
                model-viewer::part(default-progress-bar) { background-color: #ff9e1b; } 
                model-viewer::part(default-progress-bar)::-webkit-progress-bar { background-color: #f0f0f0; } 
                model-viewer::part(default-progress-bar)::-webkit-progress-value { background-color: #ff9e1b; } /*Model Viewer Size*/ /* Extra small devices (phones, 600px and down) */ @media only screen and (max-width: 600px) { .ardisplay_viewer{ min-height:300px; height:300px; width: 100%; } } /* Small devices (portrait tablets and large phones, 600px and up) */ @media only screen and (min-width: 600px) { .ardisplay_viewer{ min-height:400px; height:400px; width: 100%; } } /* Medium devices (landscape tablets, 768px and up) */ @media only screen and (min-width: 768px) { .ardisplay_viewer{ min-height:500px; height:500px; width: 100%; } } /* Large devices (laptops/desktops, 992px and up) */ @media only screen and (min-width: 992px) { .ardisplay_viewer{ min-height:600px; height:600px; width: 100%; } } /*Dimensions*/ .dot{ width: 10px; height: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); background: #fff; } .dimension{ background: #fff; border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); color: rgba(0, 0, 0, 0.8); font-family: Futura, Helvetica Neue, sans-serif; font-size: 12px; font-weight: 600; max-width: 128px; padding: 0.25em 0.5em; } /*Hot Spots*/ .hotspot{ font-size: 12px; } /*Call to Action Button */ .ar_cta_button{ font-size: 12px; } .ar-reset { position: absolute; top: 6px; left: 6px; width: 40px; height: 40px; background-size: contain; background-repeat: no-repeat; background-position: center; background: none; /*margin-right: 4px;*/ border-radius: 4px; border: none; cursor: pointer; } /* Target the AR view links and make them look like buttons */ a[href*="ar-display"], a[href*="view-in-ar"], .ar-view-link, [class*="ar-view"] a { display: inline-block !important; background-color: #FF9E1B !important; color: white !important; padding: 12px 20px !important; margin-right: 10px !important; margin-bottom: 5px !important; border: none !important; border-radius: 6px !important; text-decoration: none !important; font-weight: bold !important; font-size: 14px !important; text-align: center !important; transition: background-color 0.3s ease !important; } /* Hover effect */ a[href*="ar-display"]:hover, a[href*="view-in-ar"]:hover, .ar-view-link:hover, [class*="ar-view"] a:hover { background-color: #e8890f !important; color: white !important; text-decoration: none !important; } /* Ensure both buttons appear side by side */ .ar-view-container, [class*="ar-view"] { display: flex !important; gap: 10px !important; flex-wrap: wrap !important; }