#helpful-form .helpful-form-fields {
    gap: 10px 24px;
    flex-wrap: wrap;
}

#helpful-form .helpful-form-fields button.button {
    border-radius: 4px;
    border: 1px solid var(--greyscale-cy-shade-30-line, #BEBFC5) !important;
    background-color: var(--Greyscale-CY-White, #FFF);
    color: var(--greyscale-cy-shade-90-body, #3D3E50);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
    max-width: 75px;
    justify-content: center;
    min-width:auto;
}

#helpful-form .helpful-form-fields button.button:hover,
#helpful-form .helpful-form-fields button.button:focus {
    color: #fff;
    background-color: #1863DC;
    border: 1px solid #1863DC !important;
    transition: all 0.3s ease;
}

#helpful-form .helpful-form-fields button svg path {
    transition: all 0.3s ease;
}

#helpful-form .helpful-form-fields button.button:hover svg path,
#helpful-form .helpful-form-fields button.button:focus svg path {
    stroke: #fff;
    transition: all 0.3s ease;
}

#comment-form-wrap,
#feedback-message {
    display: none;
}

.helpful-form p.form-title {
    font-size: 16px;
    font-weight: 400;
    line-height: 36.4px;
    text-align: left;
    color: #1F1F1F;
    margin: 0;
}

.helpful-form p#feedback-message {
    font-size: 16px;
    font-weight: 600;
    line-height: 36.4px;
    color: #1F1F1F;
    margin: 0;
}

.helpful-form label#feedback-label {
    font-size: 16px;
    font-weight: 400;
    line-height: 36.4px;
    margin-bottom: 20px;
    text-align: left;
    display: block;
}

.helpful-form textarea {
    width: 100%;
    padding: 12px 16px;
    margin-bottom: 15px;
    color: #3D3E50;
    font-size: 14px;
    font-weight: 400;
    line-height: 36.4px;
    text-align: left;
    border-radius: 4px;
    border: 1px solid var(--greyscale-cy-shade-30-line, #BEBFC5);
    transition: all 0.3s ease;
}

.helpful-form textarea:focus {
    border: 1px solid var(--Blue-CY-Primary, #1863DC);
    transition: all 0.3s ease;
    outline: none;
    box-shadow: none;
}

.helpful-form textarea::placeholder {
    color: var(--greyscale-cy-shade-70-placeholder, #686876);
}

.helpful-form form#comment-form p {
    font-size: 14px;
    font-weight: 400;
    line-height: 26.4px;
    text-align: left;
    color: #2E3240;
}

.helpful-form form#comment-form button[type="submit"] {
    font-size: 14px;
    font-weight: 400;
    line-height: 14.4px;
    text-align: center;
    background: #0B66E4;
    border-radius: 4px;
    padding: 6px 14px !important;
    color: #fff;
}

.helpful-form .button-grp {
    display: flex;
    align-items: center;
    gap: 10px;
}

.helpful-form {
    position: relative;
}

.helpful-form.loading:before {
    content: '';
    position: absolute;
    background-color: #ffffffa8;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;

}

.helpful-form p.success,
.helpful-form p.error {
    color: var(--greyscale-cy-shade-90-body, #3D3E50);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
    margin-bottom: 0 !important;
}

.helpful-form p.success.tick-icon {
    position: relative;
    padding-left: 32px;
}

.helpful-form p.success.tick-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 100%;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M5 12L10 17L20 7" stroke="%23686876" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}