﻿
.like-post.True {
    color: red;
}

.like-post {
    border: solid 1px var(--cq-muted);
    padding: 0 5px;
    border-radius: 4px;
    font-weight: bold;
    line-height: 18px;
}

.like-post i {
        display: inline-block;
        margin-right: 5px;
    }

.box-title-name .like-post {
    position: absolute;
    right: 10px;
    top: 5px;
    padding: 0px;
    border: 0px;
    font-style: italic;
}

.box-title-name .like-post.True {
        color: #ff0079;
    }

.like-post .like-text {
    display: none;
}

.like-post.True .like-text {
    display: inline-block;
}

.like-post.True .unlike-text {
    display: none;
}

:root {
    --dd-mau: var(--cq-green);
    --dd-mau-dam: var(--cq-green);
}

#toolBarIdea .like.like,
.cq-cell .like.like,
.detail-content .like.like {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    border: 1.5px solid var(--dd-mau);
    border-radius: 999px;
    background: #fff !important;
    color: var(--dd-mau) !important;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease;
}

#toolBarIdea .like.like .fa-bookmark,
.cq-cell .like.like .fa-bookmark,
.detail-content .like.like .fa-bookmark {
    font-size: 15px;
    color: inherit;
    transition: transform .22s cubic-bezier(.3, 1.6, .5, 1);
}

#toolBarIdea .like.like:hover,
.cq-cell .like.like:hover,
.detail-content .like.like:hover {
    background: rgba(18, 131, 106, .07);
    color: var(--dd-mau-dam);
    border-color: var(--dd-mau-dam);
    box-shadow: 0 2px 10px rgba(18, 131, 106, .14);
}

#toolBarIdea .like.like:hover .fa-bookmark,
.cq-cell .like.like:hover .fa-bookmark,
.detail-content .like.like:hover .fa-bookmark {
    transform: translateY(-2px);
}

#toolBarIdea .like.like:active,
.cq-cell .like.like:active,
.detail-content .like.like:active {
    transform: translateY(1px);
}

#toolBarIdea .like.like.True,
.cq-cell .like.like.True,
.detail-content .like.like.True {
    background: var(--dd-mau);
    border-color: var(--dd-mau);
    color: #fff;
}

#toolBarIdea .like.like.True:hover,
.cq-cell .like.like.True:hover,
.detail-content .like.like.True:hover {
    background: var(--dd-mau-dam);
    border-color: var(--dd-mau-dam);
}

.desc-line .like .fa-bookmark {
    color: var(--dd-mau);
}

.cq-member-follow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cq-2);

    min-width: 160px;
    height: 46px;
    padding: 10px 22px;
    border: 1.5px solid var(--dd-mau);
    border-radius: 999px;
    background: #fff;
    color: var(--dd-mau);
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.cq-member-follow::before {
    content: "\f02e";    font-family: "Font Awesome 5 Free", FontAwesome;
    font-weight: 900;
    font-size: 14px;
}

.cq-member-follow:hover {
    background: rgba(18, 131, 106, .07);
    color: var(--dd-mau-dam);
    border-color: var(--dd-mau-dam);
    box-shadow: 0 2px 10px rgba(18, 131, 106, .14);
}

