@charset "utf-8";

.img-container {
    max-width: 25px;
    max-height: 25px;
}


.userUl li a {
    display: inline-block;
    width: 100%;
}

.userUl svg {
    position: absolute;
    top: 5px; /* 调整图标垂直位置，如果需要 */
    left: 5px; /* 改为left以将图标放在列表项的前面 */
    width: 20px;
    height: 20px;
    cursor: pointer;

}

.userUl span {
    position: absolute;
    top: 5px; /* 调整图标垂直位置，如果需要 */
    left: 40px; /* 改为left以将图标放在列表项的前面 */
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.userUl {
    list-style-type: none; /* 去除默认的列表符号 */
    padding: 0; /* 清除内外边距 */
    background-color: rgba(250, 244, 244, 0); /* 背景色 */
    font-family: Arial, sans-serif; /* 字体 */
    justify-content: space-around; /* 子元素水平居中对齐 */
    align-items: center; /* 子元素垂直居中对齐 */
    flex-wrap: wrap; /* 允许换行 */
    border: 1px solid #f4f0f0; /* 设置边框宽度、样式和颜色 */
    margin: 0;
    width: 120px;
    padding-top: 10px;
}

.userUl li {
    margin: 5px; /* 每个菜单项之间的间距 */
    background-color: #ddd; /* 菜单项背景色 */
    padding: 5px; /* 内边距 */
    /*: 1px;  圆角效果 */

    cursor: pointer; /* 鼠标悬停时改变指针形状 */
    transition: all 0.3s ease; /* 添加过渡效果 */

    background-color: rgba(250, 244, 244, 0.04); /* 背景色 */
    display: block;
    border-bottom: #ecc8c8 1px solid;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    /*padding-right: 20px;*/
    position: relative
}

.userUl li:hover {
    background-color: #75abe4; /* 鼠标悬停时的背景色变化 */
    transform: translateY(-3px); /* 微小上移动画效果 */
}

.toast {
    opacity: 1 !important;
    position: fixed !important;
    top: 20px; /* 调整为上方显示 */
    left: 50%;
    transform: translate(-50%, -10px); /* 微调垂直位置，使其视觉上居中 */
    max-width: 80%; /* 限制最大宽度，自动适应内容 */
    word-wrap: break-word;
    padding: 15px 20px; /* 调整内边距，使内容更舒适 */
    background-color: #ffffff;
    color: #3fcf07; /* 考虑到对比度，这里改为白色文字 */
    border-radius: 5px;
    z-index: 1000;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* 动画效果调整 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加轻微阴影，提升质感 */
}

.toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* 成功状态 */
.toast.success {
    background-color: #ffffff; /* 绿色背景 */
    color: #3fcf07;
}

/* 错误状态 */
.toast.error {
    background-color: #ffffff; /* 红色背景 */
    color: #f30404;
}