@import (css) url('https://fonts.googleapis.com/css?family=Be+Vietnam:400,500,700|Hind:600|Raleway:500');
@import 'variables.import.less';
@import 'datepicker.less';
@import '../imports/ui/layouts/project.import.less';
@import '../imports/ui/layouts/setup.import.less';
@import '../imports/ui/components/admin/settings.import.less';
@import '../imports/ui/components/nlu/models/style/NLUModel.import.less';
@import '../imports/ui/components/nlu/models/style/style.import.less';
@import '../imports/ui/components/utils/style.import.less';
@import '../imports/ui/components/nlu/activity/style.import.less';
@import '../imports/ui/components/templates/template-upsert/Template.import.less';
@import '../imports/ui/components/templates/templates-list/style.import.less';
@import '../imports/ui/components/common/style.import.less';
@import '../imports/ui/components/stories/StoriesFooter.import.less';
@import '../imports/ui/components/nlu/common/style.import.less';
@import '../imports/ui/components/conversations/style.import.less';
@import '../imports/ui/components/stories/style.import.less';
@import '../imports/ui/components/account/style.import.less';
@import '../imports/ui/components/example_editor/style.import.less';
@import '../imports/ui/components/stories/common/style.import.less';
@import '../imports/ui/components/stories/common/QuickReply.import.less';
@import '../imports/ui/components/stories/common/Images.import.less';
@import '../imports/ui/components/settings/style.import.less';
@import '../imports/ui/components/analytics/Analytics.import.less';
@import '../imports/ui/components/charts/style.import.less';
@import '../imports/ui/components/templates/common/style.import.less';
@import '../imports/ui/components/templates/style.import.less';
@import '../imports/ui/components/stories/rules/style.import.less';
@import '../imports/ui/components/stories/search/style.import.less';
@import '../imports/ui/components/stories/common/nlu_editor/style.import.less';
@import '../imports/ui/components/form_fields/style.import.less';
@import '../imports/ui/components/forms/style.import.less';
@import '../imports/ui/components/forms/graph/style.import.less';


@sidebar-bg: rgb(45, 47, 74);
@sidebar-size: 190px;
@small-sidebar-size: 46px;
@sidebar-offset:~"calc(@{sidebar-size} - @{small-sidebar-size})";
@top-menu-height: 49px;

@font-face {
    font-family: 'Icons';
    src: url("./fonts/icons.eot");
    src: url("./fonts/icons.eot?#iefix") format('embedded-opentype'), url("./fonts/icons.woff2") format('woff2'), url("./fonts/icons.woff") format('woff'), url("./fonts/icons.ttf") format('truetype'), url("./fonts/icons.svg#icons") format('svg');
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-decoration: inherit;
    text-transform: none;
}

@font-face {
    font-family: 'outline icons';
    src: url("./fonts/outline-icons.eot");
    src: url("./fonts/outline-icons.eot?#iefix") format('embedded-opentype'), url("./fonts/outline-icons.woff2") format('woff2'), url("./fonts/outline-icons.woff") format('woff'), url("./fonts/outline-icons.ttf") format('truetype'), url("./fonts/outline-icons.svg#icons") format('svg');
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-decoration: inherit;
    text-transform: none;
}

@font-face {
    font-family: 'brand-icons';
    src: url("./fonts/brand-icons.eot");
    src: url("./fonts/brand-icons.eot?#iefix") format('embedded-opentype'), url("./fonts/brand-icons.woff2") format('woff2'), url("./fonts/brand-icons.woff") format('woff'), url("./fonts/brand-icons.ttf") format('truetype'), url("./fonts/brand-icons.svg#icons") format('svg');
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-decoration: inherit;
    text-transform: none;
}

.ui.form textarea:not([rows]) {
    min-height: unset !important;
    max-height: unset !important;
}

.monospace {
    font-family: monospace;
}

.break-word {
    word-break: break-word;
}

.cursor {
    &.pointer { cursor: pointer; * { cursor: pointer; } }
    &.text { cursor: text; }
}

.ui.top-menu {
    height: @top-menu-height;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    & + :not(.no-margin) {
        margin-top: 1rem;
    }
}

.item {
    outline: none;
}

.link-like {
    color: @blue;
    background: none;
    border: none;
    cursor: pointer;
}

html {
    overflow: hidden;
    height: 100%;
    font-size: @emSize !important;
    font-family: @fontFamily !important;
}

