[REQUEST] – Please use custom icons font instead of whole font-awesome library

I fully agree, and it is something I have been asking about. Some of the icons have already been converted to SVG, and I hope the team moves away from the heavy FontAwesome library into tiny inline SVG code instead…

@mehranattari and @megaz,
We keep Font Awesome because wpDiscuz has Custom Comment Form builder. Each Custom Field of the comment form has its own FA icon, it shows you FA Icons lib and you select icon for a custom field. This is almost impossible with the SVG.

We may consider to disable FA lib for regular users and only enable it when users use custom comment fields with custom icons in the future.

@gvectors-team, just because of this feature, every single one of your plugin users must load a gigantic FontAwesome library. This is slowing down page load time, reduces server response time and causes all kinds of Google PageSpeed ranking drops.

This is not a good idea. Please remove this feature, and replace FontAwesome with inline SVG icons. This will make your plugin load so much faster, and will make many users happy!

I bet 99% of your users does not care about being able to replace an icon from the FontAwesome library. If you don’t believe me, feel free to ask the community…

Thank you @megaz,
This is already taken under consideration.

Very impressed with the plugin.
However I do very much agree with the presented issue of unnecessary excessive page weight from font awesome. Especially as activating it results in 3 font weights being added!
If you remain attached to fontawesome for the plugin, perhaps you could offer svg icons as an option for this others. This is becoming standard amongst speed/ weight conscious plugins.

• This reply was modified 4 years, 5 months ago by Jason Chong.

Hi @dantianhealth,

Currently, it works in the following way.
In case if you have created a custom field and at least one field has Field icon, then we load the full Load Font Awesome css lib. Another case(in case you have not set the field icon) we call lite version of the Load Font Awesome css lib. Screenshot below:

View post on imgur.com

@gvectorssupportmember

Currently I have no custom fields and have the following font awesome files being loaded

fa-regular-400.woff2 13.3 KB
fa-solid-900.woff2 77.6 KB
fa.min.css?ver=7.0.3 2.2 KB

So I correct myself that I see 2 font weights plus the minified CSS. 93KB in total
I’m sure SVG options would reduce this dramatically!
I very much hope you will take this feedback onboard to improve your great plugin.

fa.min.css?ver=7.0.3 2.2 KB

We meant this. It is optimized from 70KB to 2.2KB

And yes, we keep improving this and probably we’ll use the SVG solution to avoid .woff2 files.

Has there been any progress to walking away from the entire font-awesome library?

Not sure how this is resolved when I am still finding 3 fa files loading at 150kb!
I have managed to successfully create a subset that comes in at 3.7KB for the icons required, I really hope you are going to address this!

Ideally, no external fonts should be loaded – adding a file to load decreases site speed and puts more unnecessary load. Instead, load SVG into CSS and serve it that way. It will be much faster and very lightweight in comparison.

I would love to see a truly minimal CSS approach also. One that shows the bare minimum, and rest gets loaded on demand

@megaz I agree, I am just creating a temporary quick fix solution until they decide to make that shift

OK, for anyone who is struggling with this, I created CSS for the most important icons. Place this into your theme default style.css, and remove all styling from WPDiscuz, do not load Fontawesome.

/* WpDiscuz & FontAwesome */
.fas {
        width: 15px;
        height: 15px;
}

.far {
        width: 10px;
        height: 10px;
}

.fas, .far {
        display: inline-block;
        background-position: center;
        background-repeat: no-repeat;
}

.fa-clock {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z'/%3E%3C/svg%3E");
}

.fa-thumbtack {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg' xmlns:xlink='https://www.w3.org/1999/xlink' aria-hidden='true' focusable='false' style='-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);' preserveAspectRatio='xMidYMid meet' viewBox='0 0 1152 1664'%3E%3Cpath d='M480 736V288q0-14-9-23t-23-9t-23 9t-9 23v448q0 14 9 23t23 9t23-9t9-23zm672 352q0 26-19 45t-45 19H659l-51 483q-2 12-10.5 20.5T577 1664h-1q-27 0-32-27l-76-485H64q-26 0-45-19t-19-45q0-123 78.5-221.5T256 768V256q-52 0-90-38t-38-90t38-90t90-38h640q52 0 90 38t38 90t-38 90t-90 38v512q99 0 177.5 98.5T1152 1088z'/%3E%3C/svg%3E");
}

.fa-lock {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1792 1792' xmlns='https://www.w3.org/2000/svg'%3E%3Cpath d='M640 768h512v-192q0-106-75-181t-181-75-181 75-75 181v192zm832 96v576q0 40-28 68t-68 28h-960q-40 0-68-28t-28-68v-576q0-40 28-68t68-28h32v-192q0-184 132-316t316-132 316 132 132 316v192h32q40 0 68 28t28 68z'/%3E%3C/svg%3E");
}

.fa-unlock-alt {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1792 1792' xmlns='https://www.w3.org/2000/svg'%3E%3Cpath d='M1376 768q40 0 68 28t28 68v576q0 40-28 68t-68 28h-960q-40 0-68-28t-28-68v-576q0-40 28-68t68-28h32v-320q0-185 131.5-316.5t316.5-131.5 316.5 131.5 131.5 316.5q0 26-19 45t-45 19h-64q-26 0-45-19t-19-45q0-106-75-181t-181-75-181 75-75 181v320h736z'/%3E%3C/svg%3E%0A");
}

.fa-sort-down {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1792 1792' xmlns='https://www.w3.org/2000/svg'%3E%3Cpath d='M1408 1088q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z'/%3E%3C/svg%3E%0A");
}

.fa-quote-left {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1792 1792' xmlns='https://www.w3.org/2000/svg'%3E%3Cpath d='M832 960v384q0 80-56 136t-136 56h-384q-80 0-136-56t-56-136v-704q0-104 40.5-198.5t109.5-163.5 163.5-109.5 198.5-40.5h64q26 0 45 19t19 45v128q0 26-19 45t-45 19h-64q-106 0-181 75t-75 181v32q0 40 28 68t68 28h224q80 0 136 56t56 136zm896 0v384q0 80-56 136t-136 56h-384q-80 0-136-56t-56-136v-704q0-104 40.5-198.5t109.5-163.5 163.5-109.5 198.5-40.5h64q26 0 45 19t19 45v128q0 26-19 45t-45 19h-64q-106 0-181 75t-75 181v32q0 40 28 68t68 28h224q80 0 136 56t56 136z'/%3E%3C/svg%3E%0A");
}

.fa-cog {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1792 1792' xmlns='https://www.w3.org/2000/svg'%3E%3Cpath d='M1152 896q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm512-109v222q0 12-8 23t-20 13l-185 28q-19 54-39 91 35 50 107 138 10 12 10 25t-9 23q-27 37-99 108t-94 71q-12 0-26-9l-138-108q-44 23-91 38-16 136-29 186-7 28-36 28h-222q-14 0-24.5-8.5t-11.5-21.5l-28-184q-49-16-90-37l-141 107q-10 9-25 9-14 0-25-11-126-114-165-168-7-10-7-23 0-12 8-23 15-21 51-66.5t54-70.5q-27-50-41-99l-183-27q-13-2-21-12.5t-8-23.5v-222q0-12 8-23t19-13l186-28q14-46 39-92-40-57-107-138-10-12-10-24 0-10 9-23 26-36 98.5-107.5t94.5-71.5q13 0 26 10l138 107q44-23 91-38 16-136 29-186 7-28 36-28h222q14 0 24.5 8.5t11.5 21.5l28 184q49 16 90 37l142-107q9-9 24-9 13 0 25 10 129 119 165 170 7 8 7 22 0 12-8 23-15 21-51 66.5t-54 70.5q26 50 41 98l183 28q13 2 21 12.5t8 23.5z'/%3E%3C/svg%3E%0A");
}

