/*your custom css goes here*/ 


.loading-container{
    width: 50px; /*先将loading区域变成正方形*/
    height: 50px;
    animation: loading-animation0.8s infinite linear;
    display: inline-block; /*将loading区域变成行内元素，防止旋转的时候，100%宽度都在旋转*/
    border: 3px solid #f3f3f3; /*设置四周边框大小，并将颜色设置为浅白色*/
    border-top: 3px solid red; /*将上边框颜色设置为红色高亮，以便旋转的时候能够看到旋转的效果*/
    border-radius: 50%; /*将边框和内容区域都变成圆形*/
}
@keyframes loading-animation{
    0% {
        transform: rotate(0deg); /*动画起始的时候旋转了0度*/
    }
    100% {
        transform: rotate(360deg); /*动画结束的时候旋转了360度*/
    }
}


.lx-rating {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow-x: hidden;
    width: 100%;
}

.lx-rating-text{
    margin-left: .25rem;
}

@media (max-width: 1199px) {
    .lx-rating{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        overflow-x: hidden;
    }

    .lx-rating-star{
        min-width: 4rem;
    }

    .lx-rating-text{
        margin-left: 0;
    }
}


.my-variant-name{
    margin-left: 4.1rem;
}


.my-input-validate-failed {
    padding: 10px;
    border: 2px solid red; /* 初始边框颜色 */
    border-radius: 5px;
    transition: border-color 0.3s; /* 添加过渡效果使颜色变化更平滑 */
}


.gap-1{
    gap: 1rem;
}

.gap-2{
    gap: 2rem;
}

.gap-3{
    gap: 3rem;
}

.gap-4{
    gap: 4rem;
}

.gap-5{
    gap: 5rem;
}

.gap-1px{
    gap: 1px;
}

.gap-2px{
    gap: 2px;
}

.gap-3px{
    gap: 3px;
}

.gap-4px{
    gap: 4px;
}

.gap-5px{
    gap: 5px;
}


.color-red{
    color: red;
}

.color-green{
    color: green;
}

.color-gray{
    color: gray;
}

.color-blue{
    color: rgb(78,170,254);
}