.container {
    padding-right: 16px !important;
}

#main-navbar {
    border-radius: 0;
    left: 0;
    top: 0;
    position: fixed;
    width: 100%;
    height: 60px;
    z-index: 1000;
}

.img-circle {
    top: 10px;
    right: -30px;
}

.loader {
    position: relative;
    display: flex;
    justify-content: center;
    align-content: center;
    width: 120px;
    height: 20px;
}

.dot {
    position: relative;
    flex: 1;
    display: flex;
    justify-content: center;
    align-content: center;
    margin: 0 5px;
    height: 20px;
    width: 2px;
}

.dot:first-of-type {
    margin-left: 0
}

.dot:last-of-type {
    margin-right: 0
}

.dot::before,
.dot::after {
    content: "";
    position: absolute;
    bottom: -5px;
    display: block;
    width: 4px;
    height: 4px;
    background: #278BC5;
    border-radius: 4px;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, .15);
    animation: helix 1.25s ease-in-out infinite;
}

.dot::after {
    bottom: 100%;
    animation: helix-reversed 1.25s ease-in-out infinite;
}

.dot i {
    position: absolute;
    z-index: 25;
    align-self: center;
    width: 2px;
    height: 10px;
    background: rgba(39, 139, 197, .15);
    animation: helix-bar 1.25s ease-in-out infinite;
}

.dot2::before, .dot2::after, .dot2 i {
    animation-delay: 0.05s
}

.dot3::before, .dot3::after, .dot3 i {
    animation-delay: 0.10s
}

.dot4::before, .dot4::after, .dot4 i {
    animation-delay: 0.15s
}

.dot5::before, .dot5::after, .dot5 i {
    animation-delay: 0.20s
}

.dot6::before, .dot6::after, .dot6 i {
    animation-delay: 0.25s
}

.dot7::before, .dot7::after, .dot7 i {
    animation-delay: 0.30s
}

.dot8::before, .dot8::after, .dot8 i {
    animation-delay: 0.35s
}

.dot9::before, .dot9::after, .dot9 i {
    animation-delay: 0.40s
}

@keyframes helix {
    0% {
        width: 5px;
        height: 5px;
        bottom: -5px;
        z-index: 10
    }
    25% {
        width: 2px;
        height: 2px
    }
    50% {
        width: 5px;
        height: 5px;
        bottom: 100%;
        z-index: 20
    }
    75% {
        width: 8px;
        height: 8px
    }
    100% {
        width: 5px;
        height: 5px;
        bottom: -5px
    }
}

@keyframes helix-reversed {
    0% {
        width: 5px;
        height: 5px;
        bottom: 100%;
        z-index: 20
    }
    25% {
        width: 8px;
        height: 8px
    }
    50% {
        width: 5px;
        height: 5px;
        bottom: -5px;
        z-index: 10
    }
    75% {
        width: 2px;
        height: 2px
    }
    100% {
        width: 5px;
        height: 5px;
        bottom: 100%
    }
}

@keyframes helix-bar {
    0% {
        height: 15px
    }
    25% {
        height: 8px
    }
    50% {
        height: 15px
    }
    75% {
        height: 8px
    }
    100% {
        height: 15px
    }
}


.mine-tag {
    position: absolute;
    top: 5px;
    left: -20px;
    padding: 2px 5px;
    border-radius: 10px;
    color: #fff;
    font-size: 12px;
    background-color: #ff4d4f;
}

.mine-new {
    background-color: #ff4d4f; /* 你可以根据需要调整颜色 */
}

.sub-text {
    display: flex;
    justify-content: flex-start;
    margin-top: -2px;
    gap: 5px;
}

.navbar-brand {
    position: relative; /* 作为定位参考 */
    display: inline-block; /* 确保伪元素正确定位 */
    vertical-align: middle; /* 保持垂直对齐 */
}

.navbar-brand::after {
    content: var(--platform-version); /* 版本号 */
    font-size: 0.6em; /* 较小的字体大小 */
    position: absolute;
    right: 18px; /* 调整到右侧 */
    bottom: -5px; /* 调整到下方 */
    color: #666; /* 版本号颜色 */
    font-weight: normal; /* 确保字体正常 */
}

.product-container {
    position: relative;
    min-width: 100px;
}


.product-container .product-wrap {
    position: absolute;
    left: 0;
    top: 50px;
    scale: 0;
    transform-origin: top left;
    transition: scale 0.3s ease;

}

.product-container .product-wrap li {
    padding: 10px;
    border-bottom: 1px solid #FFFFFF;
    background-color: #e7e7e7;

}

.product-container .product-wrap li:hover {
    background-color: #cccccc;
}

.show-product-item:hover + .product-container .product-wrap {
    scale: 1;
}

.product-container:hover .product-wrap {
    scale: 1;
}

.product-container .product-wrap li a {
    text-decoration: none;
}


/* 下拉菜单初始状态 */
.dropdown-menu {
    display: block !important;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

/* 下拉菜单展开状态 */
.dropdown.open .dropdown-menu,
.dropdown:hover .dropdown-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/*.dropdown-menu li:hover{*/

/*}*/

/*.dropdown-menu li a:hover {*/
/*    background-color: #f5f5f5 !important;*/
/*    color: red !important;*/
/*}*/

/*.dropdown-menu li a {*/
/*    border-left: 3px solid transparent;*/
/*    transition: all 0.2s ease;*/
/*}*/

.dropdown-menu li a:hover {
    background-color: #e8f5e9;
    color: #2e7d32;
}

/*.dropdown-menu li a:hover {*/
/*     background-color: #f3e5f5;*/
/*    color: #7b1fa2;*/
/*}*/