.fa-chevron-up {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1792 1792' xmlns='https://www.w3.org/2000/svg'%3E%3Cpath d='M1683 1331l-166 165q-19 19-45 19t-45-19l-531-531-531 531q-19 19-45 19t-45-19l-166-165q-19-19-19-45.5t19-45.5l742-741q19-19 45-19t45 19l742 741q19 19 19 45.5t-19 45.5z'/%3E%3C/svg%3E%0A");
}

.fa-chevron-down {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1792 1792' xmlns='https://www.w3.org/2000/svg'%3E%3Cpath d='M1683 808l-742 741q-19 19-45 19t-45-19l-742-741q-19-19-19-45.5t19-45.5l166-165q19-19 45-19t45 19l531 531 531-531q19-19 45-19t45 19l166 165q19 19 19 45.5t-19 45.5z'/%3E%3C/svg%3E%0A");
}

.fa-comments {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1792 1792' xmlns='https://www.w3.org/2000/svg'%3E%3Cpath d='M1408 768q0 139-94 257t-256.5 186.5-353.5 68.5q-86 0-176-16-124 88-278 128-36 9-86 16h-3q-11 0-20.5-8t-11.5-21q-1-3-1-6.5t.5-6.5 2-6l2.5-5 3.5-5.5 4-5 4.5-5 4-4.5q5-6 23-25t26-29.5 22.5-29 25-38.5 20.5-44q-124-72-195-177t-71-224q0-139 94-257t256.5-186.5 353.5-68.5 353.5 68.5 256.5 186.5 94 257zm384 256q0 120-71 224.5t-195 176.5q10 24 20.5 44t25 38.5 22.5 29 26 29.5 23 25q1 1 4 4.5t4.5 5 4 5 3.5 5.5l2.5 5 2 6 .5 6.5-1 6.5q-3 14-13 22t-22 7q-50-7-86-16-154-40-278-128-90 16-176 16-271 0-472-132 58 4 88 4 161 0 309-45t264-129q125-92 192-212t67-254q0-77-23-152 129 71 204 178t75 230z'/%3E%3C/svg%3E%0A");
}

.fa-user {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1792 1792' xmlns='https://www.w3.org/2000/svg'%3E%3Cpath d='M1536 1399q0 109-62.5 187t-150.5 78h-854q-88 0-150.5-78t-62.5-187q0-85 8.5-160.5t31.5-152 58.5-131 94-89 134.5-34.5q131 128 313 128t313-128q76 0 134.5 34.5t94 89 58.5 131 31.5 152 8.5 160.5zm-256-887q0 159-112.5 271.5t-271.5 112.5-271.5-112.5-112.5-271.5 112.5-271.5 271.5-112.5 271.5 112.5 112.5 271.5z'/%3E%3C/svg%3E%0A");
}

.fa-at {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1792 1792' xmlns='https://www.w3.org/2000/svg'%3E%3Cpath d='M1100 775q0-108-53.5-169t-147.5-61q-63 0-124 30.5t-110 84.5-79.5 137-30.5 180q0 112 53.5 173t150.5 61q96 0 176-66.5t122.5-166 42.5-203.5zm564 121q0 111-37 197t-98.5 135-131.5 74.5-145 27.5q-6 0-15.5.5t-16.5.5q-95 0-142-53-28-33-33-83-52 66-131.5 110t-173.5 44q-161 0-249.5-95.5t-88.5-269.5q0-157 66-290t179-210.5 246-77.5q87 0 155 35.5t106 99.5l2-19 11-56q1-6 5.5-12t9.5-6h118q5 0 13 11 5 5 3 16l-120 614q-5 24-5 48 0 39 12.5 52t44.5 13q28-1 57-5.5t73-24 77-50 57-89.5 24-137q0-292-174-466t-466-174q-130 0-248.5 51t-204 136.5-136.5 204-51 248.5 51 248.5 136.5 204 204 136.5 248.5 51q228 0 405-144 11-9 24-8t21 12l41 49q8 12 7 24-2 13-12 22-102 83-227.5 128t-258.5 45q-156 0-298-61t-245-164-164-245-61-298 61-298 164-245 245-164 298-61q344 0 556 212t212 556z'/%3E%3C/svg%3E%0A");
}

And if you want a relatively lightweight CSS file for WpDiscuz (38K total), which takes into account the above style changes, remove the style.css from wpdiscuz/themes/default folder, and replace it with this:

/* wpDiscuz CSS Style */
#comments{max-width: 1100px; margin: 50px auto; color: #333333; font-style: normal; }
#comments p, #respond p{ float: none!important;}
#wpdcom{max-width:750px; padding:0; margin:7px auto 15px auto;}
#wpdcom *{box-sizing:border-box; line-height: initial;}
#wpdcom i{margin:0;}
#comments #wpdcom span, #respond #wpdcom span, #wpdcom span{display: inline;letter-spacing: inherit;text-transform: none;font-size: 1em;}
#wpdcom form{margin: 0px; padding: 0px; border: none; background: none;}
#wpdcom input:required {box-shadow: 0px 0px 1px #555;}
#wpdcom svg{display:inline;}
#wpdcom .wpd-cursor-pointer{cursor: pointer;}
#wpdcom .avatar{padding:0px; margin:0 auto; float:none; display:inline; height:auto; border:none; border-radius:0%; box-shadow: none; }
#wpdcom span.current{color:#fff}
#wpdcom .wc-label a:focus{outline:0}
#wpdcom .wpdiscuz-hidden{display:none}
#wpdcom .wpd-clear, #wpdcom .clearfix, .wpdiscuz_top_clearing, .wpdiscuz_clear{clear:both}  .wpdiscuz_clear_right{clear:right}  .wpdiscuz_clear_left{clear:left}
#wpdcom .wpd-space{flex-grow: 1;}
#wpdcom .wpd-hidden{visibility: hidden; opacity:0; transition: visibility 0s, opacity 0.5s linear;}
#wpdcom .wpd-up{color: #009149 !important;}
#wpdcom .wpd-up svg{fill: #009149!important;}
#wpdcom .wpd-down{color: #fc5844!important;}
#wpdcom .wpd-down svg{fill: #fc5844!important;}
#wpdcom .wpd-reply{margin-left:25px}
#wpdcom .wpd-reply.wpd_comment_level-2{margin-left:70px}
#wpdcom.wpd-layout-2 .wpd-reply{margin-left:40px}
#wpdcom.wpd-layout-2 .wpd-reply.wpd_comment_level-2{margin-left:28px}
#wpdcom .wpdlb{clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;}

