.expert-comment-box-wrapper {
    clear: both;
    margin: 30px 0;
}

.expert-comment-box {
    padding: 20px 15px 65px;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    z-index: 1;
    background: radial-gradient(233.54% 65.71% at 92.42% 100%, #393C37 0%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(0deg, #1A1A1A, #1A1A1A);
}

.expert-comment-box--drc {
    background: linear-gradient(0deg, #0A1126, #0A1126), radial-gradient(59.54% 142.28% at 82.02% 52.99%, #393C37 0%, rgba(0, 0, 0, 0) 100%), #1A1A1A;
}

.expert-comment-box__user {
    display: flex;
    align-items: center;
}

.expert-comment-box__avatar {
    margin-right: 10px;
    flex: 0 0 60px;
}

.expert-comment-box__avatar img {
    border-radius: 50%;
}

.expert-comment-box__user-info {
    font-weight: 600;
}

.expert-comment-box__user-name {
    color: #05D677;
}

.expert-comment-box--drc .expert-comment-box__user-name {
    color: #50B0FF;
}

.expert-comment-box__user-position {
    color: #9d9d9d;
}

.expert-comment-box__user-site {
    margin-top: 10px;
}

.expert-comment-box__site {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
    background: #05D677;
    color: #fff;
}

.expert-comment-box--drc .expert-comment-box__site {
    width: 80px;
    height: 20px;
    padding: 0;
    text-indent: -9999px;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    background-image: url("/wp-content/themes/yelly/assets/images/shortcodes/expert-comment/drc-logo.png");
    overflow: hidden;
    border-radius: 0;
}

.expert-comment-box__comment {
    margin-top: 20px;
    line-height: 24px;
    z-index: 2;
    position: relative;
    color: #fff;
}

.expert-comment-box__comment .tlp-tooltip {
    color: #fff;
}

.expert-comment-box__bg-image {
    width: 184px;
    height: 184px;
    position: absolute;
    right: -20px;
    bottom: -38px;
    background-size: contain;
    opacity: .5;
    z-index: 1;
}

.expert-comment-box--drc .expert-comment-box__bg-image {
    background-image: url("/wp-content/themes/yelly/assets/images/shortcodes/expert-comment/drc-bg.png");
    width: 495px;
    height: 277px;
    bottom: -120px;
    right: -110px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0.6;
}

.expert-comment-box__social {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.expert-comment-box__social--desktop {
    display: none;
}

.expert-comment-box__social-link {
    display: block;
    width: 26px;
    height: 26px;
    background-repeat: no-repeat;
    background-size: contain;
}

.expert-comment-box__social-link:hover {
    opacity: 0.8;
}

.expert-comment-box__social-link--facebook {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' fill='none'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%234D6FA9' d='M24.207 26H1.793A1.798 1.798 0 0 1 0 24.207V1.793C0 .807.807 0 1.793 0h22.414C25.193 0 26 .807 26 1.793v22.414c0 .986-.807 1.793-1.793 1.793Z'/%3E%3Cpath fill='%23fff' d='M21.965 4.483v4.482H17.93a.9.9 0 0 0-.896.897v2.69h4.483v4.483h-4.483V26H12.55v-8.966H8.965v-4.482h3.586v-2.69c0-2.824 2.152-5.155 4.931-5.38h4.483Z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Crect width='26' height='26' fill='%23fff' rx='5'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

.expert-comment-box__social-link--twitter {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Crect width='20' height='20' fill='%231D9BF0' rx='5'/%3E%3Cpath fill='%23fff' d='M15.567 6.832c.008.123.008.247.008.371 0 3.796-2.889 8.173-8.172 8.173v-.002A8.131 8.131 0 0 1 3 14.086a5.768 5.768 0 0 0 4.25-1.19A2.876 2.876 0 0 1 4.568 10.9c.431.083.875.066 1.297-.05A2.872 2.872 0 0 1 3.56 8.036V8c.4.222.847.345 1.304.36a2.876 2.876 0 0 1-.89-3.836 8.152 8.152 0 0 0 5.92 3 2.874 2.874 0 0 1 4.895-2.619 5.763 5.763 0 0 0 1.824-.697 2.883 2.883 0 0 1-1.262 1.588A5.712 5.712 0 0 0 17 5.344a5.834 5.834 0 0 1-1.433 1.488Z'/%3E%3C/svg%3E");
}

.expert-comment-box__social-link--instagram {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' fill='none'%3E%3Crect width='26' height='26' fill='url(%23a)' rx='5'/%3E%3Crect width='26' height='26' fill='url(%23b)' rx='5'/%3E%3Cpath fill='%23fff' d='M13 3.545c-2.568 0-2.89.012-3.898.058-1.007.046-1.694.205-2.295.439a4.63 4.63 0 0 0-1.675 1.09 4.641 4.641 0 0 0-1.09 1.675c-.235.601-.395 1.288-.44 2.294-.045 1.009-.057 1.331-.057 3.899s.011 2.889.057 3.897c.046 1.007.206 1.694.44 2.295.24.622.564 1.15 1.09 1.675.525.526 1.052.85 1.674 1.091.601.234 1.289.393 2.295.44 1.008.045 1.33.056 3.898.056s2.889-.01 3.897-.057c1.007-.046 1.695-.205 2.296-.439a4.625 4.625 0 0 0 1.674-1.091 4.642 4.642 0 0 0 1.09-1.675c.233-.601.393-1.288.44-2.294.045-1.009.057-1.33.057-3.898s-.012-2.89-.057-3.898c-.047-1.007-.207-1.694-.44-2.295a4.64 4.64 0 0 0-1.09-1.675 4.62 4.62 0 0 0-1.674-1.09c-.603-.234-1.29-.393-2.297-.44-1.008-.045-1.33-.057-3.898-.057H13Zm-.848 1.704H13c2.524 0 2.823.01 3.82.055.922.042 1.422.196 1.756.325.44.172.755.376 1.086.707.331.331.536.646.708 1.088.129.332.283.833.325 1.755.045.996.055 1.296.055 3.819 0 2.523-.01 2.822-.055 3.819-.042.922-.196 1.422-.325 1.755a2.924 2.924 0 0 1-.708 1.086c-.33.331-.645.536-1.086.707-.333.13-.834.284-1.756.326-.996.045-1.296.055-3.82.055s-2.824-.01-3.82-.055c-.922-.043-1.422-.197-1.756-.326a2.928 2.928 0 0 1-1.087-.707 2.93 2.93 0 0 1-.708-1.087c-.129-.333-.283-.833-.325-1.755-.045-.996-.055-1.296-.055-3.82 0-2.525.01-2.823.055-3.82.042-.922.196-1.422.325-1.755a2.93 2.93 0 0 1 .708-1.087c.33-.331.646-.536 1.087-.708.333-.13.834-.284 1.756-.326.872-.04 1.21-.051 2.972-.053v.002Zm5.895 1.57a1.134 1.134 0 1 0 0 2.27 1.134 1.134 0 0 0 0-2.27ZM13 8.145a4.855 4.855 0 1 0 0 9.71 4.855 4.855 0 0 0 0-9.71Zm0 1.703a3.151 3.151 0 1 1 0 6.303 3.151 3.151 0 0 1 0-6.303Z'/%3E%3Cdefs%3E%3CradialGradient id='a' cx='0' cy='0' r='1' gradientTransform='matrix(0 -25.7679 23.9662 0 6.906 28.003)' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FD5'/%3E%3Cstop offset='.1' stop-color='%23FD5'/%3E%3Cstop offset='.5' stop-color='%23FF543E'/%3E%3Cstop offset='1' stop-color='%23C837AB'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='0' cy='0' r='1' gradientTransform='matrix(2.26081 11.29435 -46.55565 9.31913 -4.355 1.873)' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%233771C8'/%3E%3Cstop offset='.128' stop-color='%233771C8'/%3E%3Cstop offset='1' stop-color='%2360F' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E");
}

.expert-comment-box__social-link--linkedin {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' fill='none'%3E%3Cg fill-rule='evenodd' clip-path='url(%23a)' clip-rule='evenodd'%3E%3Cpath fill='%23007EBB' d='M2.889 26H23.11A2.889 2.889 0 0 0 26 23.111V2.89A2.889 2.889 0 0 0 23.111 0H2.89A2.889 2.889 0 0 0 0 2.889V23.11A2.889 2.889 0 0 0 2.889 26Z'/%3E%3Cpath fill='%23fff' d='M22.39 22.389h-3.86v-6.572c0-1.801-.684-2.808-2.11-2.808-1.551 0-2.362 1.048-2.362 2.808v6.572H10.34V9.87h3.718v1.687s1.118-2.07 3.775-2.07c2.655 0 4.556 1.622 4.556 4.976v7.926ZM5.903 8.23a2.301 2.301 0 0 1-2.293-2.31 2.301 2.301 0 0 1 2.293-2.31 2.3 2.3 0 0 1 2.292 2.31 2.3 2.3 0 0 1-2.292 2.31ZM3.984 22.39h3.877V9.87H3.984V22.39Z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Crect width='26' height='26' fill='%23fff' rx='5'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

.expert-comment-box__social-link--vkontakte {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' fill='none'%3E%3Cg clip-path='url(%23a)'%3E%3Crect width='26' height='26' fill='%232787F5' rx='5'/%3E%3Cpath fill='%232787F5' d='M0 12.458c0-5.873 0-8.81 1.824-10.634C3.65 0 6.585 0 12.458 0h1.084c5.873 0 8.809 0 10.633 1.824C26 3.65 26 6.585 26 12.458v1.084c0 5.873 0 8.809-1.825 10.633C22.351 26 19.416 26 13.543 26h-1.084c-5.873 0-8.809 0-10.633-1.825C0 22.351 0 19.416 0 13.543v-1.084Z'/%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M5.855 7.126H3.591c-.647 0-.777.305-.777.64 0 .6.768 3.574 3.575 7.507 1.871 2.686 4.507 4.142 6.906 4.142 1.44 0 1.617-.323 1.617-.88v-2.03c0-.647.137-.776.592-.776.336 0 .912.168 2.255 1.463 1.536 1.535 1.789 2.223 2.652 2.223h2.265c.647 0 .97-.323.784-.961-.205-.636-.938-1.56-1.91-2.653-.528-.624-1.32-1.295-1.56-1.631-.335-.432-.24-.624 0-1.007 0 0 2.76-3.886 3.047-5.205.144-.48 0-.832-.685-.832h-2.264c-.576 0-.841.305-.985.64 0 0-1.152 2.806-2.783 4.63-.528.527-.768.695-1.055.695-.144 0-.353-.168-.353-.648V7.958c0-.575-.167-.832-.647-.832h-3.558c-.36 0-.576.267-.576.52 0 .546.816.672.9 2.207v3.334c0 .73-.132.863-.42.863-.768 0-2.635-2.819-3.743-6.044-.216-.627-.434-.88-1.013-.88Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Crect width='26' height='26' fill='%23fff' rx='5'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

.expert-comment-box__social-link--telegram {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' fill='none'%3E%3Crect width='26' height='26' fill='%23039BE5' rx='5'/%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23039BE5' d='M13 26c7.18 0 13-5.82 13-13S20.18 0 13 0 0 5.82 0 13s5.82 13 13 13Z'/%3E%3Cpath fill='%23fff' d='M3.809 11.639 20.326 5.27c.767-.277 1.437.187 1.188 1.347l.002-.002-2.813 13.25c-.208.94-.767 1.168-1.547.725l-4.283-3.156-2.066 1.99c-.229.228-.421.421-.864.421l.304-4.359 7.938-7.17c.345-.305-.077-.476-.533-.173l-9.809 6.176-4.229-1.32c-.917-.29-.937-.918.195-1.36Z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h26v26H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

/*** Responsive ***/

@media (min-width: 768px) {

    .expert-comment-box {
        display: flex;
        flex-direction: column-reverse;
        padding: 20px 15px 15px;
    }

    .expert-comment-box__user {
        max-width: calc(100% - 220px);
    }

    .expert-comment-box__comment {
        margin: 0 0 20px;
        max-width: calc(100% - 220px);
    }

    .expert-comment-box__bg-image {
        width: 284px;
        height: 284px;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        opacity: 1;
    }

    .expert-comment-box--drc .expert-comment-box__bg-image {
        width: 495px;
        height: 100%;
        right: 0;
        top: 0;
        bottom: initial;
        transform: initial;
        opacity: 1;
    }

    .expert-comment-box__user-site {
        display: flex;
        align-items: center;
    }

    .expert-comment-box__social {
        margin: 0 0 0 10px;
    }

    .expert-comment-box__social--mobile {
        display: none;
    }

    .expert-comment-box__social--desktop {
        display: flex;
    }
}

@media (min-width: 1280px) {
    .expert-comment-box {
        padding: 20px 15px 35px;
    }
}