/* Custom loading bar style for model-viewer */ model-viewer::part(default-progress-bar) { background-color: #666666; /* custom color */} /* Customize the percentage progress bar */ model-viewer::part(default-progress-bar)::-webkit-progress-bar { background-color: #f0f0f0; /* Light gray background */ } model-viewer::part(default-progress-bar)::-webkit-progress-value { background-color: #666666; /* Custom color for progress */ } /*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; }