$width: 270px;

.questionnaire_edit {
    .editor {
        display: flex;
        flex-direction: row-reverse;
        align-items: stretch;
        width: 100%;
        aside {
            background: var(--white);
            border: 1px solid var(--content-color-40);
            min-width: $width;
            width: $width;
            .questions_container {
                padding: 0;
                .questions {
                    display: flex;
                    flex-direction: column;
                }
            }

            > .admin,
            > .add_question,
            .questions > * {
                width: calc(100% - 8px);
                padding: 4px;
                border-bottom: 1px solid var(--content-color-40);
                min-height: 40px;
                display: flex;
                justify-content: start;
                align-items: center;
                position: relative;
                > .icon {
                    width: 30px;
                    height: 30px;
                    margin-right: 10px;
                    margin-left: 15px;
                }
                &.active {
                    background-color: var(--yellow-40);

                    &::before {
                        content: '';
                        position: absolute;
                        height: 0;
                        width: 0;
                        border-top: 25px transparent solid;
                        border-bottom: 25px transparent solid;
                        border-left: 7px var(--content-color-40) solid;
                        right: -8px;
                    }
                    &::after {
                        content: '';
                        position: absolute;
                        height: 0;
                        width: 0;
                        border-top: 25px transparent solid;
                        border-bottom: 25px transparent solid;
                        border-left: 7px var(--yellow-40) solid;
                        right: -7px;
                    }
                }
            }
            .questions {
                display: flex;
                justify-content: start;
                align-items: center;
                flex-direction: column;
                > * {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    > :first-child {
                        width: 100%;
                        overflow: hidden;
                    }
                }
                a {
                    display: flex;
                    align-items: center;
                    .icon.type {
                        width: 30px;
                        height: 30px;
                        margin-right: 10px;
                        margin-left: 7px;
                    }
                }

            }

        }
        .rightside {
            border: 1px solid var(--content-color-40);
            border-left: none;
            flex-grow: 1;
            padding: 10px 10px 10px 15px;
            min-height: 150px;
            min-width: 0;
        }

        .inline_editing {
            width: 100%;
            display: flex;
            align-items: center;
            input {
                width: calc(100% - 74px);
                border: 1px solid var(--light-gray-color-40);
            }
            button {
                border: 1px solid var(--light-gray-color-40);
                width: 32px;
                height: 32px;
                padding: 6px;
                margin-left: 5px;
                background-color: white;
                cursor: pointer;
                display: inline-flex;
                align-items: center;
                justify-items: center;
            }
        }

        .dragcolumn {
            max-width: 1px;
            padding-bottom: 0;
            > .dragarea {
                display: inline-block;
                height: 27px;
            }
        }

        .drag-handle {
            display: inline-block;
            height: 24px;
        }

        .option-cell {
            text-align: center;
        }
    }
}

.questionnaire_results {
    > article {
        padding: 7px;

        > :first-child {
            margin-top: 0;
        }
    }

    .ct-label {
        color: rgba(0, 0, 0, 0.8);
        text-shadow: -1px 0px var(--white), 0px 1px var(--white), 1px 0px var(--white), 0px -1px var(--white);
        font-size: x-small;
        fill: var(--black);
    }

    .ct-series-a .ct-bar, .ct-series-a .ct-line, .ct-series-a .ct-point, .ct-series-a .ct-slice-donut {
        //Balkenfarbe
        stroke: var(--red);
    }

    //Tortenstücke:
    .ct-series-a .ct-area, .ct-series-a .ct-slice-pie {
        fill: var(--red);
    }

    .ct-series-b .ct-area, .ct-series-b .ct-slice-pie {
        fill: var(--brand-color-dark);
    }

    .ct-series-c .ct-area, .ct-series-c .ct-slice-pie {
        fill: var(--activity-color);
    }

    .ct-series-d .ct-area, .ct-series-d .ct-slice-pie {
        fill: var(--content-color);
    }

    .ct-series-e .ct-area, .ct-series-e .ct-slice-pie {
        fill: var(--orange);
    }

    table tbody tr:last-child td {
        border-bottom: 0;
    }
}


.questionnaire_answer,
.questionnaire_results {
    .description_container {
        display: flex;
        > .icon_container {
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 3px;
            margin-bottom: 10px;
        }
        > .description {
            margin-top: 6px;
            width: 100%;
            iframe {
                width: 100%;
                height: 400px;
                border: none;
            }
        }
    }
    > article {
        padding: 7px;
        border: none;

        > :first-child {
            margin-top: 0;
        }

        .invalidation_notice {
            color: var(--red);
        }
    }

    .average {
        position: absolute;
        border-left: 2px solid var(--red);
        height: 70px;
        z-index: 1;
        font-size: 0.7em;
        padding-left: 5px;
    }
    .centerline {
        border-top: 1px solid var(--base-color);
        position: relative;
        top: 35px;
        margin-left: -5px;
        margin-right: -5px;
        z-index: 2;
    }
    .questionnaire-evaluation-circle-container {
        text-align: center;
        display: block;
        .questionnaire-evaluation-circle {
            width: 70px;
            height: 70px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: auto;
            margin-right: auto;
            z-index: 3;
            position: relative;
            > .value {
                border-radius: 100px;
                color: var(--white);
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: var(--base-color);
                width: 100%;
                height: 100%;
            }
        }
    }
}

.questionnaire_edit,
.questionnaire_answer,
.questionnaire_results {
    .option-cell {
        text-align: center;
    }
}

.courseselector,
.instituteselector,
.statusgroupselector {
    > li > label {
        cursor: pointer;

        > input:checked + span {
            text-decoration: line-through;
        }
    }
}

.questionnaire .terms, .questionnaire_results .terms {
    text-align: center;
    border-top: thin solid var(--content-color-40);
    color: var(--light-gray-color);
    margin: 0 -10px;
}

#qr_code {
    display: none;
    background-color: var(--white);
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    color: var(--dark-gray-color);

    .code > div {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .code img {
        width: 70vh;
        height: 70vh;
    }

    .header {
        background-image: url("#{$image-path}/logos/logoklein.png");
        height: 100px;
        width: 100%;
        background-repeat: no-repeat;
        background-position: center center;
    }
}

#qr_code:fullscreen {
    display: flex;
}