#blankwall-container {
    display: inline-block;
}

#ar-button {
    border-style: solid;
}

#ar-button:hover {
    cursor: pointer;
}

.ar-button-hover-none:hover {
  box-shadow: none;
}

.ar-button-hover-shadow:hover {
  box-shadow: 0px 1px 4px gainsboro;
}

#ar-button-icon {
    content: '';
    background: url(./ar256.png);
    display:inline-block;
    background-repeat: no-repeat;
    margin-bottom: -4px;
    margin-right: 4px;
    opacity: 0.9;
}

#ar-button-text {
    opacity: 0.9;
}

#ar-button-tooltip {
    background-color: gray;
    color: white;
    text-align: center;
    max-height: 0;
    transition: max-height 0.2s ease-out;
}

.ds-modal-background {
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 600px) {
    #ar-modal-desktop-content {
      display: none;
    }
}

@media screen and (min-width: 600px) {
    #ar-modal-mobile-content {
      display: none;
    }
}

#ar-modal-qrcode {
    margin: auto;
    max-width: 256px;
}

/* Close the modal when clicked on the close button */
#qr-modal-close-icon {
    background-color: #efefef;
    color: #222;
    border-radius: 60px;
    float: right;
    margin-top: -10px;
    margin-right: -10px;
    font-size: 12px;
    padding: 8px 12px;
    border-style: none;
}

#ar-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 101; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0); /* Black w/ opacity */
}

#ar-modal-content-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    color: #222;
    width: 90%;
    max-width: 480px;
    border-radius: 10px;
    box-shadow: 0px 0px 100px 0px #000;
    font-size: 1em;
    text-align: center;
    overflow: hidden;
    transition: height 0.4s ease;
}

.ar-modal-content {
  padding: 24px;
}

.remove-animation {
  transition: none !important;
}

.ar-modal-disclaimer,
.ar-modal-watermark {
    font-size: 0.8em;
    color: #999;
    margin: 0px;
    padding: 10px 0px;
}

.ar-modal-subheading {
    font-size: 0.8em;
    font-weight: bold;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
    color: #333;
}

.ar-modal-heading {
  margin: 0px;
  padding: 15px 0px;
  letter-spacing: 0.3em;
}

.ar-modal-text {
  padding: 1rem;
}

#ar-qr-modal-content {
  display: none;
}

#ar-framing-modal-content {
  /*display: none;*/
}

#ar-loading-modal-content {
  display: none;
}

#ar-feedback-modal-content {
  display: none;
}

.ar-feedback-button-icon {
  display: inline-block;
  background-size: 40%;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #fff;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 50%;
}

.ar-feedback-thumbs-up-icon {
  background-image: url('./like.png');
}

.ar-feedback-thumbs-down-icon {
  background-image: url('./dislike.png');
}

.ar-feedback-button {
  width: 64px;
  height: 64px;
  background-color: #fff;
  border-width: 1px;
  border-radius: 50%;
  padding: 0px;
}

#ar-launch-modal-content {
  animation: modal-fade-in-animation 0.5s ease-in-out forwards;
  display: none;
}

#ar-launch-custom-image {
    width: 100%;
    height: auto;
}

#ar-launch-tooltip-foreground {
  background-image: url('./iPhoneMock-shadow.png');
  height: 100%;
  width: 100%;
  background-size: 100%;
  background-position: center 0px;
  background-repeat: no-repeat;
}

#ar-launch-tooltip-container {
  background-image: url('./tooltip-bg-square.jpg');
  background-position: center -190px;
  background-size: 240%;
  background-repeat: no-repeat;
  overflow: hidden;
  height: 80vw;
  max-height: 360px;
  width: 100%;
  animation: ar-launch-tooltip-zoom 6s ease-out;
  animation-fill-mode: forwards;
}

#ar-launch-tooltip-desk {
  background-image: url('./tooltip-desk-bg.jpg');
  background-position: center;
  background-size: 120%;
  background-repeat: no-repeat;
  overflow: hidden;
  height: 80vw;
  max-height: 200px;
  width: 100%;
}

@keyframes ar-launch-tooltip-zoom {
  0% {
    background-position: center -190px;
    background-size: 240%;
  } 30% {
    background-position: center -190px;
    background-size: 240%;
  } 60% {
    background-position: center 0px;
    background-size: 100%;
  } 100% {
    background-position: center 0px;
    background-size: 100%;
  }
}

#ar-loading-modal-icon {
    height:200px;
}