.chat-demo-container {
    text-align: center;
    background-color: @botfront-grey-bg;
    height: 100%;
    .rw-conversation-container {
        box-shadow: none;
    }
    .side-by-side.middle {
        height: 60px;
        padding: 15px;
    }
    .grey, .ui.basic.button {
        color: #3b3b3b !important;
    }
    .pale-grey {
        color: grey;
    }
    .widget-container {
        height: ~"calc(100vh - 75px)"; // 60 + 15 * 3
        max-width: 700px;
        margin: 15px auto;
    }
}

body {
    color: #212121;
    font-size: inherit !important;
    font-family: inherit !important;
}

.Pane.vertical.Pane1 {
    background-color: @botfront-grey-bg;
    & > .storygroup-browser {
        background-color:#fff;
    }
}

h3 {
    font-family: inherit !important;
}

span {
    &.small {
        font-size: small;
    }
    &.large {
        font-size: x-large;
    }
    &.grey {
        color: grey;
    }
}

.ui {
    font-family: inherit !important;
    &.input input {
        font-family: inherit !important;
        line-height: inherit !important;
    }
    &.form textarea {
        font-family: inherit !important;
        line-height: inherit !important;
    }
}

i.ui.icon {
    font-family: Icons !important;
}

#render-target {
    height: 100%;
    overflow: hidden;
    > div {
        overflow: auto;
    }
}

div[role="button"] {
    outline: none;
}

div[role="button"] {
    outline: none;
}

.ui.stackable.cards > .card{
    margin-right: 0;
    margin-left: 0;
    width: 100% !important;
}

.ui.menu {
    border-radius:0;
}

/* remove margin in comments/dialogue */
.ui.comments .comment .example-editor .text {
    margin: 0;
    color: #fff;
}

.ui.comments .comment .example-editor .item .text{
    color: rgba(0, 0, 0, 0.87);
}

/* configure popup border*/

.ui.popup.fill_contents {
    border: 0;
    padding: 0;
    width:13rem;
}

/* reduce top margin NLU examples */
.ui.top.attached.label:first-child + :not(.attached), .ui.top.attached.label + [class*="right floated"] + * {
    margin-top: 1rem !important;
}

.rt-td .ui.segment {
    background: #ffffff;
    box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15);
    margin: 0rem 0em;
    padding: 1em 1em;
    border-radius: 0;
    border: 0 solid rgba(34, 36, 38, 0.15);
}

.example_edit_save {
    float: left;
    width: 100%;
}

.tester {
    .ellipsis {
        overflow-x: auto;
    }
    .instructions {
        text-align: center;
        margin-top: 2px;
        color: grey;
        font-style: italic;
    }
}

.warning_container {
    display:inline;
    padding-right: 6px;
}

.model_header {
    a {
        color: black;
    }
}

.ReactTable .rt-thead [role="columnheader"] {
    outline: 0;
}

.with_margin {
    margin-bottom: 10px;
}

p.overflow {
    padding-top: 6px;
    height: 33px;
}

#playground .ui.form textarea {
    border: none;
    padding: 15px;
    box-shadow: 0 1px 5px rgba(34, 36, 38, 0.1);
    background: #fff;
    resize: none;
    overflow: hidden;
}

#test_set_buttons {
    margin-bottom: 10px;
}

.example-editor .ui.search.selection.dropdown > input.search {
    line-height: 1.2142em;
    color: white;
    padding-left: inherit;
}

.example-editor .ui.active.search.dropdown input.search:focus + .text {
    color: rgba(255, 255, 255, 0.8) !important;
}

.ui.segment {
    box-shadow: none !important;
}

.ui.menu.secondary.pointing.hoverable .item:hover {
    border-color: #b0b5bb;
}

.ui.basic.button, .ui.basic.button:hover {
    background: #fff none !important;
    &.icon-button {
        background: #fff none !important; 
    }
    &.green.small.icon {
        background: #fff none !important; 
    }
    &.small.icon {
        background: #fff none !important; 
    }
    &.primary {
        background: #fff none !important; 
    }
    &.black.medium {
        background: #fff none !important;
    }
    &.white {
        background: #fff none !important;
    }
    &.transparent {
        background: transparent none !important;
    }
    &.red {
        background: #fff none !important;
    }
}

.ui.basic.buttons .ui.button {
    background: #fff none !important;
}

.read-only{
    pointer-events: none;
    cursor: not-allowed !important;
}

.s-alert-box {
    z-index: 1001 !important; // force alert box to appear over semantic ui modals
}

.with-shortcuts { // will add underline to buttons under this class
    button.button:first-letter {
        text-decoration: underline;
        text-decoration-thickness: 1.5px;
    }
}

@keyframes bfbounce {
    0% {
      transform: scale(1);
    }
  
    50% {
      transform: scale(1.3);
    }

    100% {
      transform: scale(1);
    }
  }

.s-alert-box a {
    opacity: 1 !important;
}
