﻿a{
cursor:pointer;
}

/*投票排名頁*/
.rankingResultDate {
    font-size: 3rem !important;
}
.closeRankTxt{
    display:none;
}
.color1, .color2, .color3 , .rankColor {
    width: 50px;
    height: 50px;
    font-style: inherit;
    font-family: 'Roboto Slab', serif;
    font-size: 35px;
    /*    text-shadow: black 0.07em 0.07em 0.3em;*/


    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.color_name1, .color_name2, .color_name3, .rank1_name ,.colorRankName {
    display: flex;
    align-items: center;
    font-size: 30px;
    font-family: Microsoft JhengHei;

}
.rankingNo {
    padding-left: 7px;
/*    -webkit-text-stroke: 1.1px rgba(0,0,0,0.6);*/
    text-shadow: 0 0 10px black;
}
.crown {
    width: 45px;
    transform: rotate(30deg);
}

.showTime{
    font-size:1.7rem!important;
}

.ranking {
    background-color: rgba(0,0,0,.2);
}

.welcomeRankTxt {
    margin-top:10px;
    text-align: center;
    font-size:23px;
}
.h2 {
    font-size: 2rem!important;
}
.rule{
    font-size:20px;
}

.ruletxt {
    text-decoration: underline;
}

.rankingModalVoteDate {
    font-size: 2.375rem !important;
}
.rankingLiveText::before {
    background-image: url("../images/ColorVote/rank.png");
    background-size: 20px 20px;
    display: inline-block;
    width: 20px;
    height: 20px;
    content: "";
    background-repeat: no-repeat;
    margin-right: 5px;
}

.voteResultWaiting{

    font-size:30px;
}

@media (max-width: 767px) {
    .color_name1, .color_name2, .color_name3, .rank1_name, .colorRankName {
        font-size: 21px;
    }
    .color1, .color2, .color3, .rankColor {
        width: 43px;
        height: 50px;
        font-size: 30px;
    }
    .crown {
        width: 39px;
    }
}

.rank1_img {
    height: 150px;
    width: 150px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 50%;
    box-shadow: 0 0 8px rgb(255 255 255 / 50%);
}


/*規則說明*/
.rule_txt01 {
    font-size: 25px;
}

.modal-content {
    background: linear-gradient(0deg, #FF3AB0 0%, #4BA1E4 100%);
    background: -moz-linear-gradient(0deg, #FF3AB0 0%, #4BA1E4 100%);
    background: -webkit-linear-gradient(0deg, #FF3AB0 0%, #4BA1E4 100%);
    background: -o-linear-gradient(0deg, #FF3AB0 0%, #4BA1E4 100%);
    border-radius:40px;
}

.modal_rule {
    background: #fff;
    font-size: 25px;
    border-radius: 40px;
    width: 80%;
    text-align: center;
}
@media (max-width: 766px) {
    .modal_rule {
        width: 90%;
        font-size: 22px;
    }
}
    .btn:not(.act).focus-visible:focus, .btn:not(.act):hover {
        background-color: #fff !important;
    }

    .btn:not(.act) > span:hover {
        color: #0E87E5 !important;
    }


/*投票*/
.color_img {
    height: 75px;
    width: 75px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius:50%;
    box-shadow: 0 0 8px rgb(255 255 255 / 50%);
}
.color_name{
    font-size:18px;
}
.vote_colors {
    width: 107px;
    height: 90px;
    border-radius: 10px;
    box-shadow: 0 0 16px rgb(255 255 255 / 50%);
}

.vote_colors:hover {
    box-shadow: 0 0 24px white;
}
.colors_text{
    font-size:30px;
}

@media (max-width: 766px) {

    .vote_colors {
        width:87px;
        height: 70px;
        border-radius: 10px;
    }

    .colors_text {
        font-size: 24px;
    }
    .color_circle {

        width: 49px;
        height: 49px;
    }
}

.chooseColorTitle {
    font-size: 20px;
}

.color_circle {
    border-radius: 50%;
    box-shadow: 0 0 16px rgb(255 255 255 / 50%);
    width: 69px;
    height: 69px;
    transition: .3s ease;
}

.colors:hover .color_circle {
    width: 49px;
    height: 49px;
    transform: translateY(-10px);
}

.btn-red {
    color: #fff!important;
    background-color: #dc3545!important;
    border-color: #dc3545!important;
}

.vote_colors_li_a:hover .color_img {
    height: 100px;
    width: 100px;
    transition: .3s ease;
    box-shadow: 0 0 16px rgb(255 255 255 / 50%);
}
.vote_colors_li_a:hover .color_name {
    font-size: 20px;
    transition: .3s ease;
}

.choose_Color {
    height: 150px;
    width: 150px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 50%;
    box-shadow: 0 0 8px rgb(255 255 255 / 50%);
}


.chooseResult_Color {
    height: 150px;
    width: 150px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 50%;
    box-shadow: 0 0 8px rgb(255 255 255 / 50%);
}

.chooseText{
    font-size:30px;
}

.modal-body {

    padding: 1rem 0;
}


/*倒數*/
.bookcoming {
    position: relative;
     padding: 0; 
     padding: 0; 
    text-align: center;
}

.bookcoming-timer {
     margin:  0; 
    white-space: nowrap;
}

.display-3 {
    font-size: 1rem;
    line-height: 1.1;
}

.bookcoming-timer .digit:nth-child(odd) {
    color: #FF3AB0!important;
}

@media (max-width: 768px)  {
    .bookcoming-timer{
        font-size:1.3rem!important;
    }
}