.flex_ori,
.vivacomment-open {
    position: relative
}

.vivacomment {
    --color-border-dark: 0 0 0;
    --color-border-light: 255 255 255;
    --color-theme-1: #757575;
    --color-theme-2: #212121;
    --color-theme-3: #9a1e23;
    color: var(--color-theme-1);
    fill: var(--color-theme-1)
}

.flex_ori {
    display: block;
    overflow: hidden;
    line-height: 0
}

.flex_ori:before {
    content: "";
    display: block
}

.flex_ori img {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.flex_ori img:not([src]) {
    visibility: hidden
}

.vivacomment a,
.vivacomment button {
    background: 0;
    border: 0;
    outline: 0;
    transition: .25s
}

.vivacomment a:hover,
.vivacomment button:hover {
    fill: var(--color-theme-3);
    color: var(--color-theme-3)
}

.vcc-action-list,
.vivacomment-box .vivacomment-form,
.vivacomment-box-sub,
.vrp-other {
    display: none
}

.vivacomment-form {
    margin-top: var(--size-4);
    margin-bottom: var(--size-2)
}

.vcf-input {
    border: 1px solid rgb(var(--color-border-dark)/ 21%);
    display: grid;
    grid-template-columns: 1fr auto;
    grid-column: 1/3;
    border-radius: var(--size-1);
    overflow: hidden
}

.vcf-field {
    border: 0;
    padding: var(--size-3);
    padding-right: 0;
    min-height: 60px;
    line-height: 150%;
    resize: vertical
}

.vcf-button {
    height: 100%;
    padding: 0 var(--size-3);
    display: flex;
    align-items: center;
    justify-content: flex-end
}

.vcf-char {
    font-size: 12px;
    margin-top: var(--size-2)
}

.vivacomment-box {
    --thumb-size: var(--size-5);
    --thumb-gap: var(--size-3);
    margin-top: var(--size-4)
}

.vivacomment-box li {
    padding: var(--size-4) 0;
    border-top: 1px dashed rgb(var(--color-border-dark)/ 21%)
}

.vct-frame {
    width: 100%;
    border-radius: 50%;
    border: 1px solid rgb(var(--color-border-dark)/ 21%)
}

.vct-frame:before {
    padding-top: 100%
}

.vivacomment-box-sub {
    padding-left: calc(var(--thumb-size) + var(--thumb-gap));
    margin-top: var(--size-4);
    --thumb-size: 28px
}

.vivacomment-box-sub li:last-child {
    padding-bottom: 0
}

.vivacomment-list {
    display: grid;
    grid-template-columns: var(--thumb-size) 1fr;
    grid-gap: var(--size-3)
}

.vcc-main {
    font-size: 14px;
    line-height: 150%;
    color: var(--color-theme-1)
}

.vcc-main-name,
.vcc-option .vcc-info-list,
.vrp-real:checked+.vrp-dummy {
    color: var(--color-theme-2)
}

.vivacomment-open:before {
    content: "";
    position: absolute;
    top: var(--size-4);
    left: calc((var(--thumb-size)/ 2) - 1px);
    background-color: rgb(var(--color-border-dark)/ 13%);
    width: 2px;
    height: calc(100% - (var(--size-4) * 2))
}

.vcc-misc,
.vcc-reply-toggle {
    margin-top: var(--size-2)
}

.vcc-info,
.vcc-misc,
.vcc-option,
.vrp-dummy-right {
    display: flex;
    align-items: center
}

.vcc-misc {
    justify-content: space-between;
    font-size: 12px
}

.vcc-liked {
    fill: var(--color-theme-3)!important;
    color: var(--color-theme-3)!important;
    font-weight: 700
}

.vcc-info-list {
    margin-right: var(--size-3);
    display: flex;
    align-items: center;
    line-height: 100%;
    fill: var(--color-theme-1);
    color: var(--color-theme-1)
}

.vcc-info-list .svgicon {
    margin-right: var(--size-1);
    width: auto;
    height: 12px
}

.vcc-option .vcc-info-list {
    margin-left: var(--size-3);
    margin-right: 0;
    fill: var(--color-theme-2);
    font-weight: 700
}

.vcc-reply-toggle:hover,
.vrp-close-report:hover {
    fill: var(--color-theme-2)!important
}

.vcc-reply-toggle {
    color: var(--color-theme-3);
    font-weight: 700;
    line-height: 190%
}

.vcc-reply-toggle:hover {
    color: var(--color-theme-2)!important
}

.vcb-more {
    padding: var(--size-3) var(--size-4);
    background-color: var(--background-color)!important;
    color: var(--color-theme-2);
    border: 1px solid var(--color-theme-2)!important;
    display: flex;
    justify-content: center;
    border-radius: var(--size-1)
}

.vcb-more:hover {
    border-color: var(--color-theme-3)!important
}

.vcc-reported {
    fill: #00a673!important;
    color: #00a673!important
}

.vcc-reported .svgicon {
    height: 10px
}

.vivacomment-delete-popup,
.vivacomment-report-popup {
    position: fixed;
    z-index: var(--max-zindex);
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: none
}

.vrp-container,
.vrp-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.vrp-overlay {
    z-index: 2;
    background-color: rgb(var(--color-border-dark)/ 55%)
}

.vrp-container {
    display: flex;
    justify-content: center
}

.vrp-box {
    position: relative;
    z-index: 4;
    background-color: rgb(var(--color-border-light)/ 100%);
    width: 100%;
    padding: var(--size-4)
}

.vrp-close-report {
    position: absolute;
    top: calc(var(--size-6) * -1);
    line-height: 0;
    border-radius: 50%;
    overflow: hidden;
    background-color: #ec1c4c!important;
    fill: rgb(var(--color-border-light)/ 100%)
}

.vrp-close-report .svgicon {
    width: auto;
    height: var(--size-5)
}

.vrp-confirmation,
.vrp-list {
    display: grid;
    padding: var(--size-3) 0
}

.vrp-list:after,
.vrp-list:before {
    content: none
}

.vrp-row {
    position: relative;
    padding: var(--size-2) 0
}

.vrp-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-theme-2)
}

