.congraz_content {
    display: none;
}

.clickable {
    cursor: pointer;
    background: #f0f0f0;
    border: 1px solid #ccc;
    transition: transform 0.1s ease, box-shadow 0.2s ease;
}

.unavailable {
    background-color: #e8e4e4 !important;
}

.unavailable img {
    filter: grayscale(80%);
}

.nonclickable {
    cursor: pointer;
    background: grey;
    border: 1px solid #ccc;
    transition: transform 0.1s ease, box-shadow 0.2s ease;
}

/* 按下时的效果 */
.clickable:active {
    transform: scale(0.95);
    /* 缩小 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* 按压阴影 */
}

.checkin-card {
    border-radius: 10px;
    background-color: #fdfdfd;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.checkin-card.active {
    color: black;
    border: 1px solid #f0f0f0;
}

.checkin-card.clickable {
    color: black;
    background: #e9f5fe;
}

.checkin-card.dis-active {
    color: grey;
    border: 2px solid grey;
}

.checkin-card .day-title {
    font-weight: bold;

}

.checkin-card .points {
    font-size: 16px;
    padding-top: 10px;
}

.checkin-card .icon {
    margin-top: 10px;
    font-size: 20px;
}

.checkin-card .icon .fa {
    font-size: 40px;
}

.checkin-card .checked {
    color: green;
    font-size: 18px;
}