svg foreignObject {
    line-height: 1.3;
    overflow: visible;
}

svg.viewer .hide-on-viewer {
    display: none;
}

svg.viewer .interactive-click,
svg.viewer .variable-click {
    cursor: pointer;
}

svg.editor foreignObject [contenteditable="true"] {
    outline: none;
    box-shadow: 0 0 0 1px rgb(13, 153, 255);
}

.k-webkit {

    svg foreignObject {
        position: relative;
    }

    svg.editor foreignObject::after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
    }

    svg.editor foreignObject[editable="true"]::after,
    svg.editor g[id^="icdt-"] foreignObject::after {
        display: none;
    }

    svg.editor foreignObject>[data-node="test"] {
        position: relative;
        border: 1px dashed #be5dba;
    }

    /* truefalse */
    svg.editor foreignObject>[data-node="test"][data-type="truefalse"]::before,
    svg.editor foreignObject>[data-node="test"][data-type="truefalse"]::after {
        content: '';
        display: block;
        position: absolute;
        top: 2px;
        right: 2px;
        width: 28px;
        height: 28px;
    }

    svg.editor foreignObject>[data-node="test"][data-type="truefalse"]::before {
        border: 1px dashed #be5dba;
        border-radius: 50%;
    }

    svg.editor foreignObject>[data-node="test"][data-type="truefalse"][data-correct="1"]::after {
        content: '✔';
        color: #be5dba;
        font-size: 24px;
        line-height: 28px;
        vertical-align: middle;
        text-align: center;
    }

    /* singlechoice */
    svg.editor foreignObject>[data-node="test"][data-type="singlechoice"]::before,
    svg.editor foreignObject>[data-node="test"][data-type="singlechoice"]::after {
        content: '';
        display: block;
        position: absolute;
        top: 2px;
        right: 2px;
        width: 28px;
        height: 28px;
    }

    svg.editor foreignObject>[data-node="test"][data-type="singlechoice"]::before {
        border: 1px dashed #be5dba;
        border-radius: 50%;
    }

    svg.editor foreignObject>[data-node="test"][data-type="singlechoice"][data-correct="1"]::after {
        content: '✔';
        color: #be5dba;
        font-size: 24px;
        line-height: 28px;
        vertical-align: middle;
        text-align: center;
    }

    /* multichoice */
    svg.editor foreignObject>[data-node="test"][data-type="multichoice"]::before,
    svg.editor foreignObject>[data-node="test"][data-type="multichoice"]::after {
        content: '';
        display: block;
        position: absolute;
        top: 2px;
        right: 2px;
        width: 28px;
        height: 28px;
    }

    svg.editor foreignObject>[data-node="test"][data-type="multichoice"]::before {
        border: 1px dashed #be5dba;
    }

    svg.editor foreignObject>[data-node="test"][data-type="multichoice"][data-correct="1"]::after {
        content: '✔';
        color: #be5dba;
        font-size: 24px;
        line-height: 28px;
        vertical-align: middle;
        text-align: center;
    }

    /* matching */
    svg.editor foreignObject>[data-node="test"][data-type="matching"]::before,
    svg.editor foreignObject>[data-node="test"][data-type="matching"]::after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 28px;
        height: 28px;
    }

    svg.editor foreignObject>[data-node="test"][data-type="matching"]::before {
        border: 1px dashed #be5dba;
        border-width: 0 0 1px 1px;
    }

    svg.editor foreignObject>[data-node="test"][data-type="matching"][data-type2="matching-empty"]::before {
        background-color: rgba(190, 93, 187, 0.2);
    }

    svg.editor foreignObject>[data-node="test"][data-type="matching"][data-key]::after {
        content: attr(data-key);
        color: #be5dba;
        font-size: 24px;
        line-height: 28px;
        vertical-align: middle;
        text-align: center;
    }

    svg.viewer foreignObject.interactive-click::after,
    svg.viewer foreignObject.variable-click::after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        cursor: pointer;
    }

    svg.viewer foreignObject[data-role="draggable"]::after {
        display: none;
    }
}

svg.viewer foreignObject .ondrag-item {
    cursor: grab;
}

svg foreignObject input[type="text"],
svg foreignObject textarea {
    width: 100%;
    height: 100%;
    border: 0px;
    padding: 5px 10px;
    box-sizing: border-box;
    background: transparent;
    box-shadow: none;
    outline: none;
}

svg foreignObject h1,
svg foreignObject h2,
svg foreignObject h3 {
    margin: 20px 0 10px;
}

svg foreignObject h4,
svg foreignObject h5,
svg foreignObject h6 {
    margin: 10px 0 10px;
}

svg foreignObject p {
    margin: 0 0 10px;

    &:last-child {
        margin-bottom: 0;
    }
}

svg .hide {
    display: none;
}

svg.editor foreignObject h1,
svg.editor foreignObject h2,
svg.editor foreignObject h3,
svg.editor foreignObject h4,
svg.editor foreignObject h5,
svg.editor foreignObject h6,
svg.editor foreignObject p {
    border-left: 1px solid rgba(0, 0, 0, 0.15);

    &::before,
    &::after {
        content: '';
        display: block;
        width: 10px;
    }

    &::before {
        border-top: 1px solid rgba(0, 0, 0, 0.15);
    }

    &::after {
        border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    }
}