questionnaire.scss

$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: 0px;
                .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: 0px;
                        width: 0px;
                        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: 0px;
                        width: 0px;
                        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;
            width: 100%;
            padding: 10px;
            padding-left: 15px;
            min-height: 150px;
        }
        .vote_edit {
            .options {
                > li {
                    display: flex;
                    align-items: center;
                    > * {
                        margin-right: 10px;
                    }
                }
            }
        }
        .rangescale_edit table.default > thead > tr > th.number {
            padding-left: 12px;
        }

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

        .input-array {
            margin-left: 4px;
        }

        .likert_edit .input-array {
            margin-left: 7px;
        }
        .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;
            }
        }
        .drag-handle {
            display: inline-block;
            height: 24px;
        }
    }

    /* ab hier der alte kram */

    section {
        border: thin solid var(--black);
        margin: 3px;
    }

    .options {
        padding: 0;
        list-style-type: none;

        > li {
            margin-top: 5px;
            margin-bottom: 5px;

            > .move {
                cursor: move;
                display: inline-block;
                vertical-align: middle;
            }

            > input {
                display: inline-block;
                vertical-align: middle;
            }

            > input[type=text] {
                width: calc(100% - 70px);
            }

            .delete {
                display: inline-block;
                vertical-align: middle;
                cursor: pointer;
            }

            .add {
                display: none;
                vertical-align: middle;
                cursor: pointer;
            }
        }

        > li:last-child .delete {
            display: none;
        }

        > li:last-child .add {
            display: inline-block;
        }

        > li:only-child .move {
            display: none;
        }

    }

    .all_questions {
        .question:first-child .move_up {
            display: none;
        }

        .question:last-child .move_down {
            display: none;
        }
    }

    .add_questions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
        border: thin dashed var(--content-color-40);

        > a {
            background-color: transparent;
            margin: 10px;
            border: thin solid var(--content-color-20);
            padding: 5px;
            width: 100px;
            min-width: 100px;
            max-width: 100px;
            height: 100px;
            min-height: 100px;
            max-height: 100px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            text-align: center;

            > img {
                margin-left: auto;
                margin-right: auto;
            }
        }
    }

    .questionnaire_metadata {
        margin-top: 10px;
    }
}

.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: 0px;
        }

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

.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;
}