/* styles.css */

.hover-div {
    padding: 0px 5px;
    box-sizing: border-box;
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
    /* 可选：添加阴影 */
    transition: background-color 0.3s ease, color 0.3s ease;
    /* 平滑过渡效果 */
}

.hover-div:hover {
    background-color: #444444;
    /* 鼠标悬停时的背景色 */
    color: white;
    /* 鼠标悬停时的文字颜色 */
}



/* ---------- 自定义 CheckCard 整体 ---------- */
.my-checkcard {
    padding: 0 !important;
    margin: 0 !important;
    width: 30px !important;
    border: 1px solid #666666 !important;
    border-radius: 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

/* ---------- 内容区 ---------- */
.my-checkcard .ant-pro-checkcard-content {
    padding: 0 !important;
    width: auto !important;
    height: 40px !important;
    background-color: #666666 !important;
}

/* ---------- 描述文字 ---------- */
.my-checkcard .ant-pro-checkcard-description {
    font-size: 13px !important;
    color: #ffffff !important;
}

/* ---------- 选中时对勾（默认状态 - 未选中） ---------- */
.my-checkcard::after {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) scale(0) !important;
    width: 15px !important;
    height: 15px !important;
    background-color: #ff4d4f !important;
    border-radius: 50% !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    opacity: 0 !important;
    transition: all 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

/* ---------- 选中时对勾（选中状态） ---------- */
.my-checkcard.ant-pro-checkcard-checked::after {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
}