@import 'color.less';
.vote {
    //投票區按鈕
    .checkAnswer {
        display: block;
        margin-top: 20px;
        margin-left: 0px;

        .testBtn {
            margin: 20px 0px;
            position: relative;
            z-index: 2;
            font-weight: bolder;
            padding-left: 20px;
            cursor: pointer;

            input[type="checkbox"] {
                visibility: hidden;
                margin-left: -10px;

                &:checked {
                    ~ .testbg {
                        background-color: @primary !important;
                        border: none;

                        span {
                            color: #fff;
                            font-weight: bolder;
                        }
                    }
                }
            }
        }


        .testbg {
            cursor: pointer;
            background-color: #fff;
            position: relative;
            height: auto;
            top: -31px;
            padding: 10px;
            z-index: 1;
            display: flex;
            border-radius: 4px;
            border: 1px solid rgb(197, 197, 197);
        }
    }
    //送出訊息動畫
    .slide-fade-enter-active {
        transition: all 0.3s ease;
    }

    .slide-fade-leave-active {
        transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
    }

    .slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */ {
        transform: translateY(-5%);
        opacity: 0;
    }

    .votefinished-icon {
        font-size: 80px;
        position: relative;
        left: -3px;
        margin-bottom: 10px;
    }
    //活動結果
    .voteResultsItem {
        padding: 10px 20px;
        padding-left: 80px;
        z-index: 0 !important;
        position: relative;
    }

    .voteResultsIcon {
        font-size: 20px;
        color: @primary;
        position: absolute;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 2%;
        margin: auto 0;
    }

    .voteResultSelect {
        background-color: rgba(229, 229, 229, 0.56);
        border-radius: 4px;
    }

    .voteResultsMainRow {
        background-color: rgba(229, 229, 229, 0.56);
        padding: 20px;
        border-radius: 4px;
    }

    .voteResultsMainKeyWord {
        color: rgb(36, 184, 128);
        font-size: 24px;
        position: relative;
        top: 2px;
    }

    .vote-chart-card {
        width: 50%;

        @media screen and (max-width: 1200px) {
            width: 70%;
        }

        @media screen and (max-width: 767px) {
            width: 100%;
        }
    }
}
