/*收藏heart抖動動畫 start*/
@-moz-keyframes tada {
    0% {
        -moz-transform: scale(1);
    }
    10%, 20% {
        -moz-transform: scale(0.9) rotate(-3deg);
    }
    30%, 50%, 70%, 90% {
        -moz-transform: scale(1.2) rotate(3deg);
    }
    40%, 60%, 80% {
        -moz-transform: scale(1.2) rotate(-3deg);
    }
    100% {
        -moz-transform: scale(1) rotate(0);
    }
}

@-webkit-keyframes tada {
    0% {
        -webkit-transform: scale(1);
    }
    10%, 20% {
        -webkit-transform: scale(0.9) rotate(-3deg);
    }
    30%, 50%, 70%, 90% {
        -webkit-transform: scale(1.2) rotate(3deg);
    }
    40%, 60%, 80% {
        -webkit-transform: scale(1.2) rotate(-3deg);
    }
    100% {
        -webkit-transform: scale(1) rotate(0);
    }
}

/*收藏heart抖動動畫*/
.favoriteHeartAnimation:hover {
    -webkit-animation: tada 1s .2s ease both;
    -moz-animation: tada 1s .2s ease both;
}

/*收藏heart抖動動畫 end*/

/*box heart抖動動畫*/
.heartAnimation:hover {
    -webkit-animation: tada .5s .2s ease both;
    -moz-animation: tada .5s .2s ease both;
}

/*box heart抖動動畫 end*/

/*收藏樣式*/
.enable_favoriteHeart {
    color: #f2a7a7;
}

/*收藏取消樣式*/
.disable_favoriteHeart {
    color: #9f9f9f;
}

/*收藏樣式*/
.enable_favoriteHeart_girl {
    color: #f2a7a7;
}

/*收藏樣式*/
.enable_favoriteHeart_boy {
    color: #0d6efd;
}

/*chat 两列div横式排列*/
.media {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

.renterListDIV:hover {
    /*background-color: pink;*/
    /*border-color: pink;*/
    background-color: #f2a7a7;
    border-color: #f2a7a7;
    cursor: pointer;

}

/*img模糊并变暗*/
.notMemberImg {
    /*图片滤镜-模糊-线性乘法（更亮或更暗）*/
    -webkit-filter: blur(2px) brightness(80%);
    filter: blur(2px) brightness(80%);
}

/*当屏幕小于或等于992px时*/
@media screen and (max-width: 992px) {

    .myFavoriteDIV {
        width: 20px;
        height: 20px;
    }

    .myFavoriteDIV i {
        position: relative;
        top: 1px;
        font-size: 16px;
    }

    .renterVideoDIV {
        width: 20px;
        height: 20px;
    }

    .renterVideoDIV i {
        position: relative;
        top: 0;
        font-size: 16px;
    }

    .serviceItemsName {
        font-size: 12px;
    }
}

/*屏幕大于或等于992px时 for pc*/
@media screen and (min-width: 992px) {

    .myFavoriteDIV {
        width: 40px;
        height: 40px;
    }

    .myFavoriteDIV i {
        position: relative;
        right: -1px;
        top: 1px;
        font-size: 25px;
    }

    .renterVideoDIV {
        width: 40px;
        height: 40px;
    }

    .renterVideoDIV i {
        position: relative;
        right: -1px;
        top: 0;
        font-size: 25px;
        color: #9f9f9f;
    }

    .serviceItemsName {
        font-size: 18px;
    }
}

/* 大屏幕（大桌面显示器，大于等于 1200px） */
/*屏幕大于或等于1200px时 for pc*/
@media screen and (min-width: 1200px) {


}


/* 以下為renter Details style */
/*当屏幕小于或等于992px时*/
@media screen and (max-width: 992px) {

    .renterName {
        font-size: 18px;
    }

    .heartIcon {
        width: 30px;
        height: 30px;
    }

    .chatDIV {
        width: 20px;
        height: 20px;
    }

    .chatDIV_girl i {
        font-size: 16px;
        color: #f2a7a7;
    }

    .chatDIV_boy i {
        font-size: 16px;
        color: #0d6efd;
    }

    .inviteChatDIV {
        width: 20px;
        height: 40px;
    }

    .inviteChatDIV i {
        font-size: 20px;
        color: #f2a7a7;
    }

    .renter-avatar-box {
        background-color: #FFFFFF;
        padding: 8px;
        /*border: #f2a7a7 solid 2px;*/
        border-radius: 8px;
        text-align: center;
        margin-top: 5rem; /*取決頭像尺寸的一半*/
        margin-bottom: 10px;
        display: block;
    }

    .renter-avatar-box_girl{
        border: #f2a7a7 solid 2px;
    }

    .renter-avatar-box_boy{
        border: #0d6efd solid 2px;
    }

    .renter-avatar-box .heartBox {
        top: -1rem;
        left: 2.5rem;
        background-color: #FFFFFF;
    }

    .renter-avatar-box .avatarBox {
        background-color: #FFFFFF;
        height: 10rem;
        width: 10rem;
    }

    .renter-avatar-box .renterInfoBox {
        margin-top: 5.5rem; /* 取決頭像尺寸的一半+0.5 */
    }

    .renter-title {
        width: 100px;
        /*background-color: #f2a7a7;*/
        letter-spacing: 3px;
        font-size: 14px;
    }

    .renter-title_girl {
        background-color: #f2a7a7;
    }

    .renter-title_boy {
        background-color: #0d6efd;
    }

    .profile-title {
        font-weight: bold;
    }

    .profile-txt {
        font-weight: 300;
    }
}

/*屏幕大于或等于992px时 for pc*/
@media screen and (min-width: 992px) {

    .renterName {
        font-size: 20px;
    }

    .heartIcon {
        width: 50px;
        height: 50px;
    }

    .chatDIV {
        height: 40px;
    }

    .chatDIV_girl i {
        font-size: 25px;
        color: #f2a7a7;
    }

    .chatDIV_boy i {
        font-size: 25px;
        color: #0d6efd;
    }

    .inviteChatDIV {
        height: 40px;
    }

    .inviteChatDIV i {
        font-size: 25px;
        color: #f2a7a7;
    }

    .renter-avatar-box {
        background-color: #FFFFFF;
        padding: 8px;
        /*border: #f2a7a7 solid 2px;*/
        border-radius: 8px;
        text-align: center;
        margin-top: 6rem; /*取決頭像尺寸的一半*/
        margin-bottom: 10px;
        display: block;
    }

    .renter-avatar-box_girl{
        border: #f2a7a7 solid 2px;
    }

    .renter-avatar-box_boy{
        border: #0d6efd solid 2px;
    }

    .renter-avatar-box .heartBox {
        top: 5rem;
        left: 2.5rem;
        background-color: #FFFFFF;
    }

    .renter-avatar-box .avatarBox {
        background-color: #FFFFFF;
        height: 12rem;
        width: 12rem;
    }

    .renter-avatar-box .renterInfoBox {
        margin-top: 6.5rem; /* 取決頭像尺寸的一半+0.5 */
    }

    .renter-title {
        width: 120px;
        /*background-color: #f2a7a7;*/
        letter-spacing: 5px;
        font-size: 16px;
    }

    .renter-title_girl {
        background-color: #f2a7a7;
    }

    .renter-title_boy {
        background-color: #0d6efd;
    }

    .profile-title {
        font-weight: bold;
    }

    .profile-txt {
        font-weight: 300;
    }
}

/*屏幕大于或等于1200px时 for pc*/
@media screen and (min-width: 1200px) {

}