/* 增加悬停和点击效果的样式 */
    .delete-button {
        position: absolute;
        top: 5px;
        right: 5px;
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        border: none;
        border-radius: 50%;
        width: 25px;
        height: 25px;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.2s ease;
        display: flex;                /* 添加 flexbox */
        justify-content: center;      /* 水平居中 */
        align-items: center;          /* 垂直居中 */
    }

    /* 悬停时改变背景颜色 */
    .delete-button:hover {
        background-color: rgba(255, 0, 0, 0.7);
    }

    /* 点击时改变图标的大小 */
    .delete-button:active {
        transform: scale(0.9);
    }
/* 默认情况下，隐藏responsive-logo，在hangcontainer中显示图片 */
.responsive-logo {
    display: block;
}

.sidebar-logo {
    display: none;
}

@media (max-width: 768px) {
    /* 当屏幕宽度小于768px时，显示responsive-logo，隐藏hangcontainer中的图片 */
    .responsive-logo {
        display: block;
    }
    .hangcontainer img {
        display: none;
    }
    /* 将图片显示在sidebar下面的第一行 */
    .sidebar-logo {
        display: block;
    }
    /* 调整hangcontainer的margin-bottom为50px */
    .hangcontainer {
        margin-bottom: 50px;
    }
    .chat-containertop {
        display: none;
    }
}

        /* 弹出层遮罩 */
        .recharge-popup {
            display: none; /* 默认隐藏 */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            z-index: 9999;
        }

        /* 弹出内容框 */
        .popup-content {
            background-color: #fff;
            width: 1000px;
            max-width: 90%;
            margin: 80px auto;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0px 4px 12px rgba(0,0,0,0.2);
	    overflow-y:auto;
            max-height:110vh; 
        }

        .popup-content h2 {
            text-align: center;
            color: #333;
        }

        .recharge-options {
            display: flex;
            gap: 5px;
        }

        .recharge-option {
            border-radius: 8px;
            border: 1px solid #ddd;
            padding: 10px;
            transition: all .3s ease-in-out;
        }

        .recharge-option:hover {
            border-color:#409EFF; 
			box-shadow:#c6e2ff88 0px 4px 10px; 
			transform :scale(1.02);
			cursor:pointer
		}

		.recharge-option p:first-child{
			font-weight:bold; 
			font-size :18px; 
			margin-bottom :6px
                        margin:0 0 0 0px;
		}
		
		.recharge-option p:last-child{
			color:#666
		}

        .pay-button {
			margin-top :10px; 
			background-color:#409EFF; 
			color:white; 
			border:none; 
			padding :10px 20px; 
			border-radius :5px; 
			cursor:pointer; 
			font-size :14px
		}

		.pay-button:hover{
		    background-color:#66b1ff
	    }
		
	    #qr-code {
	        margin-top :20px; 
	        text-align:center
	    }
	    
	    canvas#qrcode{
	    	margin-top :0px
	    }

	    .close-button {
	        margin-top :10px; 
	        background-color:#f56c6c; 
	        color:white; 
	        border:none; 
	        padding :8px16px; 
	        border-radius :5px; 
	        cursor:pointer
	    }
	    
	    .close-button:hover{
	    	background-color:#ff8787
	    }
@media screen and (max-width:768px){
   .popup-content{
       margin-top :40px !important;
       padding :20px !important;
       max-height :90vh !important; 
       overflow-y:auto
   }

   .pay-button,.close-button{
       width :40%
   }
}
@media (max-width: 768px) {
    .hangcontainer img {
        height: 40px !important;
    }
}