.qr-container {
    position: relative;
    /* width: 50%; */
}

/* Make the image to responsive */
.qr-image {
    /* width: 100%;
    height: auto; */
    height: 227px;
    width: 227px;
    display: none;
    border-radius: 9px;
}

/* The overlay effect (full height and width) - lays on top of the container and over the image */
.qr-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color:rgba(0, 0, 0, 0.6);
    overflow: hidden;
    width: 100%;
    height: 100%;
    visibility: hidden;
    border-radius: 9px;
}

/* .qr-container:hover .qr-overlay {
    visibility: visible;
} */

.qr-refresh {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    cursor: pointer;
}

.qr-refresh span {
    color: white;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
}

.qr-refresh .refresh-icon {
    background-image: url("data:image/svg+xml,%3Csvg width='81' height='81' viewBox='0 0 81 81' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M70.0169 40.0376C70.0169 21.6108 55.0791 6.67294 36.6523 6.67294C18.2255 6.67294 3.2876 21.6108 3.2876 40.0376C3.2876 58.4644 18.2255 73.4023 36.6523 73.4023C49.7524 73.4023 61.0892 65.8524 66.5488 54.8663' stroke='white' stroke-width='5.0047' stroke-linecap='round'/%3E%3Cpath d='M70.0169 40.0376L61.5317 33.7668' stroke='white' stroke-width='5.0047' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M70.0172 40.0376L76.2969 31.5591' stroke='white' stroke-width='5.0047' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 80px 80px;
    width: 80px;
    height: 80px;
}

.qr-shimmer {
    height: 227px;
    width: 227px;
    border-radius: 9px;
}

.shine {
    animation-duration: 2.2s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: shimmer;
    animation-timing-function: linear;
    background: #f6f7f8;
    background: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
    background-size: 1200px 100%;
}

@-webkit-keyframes shimmer {
    0% {
        background-position: -100% 0;
    }
    100% {
        background-position: 100% 0;
    }
}

@keyframes shimmer {
    0% {
        background-position: -1200px 0;
    }
    100% {
        background-position: 1200px 0;
    }
}