/* Custom styles goes here */
.text-twitter {
    color: #1da1f2
}

.cursor-default {
    cursor: default
}

.point {
    cursor: pointer
}

.center {
    text-align: center
}

#app {
    display: none
}

/* 必填字段红色星号样式 */
.form-label.required::after {
    content: " *";
    color: #e74c3c;
    font-weight: bold;
    margin-left: 1px;
}

/* 发光圆点效果 */
.glow-dot {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #71dd37; /* 绿色实心圆点 */
    border-radius: 50%;
    animation: pulse-glow 2s ease-in-out infinite;
}
    /* 光晕效果 - 使用伪元素 */
    .glow-dot::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 12px;
        height: 12px;
        background-color: rgba(40, 167, 69, 0.3);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        animation: ripple-effect 2s ease-out infinite;
    }

    /* 外层光晕 */
    .glow-dot::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 10px;
        height: 10px;
        background-color: rgba(40, 167, 69, 0.15);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        animation: ripple-effect 2s ease-out infinite 0.5s;
    }

/* 脉冲动画 */
@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
    }

    50% {
        box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.2);
    }
}

@keyframes ripple-effect {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }

    100% {
        transform: translate(-50%, -50%) scale(2.2);
        opacity: 0;
    }
}

/* 不同状态的颜色变体 */
.glow-dot.online {
    background-color: #28a745;
}

    .glow-dot.online::before,
    .glow-dot.online::after {
        background-color: rgba(40, 167, 69, 0.3);
    }

.glow-dot.offline {
    background-color: #6c757d;
    animation: none;
}

    .glow-dot.offline::before,
    .glow-dot.offline::after {
        background-color: rgba(108, 117, 125, 0.2);
        animation: none;
    }

.glow-dot.warning {
    background-color: #ffc107;
}

    .glow-dot.warning::before,
    .glow-dot.warning::after {
        background-color: rgba(255, 193, 7, 0.3);
    }


.btn-loading {
    position: relative;
    color: transparent !important;
    text-shadow: none !important;
    pointer-events: none;
}

    .btn-loading::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 18px;
        height: 18px;
        margin: -8px 0 0 -8px;
        border: 2.5px solid transparent;
        border-top-color: currentColor;
        border-radius: 50%;
        animation: btn-loading-spin 0.75s linear infinite;
    }

@keyframes btn-loading-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 针对不同按钮颜色调整加载圆圈颜色 */
.btn-primary.btn-loading::before {
    border-top-color: #ffffff;
}

.btn-info.btn-loading::before {
    border-top-color: #ffffff;
}

.btn-success.btn-loading::before {
    border-top-color: #ffffff;
}

.btn-warning.btn-loading::before {
    border-top-color: #212529;
}

.btn-danger.btn-loading::before {
    border-top-color: #ffffff;
}

.btn-secondary.btn-loading::before {
    border-top-color: #ffffff;
}

.btn-dark.btn-loading::before {
    border-top-color: #ffffff;
}

.btn-light.btn-loading::before {
    border-top-color: #212529;
}

/* outline 按钮样式 */
.btn-outline-primary.btn-loading::before,
.btn-outline-info.btn-loading::before,
.btn-outline-success.btn-loading::before,
.btn-outline-danger.btn-loading::before,
.btn-outline-secondary.btn-loading::before,
.btn-outline-dark.btn-loading::before {
    border-top-color: currentColor;
}