article.studip.feedback-container {
    header {
        h1 {
            a {
                word-break: break-all;
            }
        }
    }
}
article.studip.feedback-stream {
    h1 {
        span {
            padding: 0;
            margin-right: 8px;
            font-weight: normal;
            white-space: nowrap;
        }
        > img:not(:first-child),
        > .feedback-star-rating {
            margin-left: 8px;
        }
    }
    h2 {
        border-bottom: none;
    }
}
.feedback-entry-add {
    .rating {
        label.checked img,
        label.hover img {
            opacity: 1;
        }
        label img,
        label.out img {
            opacity: 0.2;
        }
        label {
            font-size: 0;
            cursor: pointer;
        }
        input {
            display: none;
        }
    }
}
.feedback-entries {
    .feedback-entry {
        margin-top: 10px;
        padding: 5px;
        background-color: var(--content-color-10);
        border: 1px solid var(--content-color-40);

        header {
            background: transparent;
            padding: 0;
            margin: 0 !important;
            h1 {
                border: 0;
                padding-left: 0;
                > span {
                    font-weight: bold;
                }
                .avatar-small,
                span {
                    margin-right: 5px;
                }
            }
        }
        .rating {
            white-space: nowrap;
            font-size: 0;
            .inactive {
                opacity: 0.2;
            }
        }
        .date {
            color: var(--base-gray);
            text-align: right;
            font-size: 12px;
        }
    }
}
.ui-dialog-content {
    .feedback-elements {
        margin-top: 10px;
    }
    article.feedback-stream {
        header {
            background: transparent;
            margin: -10px;
        }
    }
}
table.feedback {
    img {
        vertical-align: middle;
    }
    > tfoot > tr > td {
        padding: 5px;
    }
}
.percentage-bar {
    margin-left: -5px;
    padding: 0 5px;
    color: var(--content-color-10);
    background-color: var(--base-color);
    min-width: 20px;
}

/* * * * * * * * * * * *
vue feedback components
* * * * * * * * * * * */

.five-stars-histogram {
    display: flex;
    max-width: 420px;
    flex-wrap: wrap;

    .five-stars-histogram-average {
        padding: 0 2em 0 0;
        margin: auto;
        text-align: center;
        .fraction {
            margin: -10px 0;
            .average {
                font-size: 3em;
                font-weight: 700;
                margin-bottom: -8px;
            }
        }
        .total {
            font-size: 0.8em;
            margin-top: -4px;
        }
    }
    .five-stars-histogram-chart {
        min-width: 270px;
        span {
            display: inline-block;
            width: 30px;
        }
        img {
            vertical-align: text-bottom;
            margin-left: -2px;
        }
        .percentage {
            display: inline-block;
            background-color: var(--content-color-10);
            width: calc(100% - 6em);
            margin: 4px 10px;
            .percentage-bar {
                background-color: var(--yellow);
                color: transparent;
                min-width: 0px;
                padding: 0;
                margin: 0;
            }
        }
    }

    &.vertical {
        width: 260px;
        height: 230px;
        margin-bottom: 1em;
        .five-stars-histogram-average {
            padding: 0;
        }
    }
}

.five-stars-input {
    margin: 8px auto;

    button {
        border: none;
        background: transparent;
        padding: 0 14px;
        cursor: pointer;
    }
}

.feedback-dialog {
    display: flex;
    flex-wrap: wrap;

    .feedback-dialog-content {
        width: 540px;
        padding-left: 3em;
        h2 {
            display: inline-block;
            width: calc(100% - 40px);
            margin: 0;
        }
        ul {
            list-style: none;
            padding: 0;
        }
        .feedback-dialog-content-header {
            border-bottom: solid thin var(--content-color-40);
            padding-bottom: 4px;
        }
    }
}

.feedback-element-update,
.feedback-entry-create {
    background-color: var(--content-color-10);
    padding: 1em;
    margin: 8px 0 16px 0;

    h3 {
        margin: 0 0 1em 0;
    }
    textarea {
        width: calc(100% - 8px);
        height: 6em;
        resize: none;
    }
    .button-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        button.button {
            margin: 8px 0 0 5px;
        }
    }
}

.feedback-entry-box {
    display: flex;
    margin-bottom: 1em;
    padding: 8px;
    border: solid thin var(--content-color-40);
    .feedback-entry-box-avatar {
        margin-right: 1em;
    }
    .feedback-entry-box-content {
        flex-grow: 1;
        h4 {
            margin: 0 0 2px 0;
        }
    }
}