/* Tooltip */
[wpd-tooltip]{position:relative;}
[wpd-tooltip]::before {content: "";position: absolute;top:-8px;left:50%;transform: translateX(-50%);border-width: 7px 7px 0 7px;border-style: solid;border-color: #555555 transparent transparent transparent;z-index: 100;opacity:0;}
[wpd-tooltip]::after {content: attr(wpd-tooltip); position: absolute;left:50%;top:-8px;transform: translateX(-50%)   translateY(-100%);background: #555555;text-align: center;color: #fff;padding:8px 10px;font-size: 11px; line-height:1.5; min-width: 6vw; border-width:0; border-radius: 4px;pointer-events: none;z-index: 99;opacity:0;text-transform: none;}
[wpd-tooltip]:hover::after,[wpd-tooltip]:hover::before {opacity: 1;transition: all .4s ease-in-out;}
[wpd-tooltip-size='small']::after{min-width: 5vw;}
[wpd-tooltip-size='medium']::after{min-width: 10vw;}
[wpd-tooltip-size='long']::after{min-width: 14vw;}
[wpd-tooltip-position='left']::before{left:0%;top:50%;margin-left:-11px; transform:translatey(-50%) rotate(-90deg)}
[wpd-tooltip-position='top']::before{left:50%;}
[wpd-tooltip-position='bottom']::before{top:100%;margin-top:8px;transform: translateX(-50%) translatey(-100%) rotate(-180deg)}
[wpd-tooltip-position='right']::before{left:100%;top:50%;margin-left:0px;transform:translatey(-50%) rotate(90deg)}
[wpd-tooltip-position='left']::after{left:0%;top:50%;margin-left:-8px;transform: translateX(-100%)   translateY(-50%);}
[wpd-tooltip-position='top']::after{left:50%;}
[wpd-tooltip-position='bottom']::after{top:100%;margin-top:8px;transform: translateX(-50%) translateY(0%);}
[wpd-tooltip-position='right']::after{left:100%;top:50%;margin-left:9px;transform: translateX(0%)   translateY(-50%);}

/* Form Head */
#wpdcom .wpd-form-head{border-bottom: 1px solid #cccccc; padding: 7px 2px 9px 2px; margin-top: 20px; margin-bottom: 5px; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between;}
#wpdcom .wpd-sbs-toggle{color: #666666; font-size: 14px; line-height: 20px; cursor: pointer;}
#wpdcom .wpd-sbs-toggle i.fa-envelope{ font-size: 15px; margin-right: 4px; }
#wpdcom .wpd-sbs-toggle i.fa-caret-down{ font-size: 16px; margin-left: 4px; color: #666666;}
#wpdcom .wpd-sbs-toggle .wpd-sbs-title{ font-size: 15px;}
#wpdcom .wpd-auth{display: flex; flex-direction: row; justify-content: flex-end;}
#wpdcom .wpd-auth .wpd-sep{border-right: 1px #cccccc solid; margin:0 12px; display: inline;}
#wpdcom .wpd-auth .wpd-login{font-size: 14px; line-height: 20px;}
#wpdcom .wpd-auth .wpd-login i{margin-right: 2px;}
#wpdcom .wpd-auth .wpd-login a{color: #3272bf; text-decoration: none;}
#wpdcom .wpd-auth .wpd-login a:hover{color: #0d3e81;}

/* Comment Form */
#wpdcom .wpd-form-wrap{padding-bottom: 10px;}
#wpdcom .wpd-form .wpdiscuz-textarea-wrap{display: flex; flex-wrap: nowrap; flex-direction: row; justify-content:space-between; padding: 20px 0; align-items: center;}
#wpdcom .wpd-form .wpdiscuz-textarea-wrap [id^=wpd-editor-wraper]{flex-grow:1; position: relative; width: 100%;}
#wpdcom .wpd-form .wpdiscuz-textarea-wrap [id^=wpd-editor-wraper] textarea{width: 100%;}
#wpdcom .wpd-form .wpd-avatar{margin-right: 15px; border-radius: 100%; text-align: left;flex-shrink: 0; align-self: flex-start;}
#wpdcom .wpd-form .wpd-avatar img,
#wpdcom .wpd-form .wpd-avatar img.avatar{width:56px; height:56px; max-width: 56px; border-radius: 100%; border: 1px solid #cccccc; padding: 2px; background-color: #ffffff; vertical-align: middle; text-align: center;}
#wpdcom .wpd-form .wpdiscuz-textarea-wrap textarea{ height: 54px ; border-radius: 5px; border: 1px solid #cccccc; width: 100%; padding: 10px 15px; font-size: 14px; box-shadow: inset 1px 1px 8px rgba(0, 0, 0, 0.1); font-family: inherit; outline: none; -webkit-transition: .18s ease-out; -moz-transition: .18s ease-out; -o-transition: .18s ease-out; transition: .18s ease-out;resize: none;}
#wpdcom .wpd-form .wpdiscuz-textarea-wrap textarea:hover {box-shadow: inset 1px 2px 8px rgba(0, 0, 0, 0.02);}
#wpdcom .wpd-form .wpdiscuz-textarea-wrap textarea::-moz-placeholder { line-height:28px; color: #666666; font-size: 16px;}
#wpdcom .wpd-form .wpdiscuz-textarea-wrap textarea::-webkit-input-placeholder {line-height:28px; color: #666666; font-size: 16px;}
#wpdcom .wpd-form .wpdiscuz-textarea-wrap textarea:-ms-input-placeholder {line-height:28px; color: #666666; font-size: 16px;}
#wpdcom .wpdiscuz-edit-form-wrap {margin-bottom: 15px; margin-top: 10px; position: relative;}
#wpdcom .wpdiscuz-edit-form-wrap table{  border: none; margin: 15px 0px;}
#wpdcom .wpdiscuz-edit-form-wrap table td{ border: none; padding: 1px 0px; border-bottom: 1px dashed #cccccc;}
#wpdcom .wpdiscuz-edit-form-wrap table td label{font-size: 13px; color: #666666;display: inline; line-height: 22px; margin-right: 20px; vertical-align: text-bottom;}
#wpdcom .wpdiscuz-edit-form-wrap .wc_save_wrap{text-align: right; margin-top: 10px;}
#wpdcom .wpdiscuz-edit-form-wrap .wc_save_wrap .wc_cancel_edit{margin: 0px 10px;}
#wpdcom .wpd-form.wpd-secondary-form-wrapper{margin-bottom: 25px;}
#wpdcom .wpd-form.wpd-secondary-form-wrapper .wpdiscuz-textarea-wrap{padding-top: 10px;}
#wpdcom .wpd-form-wrap .wpd-login-to-comment{text-align: center;font-size: 16px;padding: 15px 0 0 0;}
#wpdcom .wpd-form .wpdiscuz-textarea-wrap{padding-bottom: 10px;}
#wpdcom .wpd-form .wpdiscuz-textarea-wrap.wpd-txt{flex-wrap: wrap;}
#wpdcom .wpd-form .wpdiscuz-textarea-wrap.wpd-txt .wpd-avatar{flex-basis: 69px; margin-right: 0;}
#wpdcom .wpd-form .wpdiscuz-textarea-wrap.wpd-txt .wpd-textarea-wrap{flex-basis: calc( 100% - 70px );}
#wpdcom .wpd-form .wpdiscuz-textarea-wrap.wpd-txt .wpd-textarea-wrap .quicktags-toolbar{ width: 100%; margin-bottom: 1px;}
#wpdcom .wpd-form .wpdiscuz-textarea-wrap.wpd-txt .wpd-textarea-wrap textarea{width: 100%;}
#wpdcom .wpd-form .wpdiscuz-textarea-wrap.wpd-txt .wmu-upload-wrap {flex-basis: 100%;text-align: right; margin-top: 3px;}
#wpdcom .wpd-form .wpdiscuz-textarea-wrap.wpd-txt .wmu-upload-wrap i{color: #888; font-size: 18px;}
#wpdcom .wpd-form .wpdiscuz-textarea-wrap.wpd-txt [wpd-tooltip]::after{left:auto; margin-left: -35px;}
#wpdcom .wpd-form .wpdiscuz-textarea-wrap.wpd-txt [wpd-tooltip]::before{right: 25px; left:auto;}
#wpdcom .wpd-form .wpdiscuz-textarea-wrap.wpd-txt .quicktags-toolbar .ed_button {opacity: 0.8; box-shadow:none; background: #eeeeee; color: #666; font-size: 13px; padding: 1px 12px; margin: 2px 1px; display: inline-block; border-radius: 0; line-height: 20px;}
#wpdcom .wpd-form .wpdiscuz-textarea-wrap.wpd-txt .quicktags-toolbar .ed_button:hover{opacity: 1;}

/* COMMENT FORM | BUTTONS */
#wpdcom input[type="button"],
#wpdcom input[type="reset"],
#wpdcom input[type="submit"],
#wpdcom button{margin:inherit;}
#wpdcom .wc-field-submit input[type="submit"]{margin-left: 2%;}
#wpdcom .wpd_label, #wpdcom .wpd_label{margin:1px 0px 5px 0px; padding: 0px;display:inline-block;}
#wpdcom .wpd_label, #wpdcom .wpd_label span{display: inline-block}
#wpdcom .wpd_label input[type="checkbox"].wpd_label__checkbox{display:none; }
#wpdcom .wpd_label__checkbox { display: none; }
#wpdcom .wpd_label__check { display: inline-block; border: 0px; border-radius: 0; vertical-align: middle; cursor: pointer; text-align: center; margin:0px 3px 0px 0px; }
#wpdcom .wpd_label__check i.wpdicon{font-size: 15px; line-height: 20px; padding: 4px 5px; width: 32px; margin: 0px; }
#wpdcom .wpd_label__check i.wpdicon-on{display: none;}
#wpdcom .wpd_label__check i.wpdicon-off{display: inline-block; color: #aaaaaa; border: 1px solid #dddddd; }
#wpdcom .wpd_label__checkbox:checked + .wpd_label__text .wpd_label__check .wpdicon-on{display: inline-block; }
#wpdcom .wpd_label__checkbox:checked + .wpd_label__text .wpd_label__check .wpdicon-off{display:none; }
#wpdcom .wpd_label__check i.wpdicon-off.fa-unlock-alt, #wpdcom .wpd_label__check i.wpdicon-on.fa-lock{ font-size: 15px; }
#wpdcom.wpdiscuz_unauth .wc-field-submit{padding-top: 15px;}

/* Comment Form | ROWS and COLS */
#wpdcom .wpd-form-foot{margin-left: 70px;}
#wpdcom .wpd-form-row .wpd-form-col-full{width:100%; float:none; margin:0; text-align:left; padding:0; }
#wpdcom .wpd-form-row .wpd-form-col-left{width:49%; float:left; margin:0; text-align:left; padding:0; }
#wpdcom .wpd-form-row .wpd-form-col-right{width:49%; float:right; margin:0; text-align:right; padding:0; }
#wpdcom .wpd-form-row .wpd-form-col-full .wpdiscuz-item{text-align:left; }
#wpdcom .wpd-form-row .wpd-form-col-left .wpdiscuz-item{text-align:left; }
#wpdcom .wpd-form-row .wpd-form-col-right .wpdiscuz-item{text-align:right; }

/* Comment Fields | FIELDS */
#wpdcom .wpdiscuz-item label.wpd-field-label{ float:none; }
#wpdcom .wpd-form-row .wpdiscuz-item{width:100%; vertical-align:baseline; padding:1px 0 7px 0; position:relative; }
#wpdcom .wpd-form-row .wpd-field{width:100%; line-height:20px; color:#777777; display:inline-block; float:none; clear:both; margin:0; box-sizing:border-box; padding-top:2%; padding-bottom: 2%; font-size:14px; border-radius:3px; vertical-align:baseline;}
#wpdcom .wpd-form-row .wpd-has-icon .wpd-field{padding-left:30px; }
#wpdcom .wpd-form-row .wpd-has-desc .wpd-field{padding-right:30px; }
#wpdcom .wpd-form-row .wpdiscuz-item .wpd-field-icon {display:inline-block; font-size:16px; line-height:16px; opacity:0.3; padding:0; margin:0px; position:absolute; top:9px; left:8px; width:20px; text-align:left; }
#wpdcom .wpd-form-row .wpdiscuz-item .wpd-field-desc{display:inline-block; font-size:16px; line-height:16px; opacity:1; margin:0px; position:absolute; top:8px; right:8px; width:20px; text-align:right; border-left:1px solid #ccc; color:#aaa; padding:0px 5px; cursor:pointer; }
#wpdcom .wpd-form-row .wpdiscuz-item.wpd-field-select .wpd-field-desc{border-left: none;}
#wpdcom .wpd-form-row .wpdiscuz-item input[type="text"],
#wpdcom .wpd-form-row .wpdiscuz-item input[type="email"],
#wpdcom .wpd-form-row .wpdiscuz-item input[type="url"],
#wpdcom .wpd-form-row .wpdiscuz-item input[type="color"],
#wpdcom .wpd-form-row .wpdiscuz-item input[type="date"],
#wpdcom .wpd-form-row .wpdiscuz-item input[type="datetime"],
#wpdcom .wpd-form-row .wpdiscuz-item input[type="datetime-local"],
#wpdcom .wpd-form-row .wpdiscuz-item input[type="month"],
#wpdcom .wpd-form-row .wpdiscuz-item input[type="number"],
#wpdcom .wpd-form-row .wpdiscuz-item input[type="time"]{height:32px;}
#wpdcom .wpd-form-row .wpdiscuz-item textarea{height:72px; padding-left: 10px;}
#wpdcom .wc-field-submit{text-align:right; padding: 1px 2px 0 0; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start;}
#wpdcom .wc-field-submit input[type="button"]{margin:1px; border:#ddd 1px solid; font-size:13px; line-height:16px; padding:6px 15px; clear:both; float:none}
#wpdcom .wpd-item-wrap{ text-align:left; }
#wpdcom .wpd-item{ text-align:left; }
#wpdcom .wpd-form-col-left .wpd-field-group .wpd-field-group-title, #wpdcom .wpd-form-col-right .wpd-field-group .wpd-field-group-title, #wpdcom .wpd-form-col-full .wpd-field-group .wpd-field-group-title{ font-size:13px; text-align:left; line-height:20px; padding: 5px 0; }
#wpdcom .wpd-form-col-left .wpd-has-desc .wpd-field-group-title, #wpdcom .wpd-form-col-right .wpd-has-desc .wpd-field-group-title, #wpdcom .wpd-form-col-full .wpd-has-desc .wpd-field-group-title{ padding-right:35px; }
#wpdcom .wpd-comment-right .wpd-top-custom-fields{ padding:5px 10px 10px 0px; }
#wpdcom .wpd-comment-right .wpd-bottom-custom-fields{ padding:5px 0px; margin-bottom:5px; margin-top: 10px;}

/* Checkbox */
#wpdcom .wpd-form-col-left div:last-of-type, #wpdcom .wpd-form-col-right div:last-of-type{ border-bottom:none; }

/* Comment Threads */
#wpdcom #wpd-threads{margin-top: 20px;}
#wpdcom .wpd-thread-head{width: 100%; border-bottom: 2px solid #cccccc; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;}
#wpdcom .wpd-thread-head .wpd-thread-info{ color:#555555; padding:5px 15px 3px 5px; font-weight: 600; margin-bottom: -2px; font-size: 14px; letter-spacing:1px; text-transform: uppercase; text-align: left; line-height: 24px;}
#wpdcom .wpd-thread-head .wpd-thread-info.wpd-reviews-tab{padding:5px 15px 0px 14px;}
#wpdcom .wpd-thread-head .wpd-thread-info .wpdtc{font-size: 15px;}
#wpdcom .wpd-thread-head .wpdiscuz-user-settings{font-size:15px; color:#777777; cursor: pointer; text-align: center; padding: 5px 10px 6px 12px; margin:0 2px -2px 2px; width: 40px; text-align: center;}
#wpdcom .wpd-thread-head .wpd-thread-filter{display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;}
#wpdcom .wpd-thread-filter .wpd-filter{font-size:16px; color:#999999; border-bottom: 2px solid #999999; cursor: pointer;text-align: center; padding: 5px 10px; margin:0 1px -2px 1px; line-height: 18px;}
#wpdcom .wpd-thread-filter .wpdf-reacted{color:#ffa600; border-bottom-color: #ffa600; width: 34px;}
#wpdcom .wpd-thread-filter .wpdf-hottest{color:#fc5844; border-bottom-color: #fc5844; width: 34px;}
#wpdcom .wpd-thread-filter .wpdf-sorting{font-size:14px; color:#777777; line-height: 18px; text-transform: capitalize; min-width: 100px; font-family: "Arial Hebrew", Arial, sans-serif;}
#wpdcom .wpd-thread-filter .wpdf-sorting i{font-size: 15px; margin-left: 6px; vertical-align: top; line-height: 14px;}
#wpdcom .wpd-thread-list .wpd-load-more-submit-wrap{display: flex; flex-direction: row; justify-content: center; padding: 10px;}

/* Comment - Default Layout (#1) */
#wpdcom .wpd-thread-list{ padding: 30px 0;}
#wpdcom .wpd-comment .wpd-comment-wrap{display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: space-between;align-items: stretch;align-content: flex-start; padding-bottom: 5px;}
#wpdcom .wpd-comment .wpd-comment-left{width: 60px; text-align: center; margin-right: 20px;}  _:-ms-lang(x), #wpdcom .wpd-comment .wpd-comment-left{width: auto;}
#wpdcom .wpd-comment .wpd-comment-right{padding-bottom: 15px; flex-grow: 1; width: calc(100% - 80px);}
#wpdcom .wpd-comment .wpd-avatar {position: relative;}
#wpdcom .wpd-comment .wpd-avatar img,
#wpdcom .wpd-comment .wpd-avatar img.avatar{width:56px; height:56px; max-width: 56px; border-radius: 100%; border: 1px solid #cccccc; padding: 2px; background-color: #ffffff; vertical-align: middle; text-align: center; float: none;}
#wpdcom .wpd-comment .wpd-avatar i{position: absolute;bottom: 1px;right: 5px; border-radius: 50%;padding: 3px;font-size: 10px;border: 2px solid #fff; width: 20px; line-height: initial!important; text-align: center;}
#wpdcom .wpd-comment .wpd-comment-label{ margin: 9px auto 2px auto; border-radius: 3px; font-size: 11px; line-height: 14px; text-align: center; width: 100%; padding: 1px 5px; cursor: default; display: flex; align-items: center; justify-content: center; flex-flow: row;}
#wpdcom .wpd-comment .wpd-comment-label span{text-overflow: ellipsis; white-space: nowrap;overflow: hidden; display: inline-block; width: 100%; padding: 0;}
#wpdcom .wpd-comment .wpd-follow-link{color:#999999; font-size: 13px; cursor: pointer; padding-left: 5px;}
#wpdcom .wpd-comment-header{ font-size: 13px; color: #999999;}
#wpdcom .wpd-comment .wpd-comment-header{padding:5px 0 5px 0; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center;}
#wpdcom .wpd-comment-header .wpd-comment-author{ font-size: 15px; font-weight: 600; text-decoration: none; letter-spacing:0.7px; margin-right: 5px;}
#wpdcom .wpd-comment .wpd-comment-header i{line-height: 1.75;}
#wpdcom .wpd-comment-date{padding:0 5px; font-size: 11px;}
#wpdcom .wpd-comment-date i{ font-size: 11px; margin-right: 4px;}
#wpdcom .wpd-comment-status{padding:0 5px;}
#wpdcom .wpd-comment-status div{display: inline-block; cursor: default;}
#wpdcom .wpd-comment-status i{ margin:0 3px;}
#wpdcom .wpd-comment-status .wpd-sticky{vertical-align: top;}
#wpdcom .wpd-comment-status .wpd-closed{color: #999999; font-size: 12px;}
#wpdcom .wpd-comment-header .wpd-comment-share{padding:0 6px; color: #aaaaaa; cursor: default;}
#wpdcom .wpd-comment-header .wpd-comment-share .wpd-tooltip-content{text-align: center;}
#wpdcom .wpd-comment-header .wpd-comment-share .wpd-tooltip-content i{ font-size: 12px; padding:0 6px; cursor: pointer;}
#wpdcom .wpd-comment-header .wpd-comment-share .wpd-tooltip-content i:hover{ color: #ffee46;}
#wpdcom .wpd-comment-header .wpd-comment-link{padding:0; cursor: pointer; font-size: 12px; color: #aaaaaa; align-self: flex-start; padding-top: 9px;}
#wpdcom .wpd-comment-header .wpd-comment-link span{margin-left: 12px}
#wpdcom .wpd-comment-text{font-size: 15px; padding:0 0 8px 0; word-break: break-word;}
#wpdcom .wpd-comment-text * {line-height: 1.6;}
#wpdcom .wpd-comment-text p{margin-right: 10px;}
#wpdcom .wpd-comment-text p:last-child{margin-bottom:0px;}
#wpdcom .wpd-comment-text ol,
#wpdcom .wpd-comment-text ul{margin: 0 0 1rem 1rem;}
#wpdcom .wpd-comment-text img,
#wpdcom .wpd-comment-text iframe,
#wpdcom .wpd-comment-text video,
#wpdcom .wpd-comment-text audio{max-width: 100% !important;}
#wpdcom .wpd-comment-text iframe{width: 480px; height: 280px;}
#wpdcom .wpd-comment-text blockquote {margin: 5px auto 5px 15px;padding: 2px 10px;font-size: 14px;}
#wpdcom .wpd-comment-text blockquote p {margin-bottom: 5px;}
#wpdcom .wpd-comment-text .wpd-inline-feedback-wrapper {font-style: italic; font-size: 15px; padding: 15px; background: #fffce1; margin-bottom: 10px; color: #777;}
#wpdcom .wpd-comment-text .wpd-inline-feedback-wrapper .wpd-inline-feedback-info{font-style: normal; font-weight: 600;}
#wpdcom .wpd-comment-text .wpd-inline-feedback-wrapper i.fa-quote-left { margin-right: 8px;font-size: 17px;color:#999797;}
#wpdcom .wpd-comment-footer{display: flex; flex-direction: row; flex-wrap: nowrap; justify-content:space-between; align-items: center; padding-top:0;}
#wpdcom .wpd-comment-footer .wpd-vote{display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; padding-right: 20px; font-size: 0;}
#wpdcom .wpd-comment-footer .wpd-vote-up,
#wpdcom .wpd-comment-footer .wpd-vote-down{ width: 16px; height: 16px; opacity:0.7; cursor: pointer;}
#wpdcom .wpd-comment-footer .wpd-vote-down.wpd-dislike-hidden{display:none!important;}
#wpdcom .wpd-comment-footer .wpd-vote-up svg,
#wpdcom .wpd-comment-footer .wpd-vote-down svg{ fill: #888888; cursor: pointer;}
#wpdcom .wpd-comment-footer .wpd-vote-result{padding:0 8px; font-size: 14px; text-align: center; color: #999999;}
#wpdcom .wpd-comment-footer .wpd-reply-button{cursor:pointer; font-size: 14px; color: #999999; white-space: nowrap;}
#wpdcom .wpd-comment-footer .wpd-reply-button i{margin-right: 6px; opacity:0.7;}
#wpdcom .wpd-comment-footer .wpd-reply-button svg{ vertical-align: middle; transform: rotate(180deg); width: 22px; height: 22px; opacity:0.7; fill: #999999; margin-right: 2px;}
@-moz-document url-prefix() { #wpdcom .wpd-comment-footer .wpd-reply-button svg{vertical-align: bottom;} }
#wpdcom .wpd-comment-footer .wpd-reply-button span{line-height: 21px; font-size: 1em;}
#wpdcom .wpd-comment-footer .wpd-vote-up:hover,
#wpdcom .wpd-comment-footer .wpd-vote-down:hover{opacity: 1;}
#wpdcom .wpd-comment-footer .wpd-reply-button:hover{color: #777777;}
#wpdcom .wpd-comment-footer .wpd-reply-button:hover svg{opacity: 1;}
#wpdcom .wpd-comment-footer .wpd-tools i{color: #aaaaaa; font-size: 14px; cursor: pointer;}
#wpdcom .wpd-comment-footer .wpd-toggle i{color: #aaaaaa; font-size: 15px; cursor: pointer;}
#wpdcom .wpd-comment-footer .wpd-toggle .wpd-view-replies{font-size: 13px!important; color:#888;margin-right: 7px;}
#wpdcom .wpd-hidden-replies .wpd-toggle.wpd-hidden:last-child{visibility: visible; opacity: 1;}
#wpdcom .wpd-comment-footer .wpd-sep{border-right: 1px #cccccc solid; margin:0 7px; width: 1px; height: 15px;}
#wpdcom .wpd-comment-right:hover .wpd-comment-footer .wpd-tool-wrap,
#wpdcom .wpd-comment-right:hover .wpd-comment-footer .wpd-sep,
#wpdcom .wpd-comment-right:hover .wpd-comment-footer .wpd-tools,
#wpdcom .wpd-comment-right:hover .wpd-comment-footer .wpd-toggle,
#wpdcom .wpd-comment-right:hover .wpd-comment-header .wpd-comment-share,
#wpdcom .wpd-comment-right:hover .wpd-comment-header .wpd-comment-link{visibility: visible; opacity: 1;}
#wpdcom .wpd-comment-right .wpd-comment-last-edited {margin: 10px 0 20px 0; font-size: 12px; color: #999; font-style: italic;}
#wpdcom .wpd-comment-right .wpd-comment-last-edited i{padding-right: 5px;}
#wpdcom .wpd-comment.wpd-reply .wpd-comment-left{width: 50px;} _:-ms-lang(x), #wpdcom .wpd-comment.wpd-reply .wpd-comment-left{width: auto;}
#wpdcom .wpd-comment.wpd-reply .wpd-avatar img,
#wpdcom .wpd-comment.wpd-reply .wpd-avatar img.avatar{width:48px; height:48px; max-width: 48px; }
#wpdcom .wpd-comment.wpd-reply .wpd-comment-label{font-size: 10px; line-height: 13px; margin:10px auto 7px auto;display: flex; align-items: center; justify-content: center; flex-flow: row;}
#wpdcom .wpd-comment.wpd-reply .wpd-follow-link{font-size: 11px;}
#wpdcom .wpd-comment.wpd-reply .wpd-comment-header .wpd-comment-author,
#wpdcom .wpd-comment.wpd-reply .wpd-comment-header .wpd-comment-author a{ font-size: 14px; margin-right: 5px;}
#wpdcom .wpd-comment .wpd-reply-to{font-size: 13px; color: #999999; font-style: italic;}
#wpdcom .wpd-comment .wpd-reply-to i{margin-right: 6px;}
#wpdcom .wpd-comment .wpd-reply-to a{text-decoration: none; opacity: 0.8; color: #0274be;}
#wpdcom .wpd-comment .wpd-reply-to a:hover{opacity: 1; color: #000000;}
#wpdcom .wpd-comment.wpd-reply .wpd-comment-footer .wpd-vote-up,
#wpdcom .wpd-comment.wpd-reply .wpd-comment-footer .wpd-vote-down{ width: 15px; height: 15px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
_:-ms-lang(x), #wpdcom .wpd-comment.wpd-reply .wpd-comment-footer .wpd-vote-up,
_:-ms-lang(x), #wpdcom .wpd-comment.wpd-reply .wpd-comment-footer .wpd-vote-down{display: -ms-flexbox;}
#wpdcom .wpd-comment.wpd-reply .wpd-comment-footer .wpd-vote-result{font-size: 13px;}
#wpdcom .wpd-comment.wpd-reply .wpd-comment-footer .wpd-reply-button{font-size: 13px;}
#wpdcom .wpd-comment.wpd-reply .wpd-comment-footer .wpd-reply-button svg{width: 20px; height: 20px;}
#wpdcom .wpd-comment.wpd-reply .wpd-comment-footer .wpd-reply-button span{line-height: 19px; font-size: 1em;}
#wpdcom .wpd-comment.wpd-reply .wpd-comment-footer .wpd-tools i{font-size: 13px;}
#wpdcom .wpd-comment.wpd-reply .wpd-comment-footer .wpd-toggle i{font-size: 14px;}
#wpdcom .wpd-comment.wpd-reply .wpd-comment-footer .wpd-sep{height: 14px;}
#wpdcom.wpd-layout-1 .wpd-comment .wpd-reply-to{margin-bottom: 6px; border-left: 1px solid #cccccc; padding: 0px 10px;}
#wpdcom.wpd-layout-1 .wpd-comment .wpd-avatar i{bottom: 0px; right: 0px;}
#wpdcom.wpd-layout-1 .wpd-new-loaded-comment > .wpd-comment-wrap > .wpd-comment-right{padding-right: 15px; padding-left: 15px;}
#wpdcom.wpd-layout-1 .wpd-comment .wpd-follow-link{margin-top: 5px;}

/* Comment - Layout #2 */
#wpdcom.wpd-layout-2 .wpd-form .wpd-form-foot{margin-left: 65px;}
#wpdcom.wpd-layout-2 .wpd-form .wpd-avatar{width: 54px; margin-right: 11px;}
#wpdcom.wpd-layout-2 .wpd-form .wpd-avatar img,
#wpdcom.wpd-layout-2 .wpd-form .wpd-avatar img.avatar{width:48px; height:48px; max-width: 48px; border-radius:0; border: none; border-bottom: 2px solid #cccccc; padding: 1px; background-color: #ffffff; vertical-align: middle; text-align: center;}
#wpdcom.wpd-layout-2 .wpd-form .wpdiscuz-textarea-wrap textarea::placeholder {line-height: 27px;font-size: 15px;}
#wpdcom.wpd-layout-2 .wpd-form .wpdiscuz-textarea-wrap textarea {height: 48px;}
#wpdcom.wpd-layout-2 .wpd-comment{margin-bottom: 20px;}
#wpdcom.wpd-layout-2 .wpd-comment .wpd-comment-header,
#wpdcom.wpd-layout-2 .wpd-comment .wpd-comment-header .wpd-user-info .wpd-uinfo-top,
#wpdcom.wpd-layout-2 .wpd-comment .wpd-comment-header .wpd-user-info .wpd-uinfo-bottom {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-end;}
#wpdcom.wpd-layout-2 .wpd-comment .wpd-comment-header .wpd-user-info{display: block; flex-grow: 1; margin-bottom: -3px;}
#wpdcom.wpd-layout-2 .wpd-comment .wpd-comment-header .wpd-user-info .wpd-uinfo-top{flex-wrap: nowrap; align-items: center;}
#wpdcom.wpd-layout-2 .wpd-comment .wpd-comment-header .wpd-comment-label{width: auto; padding: 1px 15px; }
#wpdcom.wpd-layout-2 .wpd-comment .wpd-comment-label{margin: 0px;}
#wpdcom.wpd-layout-2 .wpd-comment .wpd-avatar{padding-right: 15px;}
#wpdcom.wpd-layout-2 .wpd-comment .wpd-avatar img,
#wpdcom.wpd-layout-2 .wpd-comment .wpd-avatar img.avatar{width:48px; height:48px; max-width: 48px; border-radius:0; border: none; border-bottom: 2px solid #cccccc; padding: 1px; background-color: #ffffff; vertical-align: middle; text-align: center;}
#wpdcom.wpd-layout-2 .wpd-comment .wpd-avatar i{bottom: -2px; right: 7px;}
_:-ms-lang(x), #wpdcom.wpd-layout-2 .wpd-comment .wpd-avatar i{line-height: 10px;}
#wpdcom.wpd-layout-2 .wpd-comment .wpd-follow-link {font-size: 12px; padding-left: 2px; padding-right: 12px;}
#wpdcom.wpd-layout-2 .wpd-comment .wpd-comment-text{margin: 8px 0 5px 0;}
#wpdcom.wpd-layout-2 .wpd-comment-header .wpd-comment-date {padding:0 10px 0 0;font-size: 12px;}
#wpdcom.wpd-layout-2 .wpd-comment-header .wpd-comment-status {padding:0 10px;}
#wpdcom.wpd-layout-2 .wpd-comment-header .wpd-comment-link {margin-bottom:0; padding-top: 1px;}
#wpdcom.wpd-layout-2 .wpd-comment-header .wpd-reply-to{font-size: 12px; padding-top:2px; margin-left: 0px; font-style: normal;}
#wpdcom.wpd-layout-2 .wpd-comment-header .wpd-reply-to i{margin-right: 3px;}
#wpdcom.wpd-layout-2 .wpd-comment.wpd-reply {margin-bottom: 0;}
#wpdcom.wpd-layout-2 .wpd-comment.wpd-reply .wpd-comment-header .wpd-user-info .wpd-uinfo-top{margin-bottom: 3px;}
#wpdcom.wpd-layout-2 .wpd-comment.wpd-reply .wpd-comment-header .wpd-comment-date {padding:0 10px;}
#wpdcom.wpd-layout-2 .wpd-comment.wpd-reply .wpd-comment-label{font-size: 10px; line-height: 13px; margin:0 10px 0 0;}
#wpdcom.wpd-layout-2 .wpd-comment.wpd-reply .wpd-follow-link{margin-right: 12px; border-right: 1px solid #ccc; padding-right: 12px;}
#wpdcom.wpd-layout-2 .wpd-comment.wpd-reply .wpd-comment-wrap{margin: 0px 0px 5px 0px; background-color:#fafafa; border-left: 3px solid #dedede; padding: 10px 15px 0px 17px;}
#wpdcom.wpd-layout-2 .wpd-comment.wpd-reply .wpd-avatar img,
#wpdcom.wpd-layout-2 .wpd-comment.wpd-reply .wpd-avatar img.avatar{border-bottom: none;}
#wpdcom.wpd-layout-2 .wpd-new-loaded-comment > .wpd-comment-wrap > .wpd-comment-right{padding-right: 15px; padding-left: 15px;}
#wpdcom.wpd-layout-2 .wpd-new-loaded-comment.wpd-comment.wpd-reply > .wpd-comment-wrap > .wpd-comment-right{padding-left: 0; padding-right: 0;}

/* Tools Actions */
#wpdcom .wpd-tools{position:relative;}
#wpdcom .wpd-tools-actions{display:none; font-family: "Arial Hebrew", Arial, sans-serif; font-size: 14px; position: absolute; left: -50%; min-width: 100px; flex-direction: column; background-color: #fff; border: 1px solid #ccc; padding: 5px 8px; border-radius: 3px; z-index: 9; color: #999; top: 26px;}
#wpdcom .wpd-tools-actions .wpd-cta-button{cursor: pointer; line-height: 18px;  padding: 2px 5px;}
#wpdcom .wpd-tools-actions .wpd-cta-button a{color: #999;}
#wpdcom .wpd-tools-actions .wpd-cta-button:hover{background-color: #F5F5F5;}
#wpdcom .wpdf-sorting{position:relative;}
#wpdcom .wpdiscuz-sort-buttons{display:none;position:absolute;flex-direction:column;background-color:#fff;border:1px solid #ccc;padding:5px;border-radius:3px;width:100%;left:0;top:32px;z-index:9;}
#wpdcom .wpdiscuz-sort-buttons .wpdiscuz-sort-button{padding:5px 0;}
#wpdcom .wpdiscuz-sort-buttons .wpdiscuz-sort-button:hover{background-color: #F5F5F5;}
#wpdcom .wpd-comment .wpd-comment-status .wpd-unapproved{color:#fc9007;}
#wpdiscuz-comment-message{position:fixed;top:38px;right:5px;width:400px;z-index:99999; font-size: 14px; line-height: 20px;}
#wpdiscuz-comment-message.wpdiscuz-comment-message-auth{top:60px;}
#wpdiscuz-comment-message div{color:#fff;padding:5px 10px;margin-top:5px;}
#wpdiscuz-comment-message .wpdiscuz-message-error {background-color: #D32F2F;box-shadow:#666 0px 0px 8px; padding: 10px 20px;}
#wpdiscuz-comment-message .wpdiscuz-message-success {background-color: #4CAF50;box-shadow:#666 0px 0px 8px; padding: 10px 20px;}
#wpdiscuz-comment-message .wpdiscuz-message-warning {background-color: #FFA726;box-shadow:#666 0px 0px 8px; padding: 10px 20px;}

#wpd-editor-source-code-wrapper-bg{display: none;position: fixed;top: 0;left: 0;background-color: rgba(0,0,0,.6);width: 100%;z-index: 9999999;height: 100%;}
#wpd-editor-source-code-wrapper{display: none;width: 50%;height: 350px;position: fixed;top: 50%;left: 50%;transform:translate(-50%,-50%);background-color: #fff;z-index: 99999991;justify-content: center;align-items: center;padding: 5px;border-radius: 5px;text-align: right;}
#wpd-editor-source-code{height: 300px;width: 100%;resize: none;}
#wpd-insert-source-code{padding: 3px 40px; margin-top: 5px;}
.wpd-vote-result-sep {height: 11px;align-self: center;width: 1px;background-color: #ccc;}

#wpdiscuz-loading-bar{position:fixed;top:6px;right:12px;width:32px;height:25px;border:0;background-image:url('../../assets/img/loading.gif');z-index:999999;display:none;}
#wpdiscuz-loading-bar.wpdiscuz-loading-bar-auth{top:38px;}

#wpdcom .wpd-comment-info-bar {display: none; padding: 10px; margin: 20px auto 0 auto; flex-direction: row; justify-content: space-between; font-size: 14px; }
#wpdcom .wpd-current-view{padding: 3px; color: #555;}
#wpdcom .wpd-comment-info-bar .wpd-current-view i{margin-right: 6px; font-size: 18px;}
#wpdcom .wpd-filter-view-all{color: #fff;background:#999;padding: 5px 20px;font-size: 13px;cursor: pointer;border-radius: 3px;}

/* No Avatar */
#wpdcom.wpdiscuz_no_avatar .wpd-comment .wpd-comment-right{flex-basis: 100%;}
#wpdcom.wpdiscuz_no_avatar .wpd-form .wpdiscuz-textarea-wrap.wpd-txt textarea{flex-basis: 100%;}
#wpdcom.wpdiscuz_no_avatar.wpd-layout-1 .wpd-form .wpd-form-foot,
#wpdcom.wpdiscuz_no_avatar.wpd-layout-2 .wpd-form .wpd-form-foot,
#wpdcom.wpdiscuz_no_avatar.wpd-layout-3 .wpd-form .wpd-form-foot{margin-left: 0;}
#wpdcom.wpdiscuz_no_avatar.wpd-layout-1 .wpd-comment .wpd-comment-wrap{display: block;}
#wpdcom.wpdiscuz_no_avatar.wpd-layout-1 .wpd-comment .wpd-follow-link{text-align: left;}

/* Errors */
.wc_comment_edit_not_possible,.wc_comment_not_edited,.wc_comment_not_updated,
.wc_deny_voting_from_same_ip,.wc_error_email_text,.wc_error_url_text,
.wc_follow_email_confirm_fail,.wc_follow_impossible,.wc_follow_login_to_follow,
.wc_follow_not_added,.wc_invalid_captcha,.wc_invalid_field,.wc_login_to_vote,
.wc_msg_input_max_length,.wc_msg_input_min_length,.wc_msg_required_fields,
.wc_self_vote,.wc_vote_only_one_time,.wc_voting_error,.wpdiscuz-sendmail-error{background-color:#fce8e8!important;font-size:14px;text-align:center;color:#ce4a66;border:1px solid #f2d3d2;padding:5px 10px;width:100%;box-sizing:border-box;margin:5px 0;border-radius:3px}
.wpd-ajax-error{background-color:#fce8e8!important;font-size:14px;text-align:center;color:#ce4a66;border:1px solid #f2d3d2;padding:5px 10px;width:100%;box-sizing:border-box;margin:5px 0;border-radius:3px}

/* Labels & Avatar Colors */
#wpdcom .wpd-avatar img{border-color: #999999;}
#wpdcom .wpd-comment-label{color: #666666; border: 1px solid #999999;}
#wpdcom .wpd-comment-author, #wpdcom .wpd-comment-author a{color: #666666;text-decoration:none;}

/* Blog User (All other user roles / logged-in users) */
#wpdcom .wpd-blog-user .wpd-comment-label{color: #ffffff; background-color: #31839e; border: none;}
#wpdcom .wpd-blog-user .wpd-comment-author, #wpdcom .wpd-blog-user .wpd-comment-author a{color:#31839e;}

/* Smart Phones */
@media screen and (max-width:600px){
    #comments, #respond{padding-left: 0!important;padding-right: 0!important;}
    #wpdcom {padding: 5px 3%;overflow: hidden;}
    #wpdcom .wpd-form-row div:hover.wpd-field-desc span {margin-left: -187px;}
    #wpdcom .wpd-form-row div.wpd-field-desc span::after { margin-left: 80px;}
    #wpdcom #wpd-threads .wpd-comment-link [wpd-tooltip]::after{left: -150%;}
    #wpdcom #wpd-threads .wpd-tool-wrap [wpd-tooltip]::after{left: -50%;}

    /* Comment Form */
    #wpdcom .wpd-auth {margin: 0 0 2px -3px;}
    #wpdcom .wpd-social-login .wpd-connect-with{display: none!important;}
    #wpdcom .wpd-form .wpd-avatar{display: none;}
    #wpdcom .wpd-form.wpd-form-wrapper{padding-right: 5px;}
    #wpdcom .wpd-form .wpdiscuz-textarea-wrap.wpd-txt textarea{flex-basis: 100%; width: 100%;}
    #wpdcom .wpdiscuz_select{font-size: 16px !important;}
    #wpdcom .wpd-form .wpd-form-foot,
    #wpdcom.wpd-layout-2 .wpd-form .wpd-form-foot{margin-left: 0;}
    #wpdcom .wpd-form-row .wpd-form-col-left,
    #wpdcom .wpd-form-row .wpd-form-col-right {width: 100%; float: none;}
    #wpdcom .wpdiscuz-item.wpd-field-group.wpd-field-rating {border-bottom: none; height: auto;}
    #wpdcom .wpd-form-row .wpdiscuz-item input[type="text"], #wpdcom .wpd-form-row .wpdiscuz-item input[type="password"], #wpdcom .wpd-form-row .wpdiscuz-item input[type="email"], #wpdcom .wpd-form-row .wpdiscuz-item input[type="url"], #wpdcom .wpd-form-row .wpdiscuz-item input[type="color"], #wpdcom .wpd-form-row .wpdiscuz-item input[type="date"], #wpdcom .wpd-form-row .wpdiscuz-item input[type="datetime"], #wpdcom .wpd-form-row .wpdiscuz-item input[type="datetime-local"], #wpdcom .wpd-form-row .wpdiscuz-item input[type="month"], #wpdcom .wpd-form-row .wpdiscuz-item input[type="number"], #wpdcom .wpd-form-row .wpdiscuz-item input[type="time"], #wpdcom .wpd-form-row .wpdiscuz-item input[type="week"], #wpdcom textarea, #wpdcom select, #wpdcom .wpd-form-row .wpd-field{font-size: 16px!important; height: auto;}
    #wpdcom .wpd-form .wpdiscuz-textarea-wrap.wpd-txt .wpd-textarea-wrap{flex-basis: 100%; width: 100%;}
    #wpdcom .wpd-form .wpdiscuz-textarea-wrap.wpd-txt .quicktags-toolbar{margin-bottom: 2px;}
    #wpdcom .wpd-form .wpdiscuz-textarea-wrap.wpd-txt .quicktags-toolbar .ed_button {font-size: 14px; width: 19%;}
    /* Comment Threads */
    #wpdiscuz-comment-message{width: 97%; }
    #wpdcom .wpd-hidden {visibility: visible; opacity: 1;}
    #wpdcom .wpd-tools-actions{left: auto; right: 0px;}
    #wpdcom .wpd-thread-head .wpd-thread-info{flex-basis: 100%; border-bottom: 2px solid #ccc;}
    #wpdcom .wpd-thread-head .wpd-thread-filter{margin-top: 5px;}
    #wpdcom .wpd-comment-footer .wpd-toggle .wpd-view-replies{display: inline-block; width: 78px; white-space: nowrap; overflow: hidden;font-size: 10px !important;}
    /* Comment Layouts */
    #wpdcom .wpd-comment .wpd-comment-wrap{display: block;}
    #wpdcom .wpd-comment-footer{flex-wrap: wrap;}
    #wpdcom .wpd-comment .wpd-comment-left{width: 100%;}
    #wpdcom .wpd-comment .wpd-comment-right{width: 100%;}
    /* Comment Layout #1 */
    #wpdcom.wpd-layout-1 .wpd-comment .wpd-comment-left{text-align: left;}
    /* Comment Layout #2 */
    #wpdcom.wpd-layout-2 .wpd-reply {margin-left: 0px;}
    #wpdcom.wpd-layout-2 .wpd-reply.wpd_comment_level-2{margin-left: 15px;}
    #wpdcom.wpd-layout-2 .wpd-comment .wpd-comment-header .wpd-user-info {width:100%; display: flex; flex-direction:row; justify-content: flex-start; flex-grow: 0;margin-bottom: -3px;float: right;margin-left: 61px;flex-wrap: wrap;margin-top: -44px;}
    #wpdcom.wpd-layout-2 .wpd-comment .wpd-comment-header .wpd-user-info .wpd-uinfo-top {flex-wrap: wrap!important;}
    #wpdcom.wpd-layout-2 .wpd-comment.wpd-reply .wpd-comment-header .wpd-comment-date{padding-left: 0;}
    #wpdcom.wpd-layout-2 .wpd-comment-header .wpd-comment-link {margin-bottom: 0; padding-top: 1px; align-items: normal; flex-basis: 100%; text-align: right; margin-top: -20px;}
    #wpdcom.wpd-layout-2 .wpd-comment-header .wpd-reply-to{margin-right: 10px;}
    /* Tooltip */
    [wpd-tooltip-size='small']::after{min-width: 60px;}
    [wpd-tooltip-size='medium']::after{min-width: 90px;}
    [wpd-tooltip-size='long']::after{min-width: 200px;}
}

Note that you will need to use Layout 2 for the above to work – I wiped out Layout 3 from the CSS, since I don’t care for it.

Hope this helps!

@megaz bundle of thanks for the CSS code. I’ve made my own icons set, and used that. But yours is also very very good. It can be easily stored in the browser cache as well.