@media (max-width: 600px) {  
  #qrcode-btn{
    display:none;
  }
}

#qrcode-btn{
    margin-left:6px;
	width:24px;
	height:24px;
	cursor:pointer;
	user-select: none;	
	filter: grayscale(100%);
}
#qrcode-btn:hover{
    filter: none;
	opacity:1;
}

#overlay {  
    position: fixed;  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 100%;  
    background-color: rgba(0, 0, 0, 0.5);  
    display: none;  
    justify-content: center;  
    align-items: center;  
	z-index:9999;
}  
#qrcode-container {  
    position:relative;
	background-color:#fff;
	padding:25px;
	box-sizing:border-box;
	top:50%;
	left:50%;
	margin:-120px 0 0 -120px;
    width: 240px;  
    height: 240px;  
}  
#close-div {  
    position: absolute; 
    top: 0px;  
    right: 0px; 
	margin-right:-12px;
	margin-top:-12px;
	width:36px;
	height:36px;
	background-color:#fff;
	border-radius:50%;
	z-index:2;
}
  
#qrcode_note{
   position:absolute;
   bottom:0;
   left:0;
   width:100%;
   height:25px;
   line-height:25px;
   text-align:center;
   font-size:12px;
}

#qrcode_logo{
   position:absolute;
   left:50%;
   top:50%;
   width:40px;
   height:40px;
   margin-left:-20px;
   margin-top:-20px;
   z-index:3;
}

.close-img{
    position:absolute;
    left:8px;
	top:8px;
	cursor:pointer;
	color:gray;
	height:20px;
	width:20px;
	filter: grayscale(100%);
    user-select: none;
    transition: all 0.3s;
}

.close-img:hover{
	filter: grayscale(0%);
    transition: all 0.3s;
}