/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

 li.threed-thumbnail model-viewer {
    width: 100%;

 }
 li.threed-thumbnail {
    height: 100%;
 }
 #three-content {
    width: 336px;
    height: 336px;
 }

 /* Google Model Viewer AR Button CSS Styling */
 .ar-button-style {
   /* local url image http://threedproductviewer.local/wp-content/uploads/2022/09/ic_view_in_ar_new_googblue_48dp.png */
   background-image: url(https://staging.dovetailsfurniture.com/wp-content/uploads/2022/09/ic_view_in_ar_new_googblue_48dp-1.png);
   background-repeat: no-repeat;
   background-size: 20px 20px;
   background-position: 12px 50%;
   background-color: #fff;
   position: absolute;
   transform: translateX(-50%);
   white-space: nowrap;
   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;
   bottom: 0;
   right: 0;
   margin: 3px;  
}

 /* Google Model Viewer AR Button CSS Styling */
 .mobile-ar-button-style {
   /* local url image http://threedproductviewer.local/wp-content/uploads/2022/09/ic_view_in_ar_new_googblue_48dp.png */
   background-image: url(https://staging.dovetailsfurniture.com/wp-content/uploads/2022/09/ic_view_in_ar_new_googblue_48dp-1.png);
   background-repeat: no-repeat;
   background-size: 20px 20px;
   background-position: 50px 50%;
   background-color: #fff;
   position: absolute;

   white-space: nowrap;
   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;
   bottom: 0;

   width: 80%;
   display:block;
}

/* .mobile-ar-button-style:hover {
   background-color:  #fff;
} */

.modal {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   opacity: 0;
   visibility: hidden;
   transform: scale(1.1);
   transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;

}

.modal-content {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: white;
   padding: 1rem 1.5rem;
   height: 24rem;
   width: 24rem;
   border-radius: 0.5rem;
}

.close-button {
   float: right;
   width: 1.5rem;
   line-height: 1.5rem;
   text-align: center;
   cursor: pointer;
   border-radius: 0.25rem;
   background-color: lightgray;
}

.close-button:hover {
   background-color: darkgray;
}

.show-modal {
   opacity: 1;
   visibility: visible;
   transform: scale(1.0);
   transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

.qr-image {
   width: 65%;
   margin: auto;
   display: block;
}

/* Removes magnifying glass from all pages */
/* https://stackoverflow.com/questions/62759268/how-remove-emoji-magnifying-glass-in-woocommerce */
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
   display: none !important;
   }