.vrp-real {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0
}

.vrp-dummy {
    display: grid;
    grid-gap: var(--size-3);
    grid-template-columns: auto 1fr;
    position: relative;
    z-index: 1
}

.vrp-cirlce {
    position: relative;
    width: var(--size-4);
    height: var(--size-4);
    border-radius: 50%;
    border: 2px solid rgb(var(--color-border-dark)/ 21%)
}

.vrp-cirlce .svgicon {
    position: absolute;
    bottom: 2px;
    left: 1px;
    width: var(--size-4);
    height: auto;
    fill: var(--color-theme-3);
    opacity: 0
}

.vrp-real:checked+.vrp-dummy .vrp-cirlce {
    border-color: var(--color-theme-2)
}

.vrp-real:checked+.vrp-dummy .vrp-cirlce .svgicon {
    opacity: 1
}

.vrp-other-field {
    background-color: transparent;
    width: calc(100% - var(--size-5));
    padding: var(--size-3);
    margin-left: var(--size-5);
    margin-top: calc(var(--size-1) * -1);
    border: 1px solid rgb(var(--color-border-dark)/ 8%);
    border-radius: var(--size-1)
}

.vivacomment .vrp-action {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: var(--size-2)
}

.vivacomment .vrp-action-button {
    height: var(--size-6);
    width: 100%;
    padding: 0 var(--size-3);
    border-radius: var(--size-1);
    font-weight: 700;
    font-size: 16px
}

.vivacomment .vrp-cancel-report {
    background-color: rgb(var(--color-border-dark)/ 8%)
}

.vivacomment .vrp-submit-report {
    background-color: var(--color-theme-3);
    color: rgb(var(--color-border-light)/ 100%)!important
}

.vivacomment .vrp-submit-report:hover {
    background-color: var(--color-theme-2)
}

@media screen and (min-width:0px) and (max-width:1023px) {
    .vrp-container {
        align-items: flex-end
    }
    .vrp-box {
        border-radius: var(--size-3) var(--size-3) 0 0
    }
    .vrp-close-report {
        right: var(--size-2)
    }
}

@media screen and (min-width:1024px) {
    .vrp-container {
        align-items: center
    }
    .vrp-box {
        max-width: 377px;
        border-radius: var(--size-3)
    }
    .vrp-close-report {
        right: calc(var(--size-4) * -1)
    }
}

.container {
    width: 100%;
    max-width: 1200px
}

@media (max-width:768px) {
    .container {
        width: 100%;
        height: 965px
    }
}

@media (min-width:769px) {
    .container {
        width: 100%;
        height: 965px
    }
}