.translateSelectLanguage {
    position: absolute;
    top: 14px;
    right: 68px;
    width: 28px; /* 设置宽度为30px */
    height: 28px; /* 设置高度为30px */
    line-height: 20px;
    padding: 0.3rem;
    background-color: transparent; /* 背景色为透明 */
    background-image: url('../img/img/lg.png'); /* 替换为你的图片链接 */
    background-size: cover; /* 使图片覆盖整个按钮 */
    background-position: center; /* 图片居中显示 */
    border-radius: 0px;
    border: none; /* 保留边框设置 */
    z-index: 40; /* 设置为最高层级 */
    color: transparent; /* 文字颜色为透明 */
}
/* 下拉菜单选项样式 */
.translateSelectLanguage option {
    min-width: 300px;
    max-width: 600px;
    height: auto;
    font-size: 0.875rem;
    line-height: 20px;
    margin: 0.3rem; /* 选项的内边距 */
    padding: 0.3rem;
    background-color: #fff; /* 选项的背景颜色 */
    color: #333; /* 选项的文本颜色 */
    border: 0px;
    border-radius: 12px;
}
div#translate {
position: absolute;
top: 16px;
right: 52px;
z-index: 19;
}
/* 下拉菜单样式 */
.dropdown {

top: 14px; /* 与之前按钮的位置对齐 */
right: 68px; /* 与之前按钮的位置对齐 */
display: inline-block;
}

.dropdown-toggle {
    display: flex !important;
    background-color: #84848433;
    width: 30px;
    height: 30px;
    border: none;
    font-size: 0;
    border-radius: 50%;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    transition: all 0.3s;
}

.dropdown-toggle:hover {
background-color: #84848454;
transform: scale(1.05);
}

.dropdown-menu {
will-change: opacity, transform;
opacity: 0;
transform: scale(0.85) translateX(15px) translateY(-55px);
transition: opacity 0.3s ease, transform 0.3s ease;
position: absolute;
pointer-events: none;
top: 100%;
right: 0;
background-color: #111111d6;
min-width: 220px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
border-radius: 12px;
z-index: 1;
list-style: none;
padding: 0;
margin: 5px 0 0 0;
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
}
/* 当下拉菜单隐藏时的样式 
.dropdown-menu.hide {
opacity: 0; /* 变为不可见
transform: scaleY(0) translateX(0px) translateY(0px); /* 关闭时的状态
visibility: hidden; /* 设置为不可见 
transition: opacity 0.3s ease, transform 0.3s ease; /* 过渡效果
}*/
/* 定义渐显和放大的动画 */
@keyframes fadeInScale {
from {
    opacity: 0;
    transform: scale(0.85);
}
to {
    opacity: 1;
    transform: scale(1);
}
}
/* 定义渐隐和缩小的动画 */
@keyframes fadeOutScale {
from {
    opacity: 1;
    transform: scale(1);
}
to {
    opacity: 0;
    transform: scale(0.85);
}
}

.dropdown-menu li {
border-bottom: 0px solid #ddd;
}

.dropdown-menu li:last-child {
border-bottom: none;
}

.dropdown-menu li a {
font-size: .9rem;
border-radius: 12px;
color: rgb(229 229 229);
padding: 10px 16px;
text-decoration: none;
display: block;
transition: all 0.3s;
}

.dropdown-menu li a:hover,
.dropdown-menu li a.active {
margin: 0px 0px 0px 4px;
font-size: 1.5rem;
color: #fff;
background-color: #00000000;
transition: all 0.1s;
}

/* 显示下拉菜单 */
/* 显示下拉菜单时的动画效果 */
.dropdown.show .dropdown-menu {
opacity: 1;
transform: scale(1);
pointer-events: auto;
}
.language-link {
    display: flex !important;               /* 使用 Flexbox */
    align-items: center;        /* 垂直居中对齐 */
    text-decoration: none !important;      /* 去掉下划线 */
    padding: 10px !important;               /* 添加一些内边距 */
}

.language-link img {
    margin-right: 8px !important;         /* 图片和文字之间的间距 */
    transition: transform 0.3s ease;
}

/* 当鼠标悬停或链接处于活动状态时，放大图片 */
.language-link:hover img,
.language-link.active img,
.active-touch {
    transform: scale(1.4);
}
/* 高亮选中的菜单项 */
.dropdown-menu li a.active-touch {
    margin-left: 32px;
    color: #fff;
    background-color: #00000000;
    transition: all 0.1s; /* 高亮字体 */
}

/* 翻译按钮提示框样式 */
#translate-tooltip {
    position: fixed;
    background: rgba(0, 0, 0, 1);
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.dark #translate-tooltip {
    background-color: #424242;
    }

#translate-tooltip.visible {
    opacity: 1;
}

#translate-tooltip .tooltip-arrow {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid rgba(0, 0, 0, 1);
}
.dark #translate-tooltip .tooltip-arrow {
    border-bottom: 6px solid #424242;
}
#translate-tooltip .tooltip-inner {
    position: relative;
    z-index: 1;
}