figure.ds-loading-figure {margin:0;transform:translate(-50%,-50%) rotate(0deg) scale(1.4,1.4);position:absolute;left:50%;top:36%;border-radius:150px;box-sizing:border-box;animation:rotation 20s infinite linear;}
figure.ds-loading-figure  div:empty{display:block !important;}
figure.ds-loading-figure  div:after{content:"";width:20px;height:20px;border:1px solid #222;box-sizing:border-box;position:absolute;left:20px;top:20px;animation:shuffle 2s infinite;}

figure.ds-loading-figure  div:nth-child(1){transform:rotate(0deg)}
figure.ds-loading-figure  div:nth-child(1):after{animation-delay:-0.5s;}
figure.ds-loading-figure  div:nth-child(2){transform:rotate(45deg)}
figure.ds-loading-figure  div:nth-child(2):after{animation-delay:-1s;}
figure.ds-loading-figure  div:nth-child(3){transform:rotate(90deg)}
figure.ds-loading-figure  div:nth-child(3):after{animation-delay:-1.5s;}
figure.ds-loading-figure  div:nth-child(4){transform:rotate(135deg)}
figure.ds-loading-figure  div:nth-child(4):after{animation-delay:-2s;}
figure.ds-loading-figure  div:nth-child(5){transform:rotate(180deg)}
figure.ds-loading-figure  div:nth-child(5):after{animation-delay:-2.5s;}
figure.ds-loading-figure  div:nth-child(6){transform:rotate(225deg)}
figure.ds-loading-figure  div:nth-child(6):after{animation-delay:-3s;}
figure.ds-loading-figure  div:nth-child(7){transform:rotate(270deg)}
figure.ds-loading-figure  div:nth-child(7):after{animation-delay:-3.5s;}
figure.ds-loading-figure  div:nth-child(8){transform:rotate(315deg)}
figure.ds-loading-figure  div:nth-child(8):after{animation-delay:-4;}
@keyframes rotation{
  100%{transform:translate(-50%,-50%) rotate(-360deg) scale(1.4,1.4);}
}
@keyframes shuffle{
  50%{transform:scale(0.4,0.4) rotate(-90deg);border-radius:50%;}
}

@keyframes modal-fade-in-animation {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

#ar-framing-preview-container {
  background-color: #eee;
  padding-top: 34px;
  border-radius: 10px;
}

#ar-framing-preview {
    height: 80px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top left;
    border: none;
    overflow: hidden;
    color: rgba(0, 0, 0, 0);
    display: inline-block;
    vertical-align: bottom;
}

.frameButton {
  padding: 10px;
  border-radius: 10px;
}

#ar-frame-matting-select input:checked + label, 
#simpleFrameOptions input:checked + label {
  border-bottom: 2px solid #3f6eac;
  border-top: 2px solid #3f6eac;
  box-shadow: 0px 0px 0px 0px #000000;
}

#ar-frame-matting-select label,
#simpleFrameOptions label {
  -webkit-box-shadow: 0px 1px 6px -4px #000000; 
  box-shadow: 0px 1px 6px -4px #000000;
  margin: 0px 6px;
  border-radius: 10px;
  background-color: white;
  padding: 6px 22px;
}

#ar-frame-color-select input[type="radio"][name="ar-frame-color"],
#ar-frame-matting-select input[type="radio"][name="ar-frame-matting"],
#simpleFrameOptions input[type="radio"][name="ar-simple-frame"],
#customFrameOptions input[type="radio"][name="ar-frame-color"] {
    display: none !important;
}

#ar-frame-color-select input:checked + label,
#customFrameOptions input:checked + label {
    -webkit-box-shadow:
        0px 0px 0px 2px #fff,
        0px 0px 0px 4px #3f6eac;
    box-shadow:
        0px 0px 0px 2px #fff,
        0px 0px 0px 4px #3f6eac;
}

#ar-frame-color-select label,
#customFrameOptions label {
    width: 32px;
    height: 32px;
    display: inline-block;
    border-radius: 50%;
    margin: 0px 6px;
    -webkit-box-shadow: 0px 2px 10px -4px #000000;
    box-shadow: 0px 2px 10px -4px #000000;
}

.ar-modal-button {
  border-radius: 10px;
  padding: 10px 20px;
  background-color: black;
  color: white !important;
  border-width: 1px;
  border-color: gray;
  font-size: 1em;
  letter-spacing: 1px;
  box-shadow: 0px 8px 16px 0px gainsboro;
}

#ar-hook {
  display: inline-block;
  text-decoration: none !important;
}

#no-frame-label {
    background: linear-gradient(135deg, rgba(240,240,240,1) 45%, rgba(255,0,0,1) 46%, rgba(255,0,0,1) 54%, rgba(240,240,240,1) 55%);
}

#no-frame-label::after {
    content: 'None';
    position: fixed;
    margin-top: -22px;
    margin-left: -14px;
    font-size: 0.7em;
    color: #222;
}

#no-frame-span::after {
  content: 'Frame- less';
  position: fixed;
  margin-top: 10px;
  margin-left: -15px;
  font-size: 9px;
  font-weight: normal;
  letter-spacing: 1px;
  line-height: 10px;
  color: gray;
  text-align: left;
}