:root {
    --color1: #FF6F61;
    --color2: #4E88CC;
    --color3: #ffffff;
    --danger: #d53343;
}
#qa-answer-box {
    display: none;
}
#qa-form .form-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -0.75rem;
    margin-left: -0.75rem;
  /*   margin-bottom: clamp(1.5rem, 2vw, 2rem); */
}
#qa-form .form-operations {
    justify-content: center;
}
#qa-form label:not(.error){
    font-size: 16px;
    color: #3D3D3D;
    line-height: 34px;
    margin-bottom: 8px !important;
    position: relative;
}
#qa-form label:not(.error):before{
    content: "\e912";
    font-family: 'icomoon';
    color: #FF6F61;
    font-size: 14px;
    margin-left: 8px;
    vertical-align: middle;
}
#qa-form textarea {
    min-height: 12.5rem;
}
#qa-form-wrapper label.error {
    color: var(--danger);
    font-size: 10px;
    line-height: 1;
    position: absolute;
    bottom: 6px;
}
.qa-list {
    margin-top: clamp(3rem, 2vw, 4rem);
}
.qa-list .children {
    padding-right: clamp(1.875rem, 8vw, 6.25rem);
}
.qa-list .children .qa-item-wrap {
    position: relative;
}
.qa-list .children .qa-item-wrap:before {
    content: "";
    width: clamp(1rem, 2vw, 1.5rem);
    height: clamp(1rem, 2vw, 1.5rem);
    background-color: var(--color1);
    mask-image: url(data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22100%22%20height%3D%22100%22%20viewBox%3D%220%200%201024%201024%22%3E%3Cg%20id%3D%22icomoon-ignore%22%3E%3C/g%3E%3Cpath%20d%3D%22M854.842%20378.499c13.951-13.951%2013.951-36.569%200-50.518l-317.521-317.518c-13.951-13.949-36.563-13.949-50.514%200l-317.521%20317.518c-13.951%2013.951-13.951%2036.569%200%2050.518s36.566%2013.951%2050.517%200l256.541-256.541v548.8c0%2047.204-14.455%20118.808-56.773%20177.581-41.003%2056.948-109.659%20104.219-225.026%20104.219-19.728%200-35.721%2015.994-35.721%2035.721s15.993%2035.721%2035.721%2035.721c138.648%200%20228.756-58.574%20283.004-133.921%2052.939-73.523%2070.236-160.682%2070.236-219.323v-548.8l256.54%20256.541c13.951%2013.951%2036.569%2013.951%2050.518%200z%22%3E%3C/path%3E%3C/svg%3E);
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    position: absolute;
    left: calc(100% + 0.75rem);
    top: 2.625rem;
}
.qa-item {
    background: var(--color3);
    padding: clamp(0.75rem, 2vw, 1.5rem);
    border-radius: 0.75rem;
    margin-bottom: 2rem;
    position: relative;
    box-shadow: 0 0.5rem 0.5625rem 0.0625rem #00000012;
}
.qa-item .answer-link {
    position: absolute;
    left: clamp(0.75rem, 2vw, 1.5rem);
    bottom: clamp(0.5rem, 2vw, 1rem);
    font-size: 0.875rem;
    background: var(--color1);
    cursor: pointer;
    transition: 0.4s;
    line-height: 1;
    color: #fff;
    padding: 10px;
    display: flex;
    align-items: center;
    border-radius: 12px;
    padding-left: 0.75rem;
    border: 1px solid var(--color1);
}
.qa-item .answer-link:hover {
    background: transparent;
    transition: 0.4s;
    color: var(--color1);
}
.qa-item .answer-link:before {
    content: "";
    width: 0.75rem;
    height: 0.75rem;
    background-color: #fff;
    mask-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjE4IiB3aWR0aD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEuMTI1IDEuMTI1IiB4bWw6c3BhY2U9InByZXNlcnZlIiB0cmFuc2Zvcm09InNjYWxlKC0xIDEpIj48cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNLjM1LjkxOWEuMDIyLjAyMiAwIDAgMCAuMDMyIDBMLjcxOS41ODJhLjAyMi4wMjIgMCAwIDAgMC0uMDMyTC4zODIuMjEzQS4wMjIuMDIyIDAgMSAwIC4zNS4yNDVsLjMyMi4zMjJMLjM1Ljg4OWEuMDIyLjAyMiAwIDAgMCAwIC4wMzIiLz48L3N2Zz4=);
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: 0.4s;
}
.qa-item .answer-link:hover:before {
    background-color: var(--color1);
    transition: 0.4s;
}
.qa-item .head {
    background: #FFE2DF;
    padding: 0.75rem;
    border-radius: 1rem;
    display: flex;
    margin-bottom: 1rem;
    justify-content: space-between;
}
#qa-answer-box .cancel {
    float: left;
}
#qa-form-wrapper .alert {
    margin-top: 1rem;
    text-align: center;
    padding: 0;
    font-size: 12px;
    border-radius: 12px;
	color:#fff;
}
#qa-answer-box {
    background: #eee;
    padding: 0.75rem 1.5rem;
    border-radius: 1rem;
    font-size: 0.75rem !important;
    margin-bottom: 1.5rem;
}
#qa-answer-box .title {
    font-size: 0.875rem;
}
.qa-item .time {
    direction: ltr;
    font-size: 12px;
    position: relative;
    background: #fff;
    padding: 10px 13px;
    display: flex;
    align-items: center;
    line-height: 1;
    border-radius: 14px;
    gap: 8px;
}
.qa-item .time:after {
    content: "";
    width: clamp(0.75rem, 2vw, 1rem);
    height: clamp(0.75rem, 2vw, 1rem);
    background-color: var(--color1);
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    transition: 0.4s;
    mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAwLjcyIDAuNzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTS42Ni4wNjhILjU2MlYuMDIyYS4wMjIuMDIyIDAgMCAwLS4wNDUgMHYuMDQ2SC4zODJWLjAyMmEuMDIyLjAyMiAwIDAgMC0uMDQ1IDB2LjA0NkguMjAyVi4wMjJhLjAyMi4wMjIgMCAwIDAtLjA0NSAwdi4wNDZILjA2YS4wNi4wNiAwIDAgMC0uMDYuMDZWLjY2YS4wNi4wNiAwIDAgMCAuMDYuMDZoLjZBLjA2LjA2IDAgMCAwIC43Mi42NlYuMTI3YS4wNi4wNiAwIDAgMC0uMDYtLjA2TS42NzUuNjZBLjAxNS4wMTUgMCAwIDEgLjY2LjY3NWgtLjZBLjAxNS4wMTUgMCAwIDEgLjA0NS42NlYuMTI4QS4wMTUuMDE1IDAgMCAxIC4wNi4xMTNoLjA5OHYuMDQ1YS4wMjIuMDIyIDAgMCAwIC4wNDUgMFYuMTEzaC4xMzV2LjA0NWEuMDIyLjAyMiAwIDAgMCAuMDQ1IDBWLjExM2guMTM1di4wNDVhLjAyMi4wMjIgMCAwIDAgLjA0NSAwVi4xMTNILjY2YS4wMTUuMDE1IDAgMCAxIC4wMTUuMDE1eiIvPjxwYXRoIGQ9Ik0uMTU4LjI3aC4wOXYuMDY4aC0uMDl6bTAgLjExM2guMDlWLjQ1aC0uMDl6bTAgLjExMmguMDl2LjA2OGgtLjA5em0uMTU3IDBoLjA5di4wNjhoLS4wOXptMC0uMTEyaC4wOVYuNDVoLS4wOXptMC0uMTEzaC4wOXYuMDY4aC0uMDl6bS4xNTcuMjI1aC4wOXYuMDY4aC0uMDl6bTAtLjExMmguMDlWLjQ1aC0uMDl6bTAtLjExM2guMDl2LjA2OGgtLjA5eiIvPjwvc3ZnPg==);
    display: inline-block;
    margin-top: -5px;
}
.qa-item .qa-like-dislike {
    position: absolute;
    left: 90px;
    bottom: clamp(0.375rem, 2vw, 1rem);
    line-height: 1;
    display: inline-flex;
    gap: 0.375rem;
}
.qa-item .qa-like-dislike .qa-like-dislike-trigger {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    width: 1.5rem;
    height: 1.25rem;
}
.qa-item .qa-like-dislike .qa-like-dislike-trigger:before {
    content: "";
    width: clamp(0.75rem, 2vw, 1rem);
    height: clamp(0.75rem, 2vw, 1rem);
    background-color: #666666;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    position: absolute;
    left: 0;
    top: 0;
    transition: 0.4s;
}
.qa-item .qa-like-dislike .qa-like-dislike-trigger:hover:before {
    background-color: var(--color1);
    transition: 0.4s;
}
.qa-like-trigger:before {
    mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTYuMjggMjIuMWgtMy44Yy0uNTYgMC0xLjc4LS4xNy0yLjQzLS44MmwtMy4wMy0yLjM0LjkyLTEuMTkgMy4xIDIuNGMuMjUuMjQuODguNDQgMS40NC40NGgzLjhjLjkgMCAxLjg3LS43MiAyLjA3LTEuNTNsMi40Mi03LjM1Yy4xNi0uNDQuMTMtLjg0LS4wOC0xLjEzLS4yMi0uMzEtLjYyLS40OS0xLjExLS40OWgtNGMtLjUyIDAtMS0uMjItMS4zMy0uNi0uMzQtLjM5LS40OS0uOTEtLjQxLTEuNDVsLjUtMy4yMWMuMTItLjU2LS4yNi0xLjE5LS44LTEuMzctLjQ5LS4xOC0xLjEyLjA4LTEuMzQuNGwtNC4xIDYuMS0xLjI0LS44MyA0LjEtNi4xYy42My0uOTQgMi4wMS0xLjM5IDMuMDktLjk4IDEuMjUuNDEgMi4wNSAxLjc5IDEuNzcgMy4wN2wtLjQ5IDMuMTVjLS4wMS4wNy0uMDEuMTcuMDYuMjUuMDUuMDUuMTIuMDguMi4wOGg0Yy45OCAwIDEuODMuNDEgMi4zMyAxLjEyLjQ5LjY5LjU5IDEuNi4yNyAyLjQ4bC0yLjM5IDcuMjhjLS4zNyAxLjQ1LTEuOTEgMi42Mi0zLjUyIDIuNjIiIGZpbGw9IiMyOTJEMzIiLz48cGF0aCBkPSJNNS4zOCAyMWgtMWMtMS44NSAwLTIuNzUtLjg3LTIuNzUtMi42NXYtOS44YzAtMS43OC45LTIuNjUgMi43NS0yLjY1aDFjMS44NSAwIDIuNzUuODcgMi43NSAyLjY1djkuOGMwIDEuNzgtLjkgMi42NS0yLjc1IDIuNjVtLTEtMTMuNmMtMS4wOSAwLTEuMjUuMjYtMS4yNSAxLjE1djkuOGMwIC44OS4xNiAxLjE1IDEuMjUgMS4xNWgxYzEuMDkgMCAxLjI1LS4yNiAxLjI1LTEuMTV2LTkuOGMwLS44OS0uMTYtMS4xNS0xLjI1LTEuMTV6IiBmaWxsPSIjMjkyRDMyIi8+PC9zdmc+);
    background-color: green !important;
}
.qa-dislike-trigger:before {
    mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAuOCAyMi4xYy0uMjkgMC0uNTgtLjA1LS44NS0uMTUtMS4yNS0uNDEtMi4wNS0xLjc5LTEuNzctMy4wN2wuNDktMy4xNWMuMDEtLjA3LjAxLS4xNy0uMDYtLjI1YS4yOC4yOCAwIDAgMC0uMi0uMDhoLTRjLS45OCAwLTEuODMtLjQxLTIuMzMtMS4xMi0uNDktLjY5LS41OS0xLjYtLjI3LTIuNDhMNC4yIDQuNTJDNC41NyAzLjA3IDYuMTIgMS45IDcuNzIgMS45aDMuOGMuNTYgMCAxLjc4LjE3IDIuNDMuODJsMy4wMyAyLjM0LS45MiAxLjE5LTMuMS0yLjRjLS4yNS0uMjUtLjg4LS40NS0xLjQ0LS40NWgtMy44Yy0uOSAwLTEuODcuNzItMi4wNyAxLjUzbC0yLjQyIDcuMzVjLS4xNi40NC0uMTMuODQuMDggMS4xMy4yMi4zMS42Mi40OSAxLjExLjQ5aDRjLjUyIDAgMSAuMjIgMS4zMy42LjM0LjM5LjQ5LjkxLjQxIDEuNDVsLS41IDMuMjFjLS4xMi41Ni4yNiAxLjE5LjggMS4zNy40OC4xOCAxLjEyLS4wOCAxLjM0LS40bDQuMS02LjEgMS4yNC44NC00LjEgNi4xYy0uNDcuNy0xLjM2IDEuMTMtMi4yNCAxLjEzIiBmaWxsPSIjMjkyRDMyIi8+PHBhdGggZD0iTTE5LjYyIDE4LjFoLTFjLTEuODUgMC0yLjc1LS44Ny0yLjc1LTIuNjV2LTkuOGMwLTEuNzguOS0yLjY1IDIuNzUtMi42NWgxYzEuODUgMCAyLjc1Ljg3IDIuNzUgMi42NXY5LjhjMCAxLjc4LS45IDIuNjUtMi43NSAyLjY1bS0xLTEzLjZjLTEuMDkgMC0xLjI1LjI2LTEuMjUgMS4xNXY5LjhjMCAuODkuMTYgMS4xNSAxLjI1IDEuMTVoMWMxLjA5IDAgMS4yNS0uMjYgMS4yNS0xLjE1di05LjhjMC0uODktLjE2LTEuMTUtMS4yNS0xLjE1eiIgZmlsbD0iIzI5MkQzMiIvPjwvc3ZnPg==);
    background-color: red !important;
}
.qa-item .qa-like-dislike .qa-like-dislike-trigger path {
    fill: var(--color1);
    transition: 0.4s;
}
.qa-item .qa-like-dislike .qa-like-dislike-trigger:hover path {
    fill: var(--color2);
    transition: 0.4s;
}
.qa-item .body {
    margin-bottom: 2rem;
}
.qa-item .body .description {
    color: #313131;
    font-size: 0.875rem;
}
.qa-item .head .name {
    display: inline-flex;
    gap: 0.5rem;
    font-size: clamp(0.75rem, 2vw, 1rem);
    position: relative;
}
.qa-item .head .name svg {
    background: var(--color2);
    width: 2rem;
    height: 2rem;
    padding: 0.375rem;
    border-radius: 50%;
}