.cq-qmark { position: relative; gap: var(--cq-1); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cq-qmark svg { width: calc(var(--cq-mark-r) * 2); height: calc(var(--cq-mark-r) * 2); overflow: visible; display: block; }
.cq-count:empty { display: none; }

.cq-qmark .cq-count { font-size: 11px; font-weight: 800; line-height: 1; color: currentColor; white-space: nowrap; }
.cq-qmark.cq-count--left { flex-direction: row-reverse; }.popup-idea #toolBarIdea .cq-qmark .cq-count { font-size: 12px; }
.cq-qmark .cq-ring-outline { fill: none; stroke: #fff; stroke-width: 4; opacity: 0; transition: opacity .3s; }
.cq-qmark .cq-ring-base { fill: none; stroke: #fff; stroke-width: 2.5; transition: opacity .2s; }
.cq-qmark .cq-ring-fill { fill: none; stroke: #EF2F3C; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 53.4; stroke-dashoffset: 53.4; transform: rotate(-90deg); transform-box: fill-box; transform-origin: center; transition: stroke-dashoffset .55s cubic-bezier(.45,.05,.2,1); }
.cq-qmark:hover:not(.True) .cq-ring-base { opacity: 0; }
.cq-qmark:hover:not(.True) .cq-ring-fill { stroke-dashoffset: 13.35; }
.cq-qmark.True .cq-ring-outline { opacity: 1; }
.cq-qmark.True .cq-ring-base { opacity: 0; }
.cq-qmark.True .cq-ring-fill { stroke-dashoffset: 0; }
.cq-qmark .cq-spark { position: absolute; left: 50%; top: 6px; width: 2.5px; height: 10px; border-radius: 2px; background: #EF2F3C; transform-origin: bottom center; pointer-events: none; animation: cqFly .4s ease-out forwards; }
@keyframes cqFly { 0% { opacity: 1; transform: translate(0,0) rotate(var(--rot)) scaleY(.2); } 30% { opacity: 1; transform: translate(calc(var(--dx)*.4),calc(var(--dy)*.4)) rotate(var(--rot)) scaleY(1); } 100% { opacity: 0; transform: translate(var(--dx),var(--dy)) rotate(var(--rot)) scaleY(1); } }

.popup-idea #toolBarIdea .cq-qmark { width: 34px; height: 34px; }
.popup-idea #toolBarIdea .cq-qmark svg { width: calc(var(--cq-mark-r-md) * 2); height: calc(var(--cq-mark-r-md) * 2); }

.popup-idea #toolBarIdea .like.cq-qmark { background: none !important; border: 0 !important; padding: 0; box-shadow: none !important; }
.like.cq-qmark { background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; gap: 0 !important; }
.like.cq-qmark svg { width: calc(var(--cq-mark-r-lg) * 2); height: calc(var(--cq-mark-r-lg) * 2); }
#toolBarIdea .like.cq-qmark { background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }
.mag-card__foot .like.cq-qmark .cq-ring-base,
.mag-card__foot .like.cq-qmark .cq-ring-outline { stroke: #aebac4; }

#toolBarIdea .like.cq-qmark .cq-ring-base { stroke: #aebac4; }
#toolBarIdea .like.cq-qmark .cq-ring-outline { stroke: #aebac4; }
.popup-idea #toolBarIdea .like.cq-qmark .cq-ring-base { stroke: #fff; }
.popup-idea #toolBarIdea .like.cq-qmark .cq-ring-outline { stroke: #fff; }

.comment-item .rating { display: none !important; }

.cq-community-v2__card .wrap-img, .guest-item-idea .wrap-img { position: relative; }

.mag-detail .mag-aside__related .cq-col-3 .like.cq-qmark { background: none !important; box-shadow: none !important; border-radius: 0 !important; width: auto !important; height: auto !important; min-width: 0 !important; gap: 5px !important; flex-direction: row !important; }
.mag-detail .mag-aside__related .cq-col-3 .like.cq-qmark svg { width: calc(var(--cq-mark-r-sm) * 2) !important; height: calc(var(--cq-mark-r-sm) * 2) !important; }
.mag-detail .mag-aside__related .cq-col-3 .like.cq-qmark { color: #fff !important; }
.mag-detail .mag-aside__related .cq-col-3 .desc-line .like.like.cq-qmark { color: #fff !important; }
.mag-detail .mag-aside__related .cq-col-3 .desc-line .like.like.cq-qmark { background: none !important; box-shadow: none !important; }
.mag-detail .mag-aside__related .cq-col-3 .desc-line .like.like.cq-qmark .cq-count { color: #fff !important; }
.mag-detail .mag-aside__related .cq-col-3 .like.cq-qmark .cq-count { font-size: 12px; font-weight: 400; color: inherit; }
.mag-detail .mag-aside__related .cq-col-3 .like.cq-qmark:hover { color: #bff0e2; }

.cq-community-v2__grid .guest-item:hover .cq-qmark { transform: scale(1.1); }
.cq-community-v2__grid .cq-qmark .cq-spark { position: absolute; left: 13px; top: 12px; width: 2.5px; height: 10px; border-radius: 2px; background: #EF2F3C; transform-origin: bottom center; pointer-events: none; animation: cqFly .4s ease-out forwards; }

.cq-cc-mark .cq-ring-base { stroke: currentColor; opacity: .6; }
.cq-cc-mark .cq-ring-outline { stroke: transparent; }
.cq-cc-mark:hover:not(.True), .cq-cc-mark.True { color: #EF2F3C; }
.cq-cc-mark .cq-count { position: absolute; right: calc(100% + 2px); top: 50%;
    transform: translateY(-50%); font-size: 11px; font-weight: 800; color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }

.cq-cc-mark.cq-cc-dark { color: #3a4652; }
.cq-cc-mark.cq-cc-dark svg { filter: none; }
.cq-cc-mark.cq-cc-dark .cq-count { color: inherit; text-shadow: none; }
.cq-cc-mark.cq-cc-dark:hover:not(.True), .cq-cc-mark.cq-cc-dark.True { color: #EF2F3C; }

.cq-rcard { position: relative; }
.cq-rcard .like.cq-qmark {
    position: absolute;
    top: 8px;
    right: 8px;
    transform: none;
    z-index: 4;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    margin: 0;    background: none !important;    border: 0 !important;
    box-shadow: none !important;
    justify-content: center;
    color: #3a4652 !important;
}
.cq-rcard .like.cq-qmark svg { width: calc(var(--cq-mark-r) * 2); height: calc(var(--cq-mark-r) * 2); }
.cq-rcard .like.cq-qmark .cq-count { position: absolute; right: calc(100% + 4px); top: 50%;
    transform: translateY(-50%); color: inherit; }
.cq-rcard .like.cq-qmark.True, .cq-rcard .like.cq-qmark:hover:not(.True) { color: #EF2F3C !important; }

.cq-mem-card { position: relative; }

.group-item { position: relative; }

.guest-item-idea:hover .cq-cc-mark:not(.True) .cq-ring-base,
.cq-community-v2__card:hover .cq-cc-mark:not(.True) .cq-ring-base { opacity: 0; }
.guest-item-idea:hover .cq-cc-mark:not(.True) .cq-ring-fill,
.cq-community-v2__card:hover .cq-cc-mark:not(.True) .cq-ring-fill { stroke-dashoffset: 13.35; }
.home-standard-card:hover .cq-qmark:not(.True) .cq-ring-base,
.cq-rcard:hover .cq-qmark:not(.True) .cq-ring-base,
.cq-mem-card:hover .cq-qmark:not(.True) .cq-ring-base,
.group-item:hover .cq-qmark:not(.True) .cq-ring-base { opacity: 0; }
.home-standard-card:hover .cq-qmark:not(.True) .cq-ring-fill,
.cq-rcard:hover .cq-qmark:not(.True) .cq-ring-fill,
.cq-mem-card:hover .cq-qmark:not(.True) .cq-ring-fill,
.group-item:hover .cq-qmark:not(.True) .cq-ring-fill { stroke-dashoffset: 13.35; }

.cq-dd-mount { display: inline-flex; align-items: center; }
.cq-dd-nut { display: inline-flex; align-items: center; gap: 6px;
    height: 38px; padding: 0 14px; border: 1.5px solid var(--cq-border, #e6ecf2);
    border-radius: 999px; background: #fff; color: var(--cq-green, #12836a);
    font-size: 13px; font-weight: 700; cursor: pointer; }
.cq-dd-nut svg { width: calc(var(--cq-mark-r) * 2); height: calc(var(--cq-mark-r) * 2); }
.cq-dd-nut .cq-ring-base, .cq-dd-nut .cq-ring-outline { stroke: currentColor; }
.cq-dd-nut:hover { border-color: var(--cq-green, #12836a); }
.cq-dd-nut .cq-count { font-size: 13px; font-weight: 800; color: currentColor; }
.nv-hero__dd .cq-dd-nut { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.45); color: #fff; }
.nv-hero__dd .cq-dd-nut:hover { background: rgba(255,255,255,.2); border-color: #fff; }
.nv-hero__act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.cq-qmark.cq-mark {
    position: absolute;
    top: var(--cq-mark-inset, calc(var(--cq-mark-inset-auto) - var(--cq-card-bw, 0px)));
    right: var(--cq-mark-inset, calc(var(--cq-mark-inset-auto) - var(--cq-card-bw, 0px)));
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cq-1);
    width: auto;
    height: calc(var(--cq-mark-r) * 2);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    flex-direction: row;
}

.cq-qmark.cq-mark svg {
    width: calc(var(--cq-mark-r) * 2);
    height: calc(var(--cq-mark-r) * 2);
    filter: none;
}

.cq-qmark.cq-mark .cq-ring-outline { opacity: 0; }
.cq-qmark.cq-mark .cq-ring-base { stroke: #fff; }

.cq-qmark.cq-mark .cq-count {
    order: -1;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    text-shadow: none;
}

.cq-qmark.cq-mark.True .cq-ring-base { stroke: rgba(255, 255, 255, .35); }
