.ui.horizontal.divider.extraction-item-divider {
    margin-top: 3em;
    margin-bottom: 2em;
}

.ui.segments.story-card {
    border-color: #eeeeee;
    box-shadow: 0 1px 5px rgba(34, 36, 38, 0.1);;
    .story-card-content {
        border-color: #eeeeee;
    }
}
.ui.menu.pointing.secondary,
.ui.segment {
    &.story-card-topbar {
        padding: 0 2em 0 2em;
        background-color: #f9f9f9;
        border-color: #eeeeee;
        height: 2.85714286em;
        margin-bottom: 0;
        &.pointing.secondary {
            border-bottom: none;
        }
        .story-card-tab {
            border-bottom-width: 4px;
        }
    }
}

.ui.menu.pointing.secondary.form-top-menu {
    border-bottom: none;
    display: flex;
    .ui.breadcrumb.form-slot-breadcrumb {
        position: relative;
        overflow: visible;
        white-space: nowrap;
        width: 0px;
        color: 'black';
        a.section {
            cursor: default;
            line-height: 2.8;
            color: black;
        }
    }
    .menu.form-editor-tab-menu {
        margin-left: auto;
        margin-right: auto;
    }
}
.response-form {
    margin-bottom: 40px;
    .utterances-container {
        display: block;
        border: 1px solid #eee;
        .side-by-side.top-right {
            visibility: visible;
        }
        .response-name-container {
            opacity: 1;
            .response-name {
                color: #cdcdcd;
            }
        }
    }
}

.validation-tab {
    .validation-criteria {
        height: 99px;
        margin-bottom: 30px;
    }
    .response-form.first {
        margin-bottom: 80px;
    }
    .validation-operator {
        margin: 9px 6px;
    }
    .comparatum-multi {
        width: 350px;
    }
    .toggle {
        margin-bottom: 10px;
    }
}

.ui.header.question-tab-header {
    font-weight: 400;
    text-transform: none;
    margin-bottom: 0.5em;
}


.ui.dropdown.extraction-dropdown {
    margin: 0.5em;
    &.condition-dropdown {
        .dropdown.icon.clear {
            padding-top: 1.2em;
        }
        margin-left: 0;
        margin-bottom: 0;
        padding-top: 0.9em;
        max-height: 3.1em;
    }
    &.multiple {
        width: ~'calc(100% - 20em)';
        max-width: 30em;
        &.entity {
            width: ~'calc(100% - 29.3em)';
            max-width: 20.7em;
            .ui.label {
                vertical-align: baseline;
            }
        }
    }
}
.extraction-field {
    margin: 0.5em;
}

.ui.segment.form-settings-tab-container {
    padding: 2em;
    height: ~"calc(100vh - 230px)";
    overflow-y: auto;
    overflow-x: visible;
}

.ui.button.add-condition-button {
    margin-right: auto;
    margin-left: auto;
    display: block;
    margin-top: 3em;
}

.ui.dropdown.change-response-type {
    color: blue;
    background-color: rgba(0,0,0,0);
    .icon {
        width: 0;
    }
}

.create-form-field.field{ 
    max-width: 600px;
}

.ui.small.header.graph-sidebar-header {
    padding: 1em 0em 0.5em 1em;
    background-color: #f9f9f9;
    border-color: #d7d7d7;
    border-width: 1px;
    border-bottom-style: solid;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}

.ui.form {
    .ui.segments.form-editor {
        border-color: #eeeeee;
        margin-bottom: 20px;
        .ui.segment.form-editor-topbar {
            padding: 0;
            background-color: #f9f9f9;
            border-color: #eeeeee;
            height: 2.85714286em;
            .create-form-field {
                width: 300px;
                .ui.input {
                    box-sizing: border-box;
                    margin-left: 1.5em;
                    margin-top: 0.4em;
                    input {
                        font-size: 16px;
                        padding: 0.225em;
                        padding-left: 0.5em;
                        background-color: rgba(0,0,0,0);
                        border-color: rgba(0,0,0,0);
                        &:focus,
                        &:hover {
                            border-color: rgb(220, 220, 220);
                            background-color: rgba(255, 255, 255, 1);
                        }
                    }
                }
                &.error {
                    .ui.input {
                        input {
                            background-color: #fff6f6;
                            border-color: #d16e6d;
                            &:focus,
                            &:hover {
                                border-color: #d16e6d;
                                background-color: #fff6f6;
                            }
                        }
                    }
                }
            }
        }
        .ui.segment.form-editor-content {
            border-color: #eeeeee;
            padding: 2em;
            .contextual-side-questions {
                margin-bottom: 15px;
            }
            .grey.question.icon {
                width: 1.5em !important;
                height: 1.5em !important;
                padding: 0.2em 0 !important;
                margin-left: 10px;
            }
        }
    }
}
.grey.question.icon.side-question-tooltips {
    width: 1.5em !important;
    height: 1.5em !important;
    padding: 0.2em 0 !important;
    margin-left: 10px;
}

.extraction-option-buttons {
    position: relative;
    width: max-content;
    margin-right: 0;
    margin-left: auto;
    height: 0;
}

.form-graph-wrapper {
    border-radius: 0.28em;
    overflow: hidden;
    height: 100%;
    position: relative;
    margin-top: -10px;
    box-shadow: rgba(34, 36, 38, 0.1) 0px 1px 5px;
}

.extraction-line.extraction-intents-line {
     .ui.segment.sequence-selector-wrapper {
        width: 26em;
        .sequence-item-container {
            width: max-content;
        }
    }
    .ui.segment.sequence-selector-wrapper {
        margin-top: 0.5em;
        padding: 0;
        width: 20em !important;
        min-height: 38px;
        .ui.label.sequence-step {
            margin-left: 0.2em;
            margin-top: 0.45em;
        }
        .left.floated.twelve.wide.column.sequence-item-container.bordered-sequence-selector {
            padding-right: 1.4em;
            padding-left: 1.4em;
            margin-bottom: 0.4em;
        }
        .right.floated.two.wide.column.add-event-button.bordered-sequence-selector {
            padding-right: 18%;
            padding-left: 0;
            padding-top: 0.9em;
            width: 0 !important;
        }
        .ui.dropdown.event-selector-dropdown .menu.transition.visible {
            .intent-dropdown {
                position: absolute;
                left: -245px;
                border: 1px solid rgb(239, 239, 239);
                border-radius: 4px;
            }
        }
    }
}

.extraction-line.from_entity {
    margin-bottom: 0.75rem;
    .side-by-side.middle {
        max-width: 330px;
        &.entity-value-input-container {
            margin-top: 1rem;
            margin-bottom: 0;
        }
    }
    .optional-entity-values-container {
        display: block;
    }
    .ui.buttons.entity-option-buttons {
        .ui.button {
            display: inline-block;
            margin-top: 1rem;
        }
    }
}