.wdk-feedback-up,
.wdk-feedback-down{
    display: none;
}

.wdk-btn-feedback {
    font-size: 24px;
}

.wdk-btn-feedback.up {
    color: var(--green-03);
}
.wdk-btn-feedback.down {
    color: var(--red-03);
}

[id*=wdkFeedbackUp].opened ~ #feedbackBox .wdk-feedback-up,
[id*=wdkFeedbackDown].opened ~ #feedbackBox .wdk-feedback-down {
    display: block;
}

[id*=wdkFeedbackUp]:checked ~ #feedbackBox .wdk-group .wdk-btn-feedback.up {
    background-color: var(--secondary);
    color: var(--primary);
}
[id*=wdkFeedbackUp]:checked ~ #feedbackBox .wdk-group .wdk-btn-feedback.up:hover {
    background-color: var(--secondary-dark);
    color: var(--primary);
}

[id*=wdkFeedbackDown]:checked ~ #feedbackBox .wdk-group .wdk-btn-feedback.down {
    background-color: var(--red-03);
    color: var(--white-01);
}
[id*=wdkFeedbackDown]:checked ~ #feedbackBox .wdk-group .wdk-btn-feedback.down:hover {
    background-color: var(--red-04);
    color: var(--white-01);
}
.wdk-feedback-up,
.wdk-feedback-down {
    display: none;
} 
.wdk-feedback-up,
.wdk-feedback-down {
    position: absolute;
    z-index: 1000;
    background-color: white;
    width: 100%;
    margin: 0;
    padding: 8px 16px 16px 16px;
    box-shadow: 3px 3px 12px 1px rgb(0 0 0 / 15%);
    border-radius: 8px;
    bottom: 0;
    transform: translateY(104%);
}

.wdk-feedback-head {
    position: relative;
}
.wdk-feedback-head .btn-close {
    top: -8px;
    right: -16px;
}
#feedbackBox {
    max-height: 54px;
}

@media (max-width: 576px) {
    #feedbackBox {
        max-height: initial;
    }
}