/**
* 2010-2021 Webkul.
*
* NOTICE OF LICENSE
*
* All right is reserved,
* Please go through LICENSE.txt file inside our module
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade this module to newer
* versions in the future. If you wish to customize this module for your
* needs please refer to CustomizationPolicy.txt file inside our module for more information.
*
* @author Webkul IN
* @copyright 2010-2021 Webkul IN
* @license LICENSE.txt
*/

body#product model-viewer {
    width: 100%;
    height: 400px;
}

model-viewer {
    height: 365px;
}

.ar-button {
     background-repeat: no-repeat;
     background-size: 20px 20px;
     background-position: 12px 50%;
     background-color: #fff;
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     white-space: nowrap;
     bottom: 16px;
     padding: 0px 16px 0px 40px;
     font-family: Roboto Regular, Helvetica Neue, sans-serif;
     font-size: 14px;
     color: #4285f4;
     height: 36px;
     line-height: 36px;
     border-radius: 18px;
     border: 1px solid #DADCE0;
 }

 .ar-button:active {
    background-color: #E8EAED;
}

.ar-button:focus {
    outline: none;
}

.ar-button:focus-visible {
    outline: 1px solid #4285f4;
}

model-viewer>#ar-prompt {
    position: absolute;
    left: 50%;
    bottom: 75px;
    animation: elongate 2s infinite ease-in-out alternate;
    display: none;
}

model-viewer[ar-status="session-started"]>#ar-prompt {
    display: block;
}

model-viewer>#ar-prompt>img {
    animation: circle 4s linear infinite;
}

.quickview .modal-content {
    width: 100%;
}

#webar_error {
    background-color: #ffffffdd;
    border-radius: 16px;
    padding: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    transition: opacity 0.3s;
}
#webar_error.hide {
    opacity: 0;
    visibility: hidden;
    transition: visibility 2s, opacity 1s 1s;
}