.dropdown-menu li,
.range-control,
.range-labels li,
.utteranceLine {
  position: relative
}

input,textarea::placeholder {
  color: gray; /* Replace 'gray' with your desired color */
}

#filterBox,
.divHeading,
.nav {
  min-height: 40px
}

.model-arrow,
.model-main {
  transform: translateX(-50%)
}

.form-control,
.form-range {
  -webkit-appearance: none;
  -moz-appearance: none
}

.hide,
.hide-lifespan-settings,
.hide-top,
.note-modal-backdrop,
[for^=note-dialog-image-file],
[for^=note-dialog-video],
[id^=note-dialog-image],
[id^=note-dialog-video] {
  display: none !important
}

#minimap,
#minimap *,
.childReplies {
  cursor: move
}

#drawflow #screen,
#homePage,
.slider,
html {
  overflow: hidden;
  padding-right: 0 !important
}

.spellcheck-error {
  text-decoration: underline;
  text-decoration-color: red;
  text-decoration-style: solid
}

.training-phrase-editor {
  border-right: 3px solid #d4d4d4
}

.training-phrase-editor .float-end {
  display: flex
}

.dropdown-item,
.input,
.output,
img,
svg {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none
}

#minimap *,
#minimap .mask,
.disabledChannelSwitch,
.fa-circle-info,
.fa-plus,
.fa-xmark,
.non-editable,
.title-box,
a.disabled {
  pointer-events: none
}

.row:after,
.timeline .timeline-item:after {
  clear: both
}

.accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3e%3cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 0 .708L10.293 8l-5.647 5.646a.5.5 0 0 1-.708-.708l6-6a.5.5 0 0 1 0-.708l-6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e")
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")
}

.targetNode {
  box-shadow: 0 0 15px red
}

@keyframes pulseTarget {

  0%,
  100% {
    border-color: rgba(255, 0, 0, .1);
    box-shadow: 0 0 0 0 rgba(255, 0, 0, .1)
  }

  50% {
    border-color: transparent;
    box-shadow: 0 0 0 10px rgba(255, 0, 0, .4)
  }
}

.pulsing-border {
  border: 2px solid rgba(255, 0, 0, .1);
  border-radius: 8px;
  animation: 1s linear infinite pulseTarget
}

@keyframes pulseTargetSearch {

  0%,
  100% {
    border-color: rgba(255, 255, 0, .1);
    box-shadow: 0 0 0 0 rgba(255, 255, 0, .1)
  }

  50% {
    border-color: transparent;
    box-shadow: 0 0 0 10px #ff8000
  }
}

.pulsing-border-search {
  border: 2px solid rgba(0, 0, 0, .1);
  border-radius: 8px;
  animation: 1s linear infinite pulseTargetSearch
}

:root {
  --border-color: #cacaca;
  --background-color: #ffffff;
  --node-background-color: #eceaea;
  --background-box-title: #f7f7f7;
  --main-opacity: 0.3;
  --main-opacity-hover: 0.5;
  --active: #07ce42
}

input:focus:not([type=range]) {
  outline: rgba(20, 148, 247, 1) !important
}

.range-container {
  background-color: #fff;
  padding: 0;
  width: 100%;
  display: inline-block
}

.range-container [type=range] {
  -webkit-appearance: none;
  margin: 0px 0;
  width: 100%
}

.range-container [type=range]:focus {
  outline: 0
}

.range-container [type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  list-style-type: none;
  box-shadow: 0 0 0 #222, 0 0 0 #2f2f2f;
  background: #eff1f2;
  border: 0 solid #000;
  border-radius: 5px
}

.range-container [type=range]::-webkit-slider-thumb {
  box-shadow: 0 0 0 #111, 0 0 0 #1e1e1e;
  border: 0 solid #fff;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #00a89c;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -9px
}

.range-container [type=range]:focus::-webkit-slider-runnable-track {
  background: #eff1f2
}

.range-container [type=range]::-moz-range-track {
  width: 220px;
  height: 2px;
  cursor: pointer;
  box-shadow: 0 0 0 #222, 0 0 0 #2f2f2f;
  background: #eff1f2;
  border: 0 solid #000;
  border-radius: 5px
}

.range-container [type=range]::-moz-range-thumb {
  box-shadow: 0 0 0 #111, 0 0 0 #1e1e1e;
  border: 0 solid #fff;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #00a89c;
  cursor: pointer
}

.range-container [type=range]::-ms-track {
  width: 220px;
  height: 2px;
  cursor: pointer;
  background: 0 0;
  border-color: transparent;
  border-width: 10px 0;
  color: transparent
}

.range-container [type=range]::-ms-fill-lower {
  box-shadow: 0 0 0 #222, 0 0 0 #2f2f2f;
  background: #e1e5e7;
  border: 0 solid #000;
  border-radius: 10px
}

.range-container [type=range]::-ms-fill-upper {
  box-shadow: 0 0 0 #222, 0 0 0 #2f2f2f;
  background: #eff1f2;
  border: 0 solid #000;
  border-radius: 10px
}

.range-container [type=range]::-ms-thumb {
  box-shadow: 0 0 0 #111, 0 0 0 #1e1e1e;
  border: 0 solid #fff;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #00a89c;
  cursor: pointer;
  margin-top: 0
}

.range-container [type=range]:focus::-ms-fill-lower {
  background: #eff1f2
}

.range-container [type=range]:focus::-ms-fill-upper {
  background: #fdfdfd
}

.range-labels {
  margin: 0 -80px 0 -100px;
  list-style-type: none
}

div.range-height > label {
  position: absolute;
  margin-top: -5px;
}


.m-0-important {
  margin: 0 !important
}

.range-labels li {
  float: left;
  width: calc(100% / 5);
  text-align: center;
  cursor: pointer
}

.range-labels li.active {
  color: #00a89c
}

.range-labels li.active::before {
  border: none !important
}

.range-labels li::before {
  content: "";
  position: absolute;
  height: 8px;
  border: 1px solid #eff1f2;
  top: -21px;
  left: 50%;
  z-index: 0
}

@media screen and (max-width:1225px) {
  .container-fluid {
    display: none !important
  }
}

@media screen and (max-width:400px) {
  .panel-left-items {
    display: none !important
  }
}

.mt-1 {
  margin-top: .1rem !important
}

.text-start {
  text-align: left !important;
  line-height: 42px !important
}

.menuSlide {
  width: 100vw;
  overflow-x: hidden;
  margin: auto;
  display: flex
}

.fa.fa-file-text-o {
  font-family: Roboto;
  font-weight: 400
}

.fa-fw {
  text-align: center !important;
  width: 1.25em;
  font-weight: 300
}

.btn.active {
    /* Example: A more pronounced depressed look */
    background-color: #0056b3; /* Darker blue */
    border-color: #004085;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); /* Inner shadow */
}

#cards_landscape_wrap-2 .card-flyer .text-box,
#save-status,
.addModule,
.btn-var span,
.circleIcon,
.circleIconSmall,
.close-window,
.context-pill-value,
.converse-columnl,
.custom-card,
.drawflow-button,
.drawflow-node-badge,
.green-circle,
.hcentre,
.menu ul li,
.modal .close,
.report-badge,
.route-plus,
.toggle-button,
i,
section {
  text-align: center
}

.fa-menu-item {
  line-height: 22px
}

.fa-duotone,
.fa-light {
  transition: transform .1s
}

.fa-duotone:hover,
.fa-light:hover {
  transform: scale(1.25)
}

hr {
  margin: .25rem 0;
  color: #fff;
  background-color: currentColor;
  border: 5px;
  opacity: .5
}

.cursor-default,
div.node-editable {
  cursor: pointer
}

.drawflow-button:hover,
div.note-editable>p {
  cursor: text
}

.note-modal-footer .note-btn {
  float: middle;
  line-height: 25px !important;
  cursor: pointer !important;
  font-size: 1.2em !important;
  font-weight: 300
}

.note-btn {
  font-size: 16px !important
}

.note-modal-footer {
  margin: auto !important;
  position: relative !important;
  width: 25% !important
}

.note-modal-header {
  padding: 10px 20px;
  border: 0 !important
}

.note-modal-content {
  border-radius: 20px;
  font-weight: 300
}

.note-modal-backdrop {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 1 !important;
  -webkit-opacity: .5;
  -khtml-opacity: .5;
  -moz-opacity: .5;
  opacity: .5
}

#converseSimulator,
#filterBox,
#homePage,
#minimap,
#minimap .mask,
.badge-aqua,
.badge-blue,
.badge-cyan,
.badge-darkpurple,
.badge-darkred,
.badge-darkseagreen,
.badge-gray,
.badge-green,
.badge-lilac,
.badge-magenta,
.badge-orange,
.badge-pink,
.badge-purple,
.badge-red,
.badge-slate,
.badge-turquoise,
.btn-var span,
.circleIconSmall,
.converse-columnr,
.green-tag,
.relationship-box,
.ribbon,
.ribbon span,
.route-plus,
.slider,
.slider:before,
.spinner .circle,
.topRight,
section::before {
  position: absolute
}

.note-modal-footer {
  height: 60px !important;
  padding: 10px;
  text-align: center
}

[class*=" note-icon"]:before,
[class^=note-icon]:before {
  display: inline-block;
  font-family: summernote;
  font-style: normal;
  font-weight: 500;
  text-decoration: inherit;
  color: #000 !important;
  font-size: .75em !important;
  text-rendering: auto;
  text-transform: none;
  vertical-align: middle;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  speak: none
}

a.disabled {
  color: #dadada !important
}

.btn-varbase,
.drawflow-general-inline,
.drawflow-node-badge,
.editTextDiv,
.gimage,
.lds-hourglass,
.menu ul li,
.radio-col,
.radio-col img,
.route-plus,
span.regex-pill-name[contenteditable] {
  display: inline-block
}

.disabledChannelSwitch {
  opacity: .4 !important;
  transition: .5s
}

#homePage,
.gimage,
.gimage:hover,
.imgbgchk:checked+label>.tick_container,
.param-table-add-row-btn:hover {
  opacity: 1
}

#drawflow {
  position: relative !important;
  overflow: auto !important;
  cursor: crosshair;
  width: 100%;
  height: calc(100% - 40px);
  top: 40px;
  background: var(--background-color);
  background-size: 25px 25px;
  background-image: linear-gradient(to right, #ddd 1px, transparent 1px), linear-gradient(to bottom, #ddd 1px, transparent 1px)
}

.form-floating>label {
  line-height: 14px
}

#minimap {
  border: 1px solid #007bff;
  width: 300px;
  height: 300px;
  background: #fff;
  bottom: 95px;
  opacity: .9;
  right: 1%;
  z-index: 999;
  content-visibility: auto
}

.divHeading {
  overflow: hidden !important;
  color: #000;
  margin-top: 0;
  border-bottom: 1px solid #cfcfcf;
  font-weight: 300;
  padding: 0 0 0 5px;
  height: 42px;
  background-color: #eaeaea;
  font-size: 14px;
  line-height: 40px !important;
  width: 100%
}

#filterBox,
.route-plus {
  padding: 2px;
  cursor: pointer
}

.divHeadingPlus {
  border-style: solid;
  border-color: #cfcfcfcf;
  border-width: 1px
}

.divSubHeading {
  background: #e7e7e7;
  border-bottom-style: solid;
  border-bottom-color: #c8c8c8;
  font-size: 14px
}

#minimap .mask {
  border: 1px solid #007bff;
  border-radius: 4px;
  background: #007bff11;
  opacity: 1
}

.route-plus {
  bottom: -15px;
  color: #fffefe;
  margin-left: 40%;
  vertical-align: middle;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  transition: .5s
}

.route-plus-pink {
  background: #d818d2 !important
}

.route-plus-pink:hover {
  background: #ff6ffa !important;
  transform: scale(1.5)
}

.route-plus-blue {
  background: #1865d8 !important
}

.route-plus-blue:hover {
  background: #6f9dff;
  transform: scale(1.5)
}

.gimage {
  width: 128px;
  height: 128px;
  background-position: center center;
  background-color: gray;
  margin: 5px
}

.toast,
.tooltip-inner,
div.note-modal-header>button {
  opacity: 1 !important
}

#toast-container>.toast {
  background-image: none !important
}

#toast-container>.toast:before {
  position: relative;
  font-family: FontAwesome;
  font-size: 50px;
  line-height: 28px;
  float: left;
  margin-left: -.8em;
  color: #fff;
  padding-right: .5em
}

#toast-container>.toast-warning:before {
  content: "\f06a";
  color: orange
}

#toast-container>.toast-error:before {
  content: "\f057";
  color: red
}

#toast-container>.toast-info:before {
  content: "\f05a";
  color: #2f96b4
}

#toast-container>.toast-success:before {
  content: "\f058";
  color: #51a351
}

#accordion-templates .accordion-button::after,
.hideContextOption,
.mainMenuTiles,
.modal-backdrop,
.modal-backdrop.in,
.no-bcc,
.no-cc,
.param-table-cell-samples,
.radio-img>input,
.switch input,
.timeline-horizontal .timeline-item:after,
.timeline-horizontal .timeline-item:before {
  display: none
}

.radio-img>.gimage {
  cursor: pointer;
  border: 2px solid #000
}

div.toast-message {
  font-size: 18px !important
}

.radio-img>input:checked+.gimage {
  border: 10px solid #add8e6
}

.nav {
  flex-wrap: nowrap !important;
  border-bottom-style: none
}

.close-widget,
.preview {
  justify-content: center
}

#filterBox {
  color: #fff;
  min-width: 50px;
  max-width: 90%;
  overflow-y: auto;
  background-color: rgba(82, 168, 236, .8);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-color: #007bff;
  z-index: 999
}

.sysEntityWord {
  background-color: #007bff;
  color: #fff;
  border-radius: 25px;
  font-size: 14px;
  margin: 2px !important;
  border: 1px solid #fff;
  padding: 10px !important;
  cursor: pointer
}

.sysEntityWord:hover {
  background-color: #0b5ed7;
  color: #fff
}

.template-icons {
  margin: 0 !important;
  padding: 10px;
  background: #c8e3ff;
  border-radius: 50%;
  border-style: solid;
  border-color: #fff;
  transition: background 1s;
  box-shadow: 0 0 3px #000
}

.light-border {
  border: 1px solid #dedede
}

.basic-border {
  background: #f8f8f8;
  color: #000;
  border: 1px solid silver;
  border-radius: 5px
}

.basic-border-blue {
  background-color: #007bff !important;
  color: #fff !important;
  border: 2px solid #00f;
  border-radius: 5px
}

.border-radius-10,
.border-radius-10-short {
  background: #f8f8f8;
  transition: transform .25s
}

.border-radius-10 {
  min-height: 115px;
  margin: 10px
}

.border-radius-10:hover {
  cursor: pointer;
  box-shadow: 2px 2px 10px silver;
  background: #efefef;
  transform: scale(1.1);
}

.border-radius-10,
.voiceScriptAssist:focus {
  box-shadow: 0 0 5px #007bff
}

.border-radius-10-short {
  border-radius: 10px;
  min-height: 35px;
  min-width: 200px;
  margin: 2px
}

.node-prompt,
div.drawflow_content_node>div>div.box.collapse.show,
div.drawflow_content_node>div>div.box>div.drawflow-button.button_output_1 {
  margin-top: 30px !important
}

.border-radius-10-short:hover {
  cursor: pointer;
  box-shadow: 2px 2px 10px silver;
  background: #f0f8ff;
  transform: scale(1.025)
}

.listener .previewEntitiesDetails,
.preview,
.previewEntities {
  background: #f8f8f8;
  color: #000
}

.node-prompt {
  height: 65px;
  overflow-y: auto;
  line-height: 1.2em;
  font-size: 14px;
  resize: none
}

.textreplies>div.drawflow_content_node>div:first-child>div>textarea {
  min-height: 80px;
  max-height: 450px;
  width: 100% !important;
  user-select: text;
  line-height: 22px;
  cursor: auto
}

.preview {
  align-items: center;
  box-shadow: 0 0 2px #a9a9a9;
  padding: 5px
}

.swal2-cancel,
.swal2-confirm,
.swal2-deny {
  box-shadow: none !important;
  outline: 0 !important
}

.preview img {
  width: 50%
}

.label-text {
  font-size: 1em;
  font-weight: 400;
  fill: darkgray
}

.previewEntities {
  line-height: 38px;
  font-size: 14px;
  padding-left: 10px;
  padding-right: 10px;
  height: 112px !important;
  overflow-wrap: break-word;
  overflow-y: auto
}

.entityRows,
.swal2-shown,
body {
  padding-right: 0 !important
}

.previewEntities-top {
  margin-top: 41px
}

.previewEntitiesDetails:not(.listener) {
  background: #f8f8f8;
  color: #000;
  height: 60vh !important;
  font-size: 14px;
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100vh - 560px) !important
}

.swal2-confirm,
.swal2-confirm:hover {
  min-width: 100px !important;
  color: #fff !important
}

.listener .previewEntitiesDetails {
  border: 1px solid silver;
  border-radius: 5px;
  font-size: 14px;
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100vh - 350px) !important
}

#entityDefinition {
  padding-left: 0;
  padding-right: 0
}

.entityRows {
  position: relative;
  padding-left: 0 !important;
  margin-left: 0 !important;
  margin-top: 10px
}

.entityRows:hover,
.suggestionHeader:hover {
  box-shadow: 1px 1px 2px #1494f7 !important
}

.subSpan span:empty {
  padding-right: 1em;
  width: 100%
}

.entityName {
  background: #fff;
  width: 300px;
  line-height: 38px;
  cursor: text;
  border: 1px solid #a9a9a9;
  height: fit-content;
  position: relative;
  margin: 2px
}

.entityRules {
  height: inherit;
  border-radius: 5px;
  border: 1px solid #a9a9a9
}

.previewEntities>u {
  text-decoration: none;
  border-bottom: 5px solid #7cfc00
}

.entityValues {
  width: 74%;
  line-height: 45px;
  height: 45px;
  margin: 5px;
  border-radius: 5px;
  border: 1px solid #a9a9a9
}

.form-select {
  width: 98.5%
}

.form-select-no-margin {
  font-size: 16px;
  font-weight: 300;
  margin: 0px;
  width: 98.5%
}


.form-switch .form-check-input:checked {
  max-width: 45px !important;
  cursor: pointer
}

.form-switch .form-check-input {
  max-width: 45px !important
}

.bth-height-adjust {
  line-height: 1.9em
}

.btn-warning {
  background-color: #ffa000fc;
  border-color: #ffc107
}

.btn-info {
  background-color: #00badf;
  border-color: #0dcaf0
}

.bold {
  font-weight: 500 !important;
  display: inline-block
}

.dropdown-menu>li:hover>.dropdown-submenu,
.wrap {
  display: block
}

.bold-medium,
.fa-16x,
.fa-18x {
  font-weight: 500
}

.swal2-confirm {
  background-color: #0664a4 !important;
  border-radius: .5em !important;
  border: 3px solid #0664a4 !important
}

.swal2-cancel,
.swal2-deny {
  background-color: #fff !important;
  border-radius: .5em !important;
  min-width: 100px !important
}

.swal2-deny {
  border: 3px solid #0664a4 !important;
  color: #0664a4 !important
}

.swal2-cancel {
  border: 3px solid #a9a9a9 !important;
  color: gray !important
}

.swal2-confirm:hover {
  background: #004d81 !important;
  border-color: #004d81 !important;
  border-radius: .5em !important;
  border-style: solid !important
}

.swal2-cancel:hover {
  background: #e8e8e8 !important;
  color: gray
}

.swal2-deny:hover {
  background: #e8e8e8 !important;
  border-color: #0664a4 !important;
  color: #0664a4 !important
}

.swal2-title {
  font-size: 2em;
  font-weight: 500 !important
}

.swal2-icon.swal2-info,
.swal2-icon.swal2-question {
  border-color: #bfbfbf !important;
  color: #bfbfbf !important;
  font-weight: 600 !important
}

.swal2-icon.swal2-success .swal2-success-ring {
  color: #a5dc86 !important;
  border: .3em solid #a5dc86 !important;
  font-weight: 900 !important
}

.swal2-icon.swal2-error {
  border-color: red !important;
  color: red !important;
  font-weight: 600 !important
}

.swal2-icon.swal2-warning {
  border-color: #ffc107 !important;
  color: #ffc107 !important;
  font-weight: 600 !important
}

.swal2-container {
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.field-highlighter {
  border-bottom: 2px solid #dcdcdc;
  background-color: #ffffff55
}

* {
  -moz-user-select: -moz-none;
  -o-user-select: none;
  user-select: none;
  --locked-color: red;
  --unlocked-color: rgb(0, 219, 0)
}

.swal2-shown {
  overflow: unset !important
}

body.swal2-shown,
html.swal2-shown {
  overflow-y: hidden !important;
  overflow-x: hidden !important;
}

::spelling-error {
  color: #fff !important;
  text-decoration: wavy white !important;
  background: red !important
}

#contextMenuDelete li,
#contextMenuDigress li,
.them-edit-link a,
a.non-link {
  text-decoration: none
}

#contextMenuDelete>ul>li {
  padding: 8px !important;
  color: #fff
}

::-moz-selection :not(textarea, input) {
  color: revert;
  background: revert
}

#utterance,
textarea {
  cursor: auto
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  cursor: pointer
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #a3a3a3;
  border-radius: 10px;
  cursor: pointer
}

::scrollbar {
  cursor: pointer
}

#drawflow::-webkit-scrollbar {
  cursor: pointer
}

::-webkit-scrollbar-thumb {
  background: #d3d3d3;
  border-radius: 10px
}

::-webkit-scrollbar-thumb:hover {
  background: #a3a3a3
}

.card {
  background-color: #fff0
}

.card.no-border {
  flex: 1 1 auto;
  padding: 5px !important;
  padding-top:0px !important;
}

.card-header:first-child {
  border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
  padding-left: 2px
}

#homePage {
  border: none;
  left: 0;
  content: "";
  right: 0;
  bottom: 0;
  z-index: -1;
  top: 0
}

.card-body {
  flex: 1 1 auto;
  padding: 0 .6rem
}

.card-body {
  flex: 1 1 auto;
  padding: 0 .6rem
}


#contextMenuDelete,
#contextMenuDigress {
  position: absolute;
  display: none
}

#contextMenuDelete li,
#contextMenuDigress li {
  background-color: #037dff;
  color: #fff;
  cursor: pointer
}

#contextMenuDelete li:hover {
  background-color: red;
  color: #fff
}

#contextMenuDigress li:hover {
  background-color: #007bff;
  color: #fff !important;
}

.wrap {
  width: 90%;
  margin: 0 auto
}

.box-shape {
  width: 38px;
  height: 38px
}

input:focus::selection {
  color: #fff;
  background: #1194ff
}

::selection {
  background: #c8c8c8;
  color: #000;
  height: fit-content
}

.swal2-popup {
  display: flex;
  margin: 0 !important;
  background: rgb(255 255 255) !important;
  min-height:150px !important;
}

ul {
  margin-block-start: 0em;
  margin-block-end: 0em
}

html {
  background: #fff;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh
}

.h5,
.menu ul,
.propertyHeader,
body,
div[class^="col-*"],
h5 {
  font-weight: 300
}

:-moz-full-screen,
:-ms-fullscreen,
:-webkit-full-screen,
:fullscreen {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  background-color: #fff
}

body {
  font-family: Roboto, sans-serif;
  font-size: 14px;
  background-color: #ffffff00;
  overflow: hidden
}

.p-white,
p {
  font-family: Roboto, Arial
}

.paramValueContextDiv {
  position: absolute;
  top: 100%;
  left: 0;
  padding: 5px;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 0 5px silver
}

.option {
  padding: 5px
}

.option:hover {
  background-color: #eee;
  cursor: pointer
}

.h5,
h5 {
  font-size: 1.1rem
}

.w-100 {
  width: 99.5% !important
}

.w-10 {
  width: 4em !important
}

.w-15 {
  width: 5em !important
}

.w-20 {
  width: 7em !important
}

.w-33 {
  width: 33.3%
}

.h-5 {
  height: 5%
}

.h-10 {
  height: 10%
}

.h-15 {
  height: 15%
}

.h-20 {
  height: 20%
}

.h-30 {
  height: 30%
}

.h-35 {
  height: 35%
}

.h-40 {
  height: 40%
}

.h-99 {
  height: 99% !important
}

.line-height-compressed {
  line-height: 20px
}

.form-check-label {
  color: #000;
  font-weight: 400
}

input[type=range] {
  height: 42px !important;
  cursor: pointer
}

input,
select,
textarea {
  font-size: 14px;
  padding-bottom: 0;
  -moz-user-select: text !important;
  -khtml-user-select: text !important;
  -webkit-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important
}

.model-main {
  position: fixed;
  top: 20px;
  left: 50%;
  background-color: #add8e6;
  padding: 10px
}

.model-child {
  position: relative;
  margin-top: 100px
}

.model-line {
  position: absolute;
  width: 2px;
  background-color: #000
}

.model-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid #000;
  top: -10px;
  left: 50%
}

.form-range {
  width: 100%;
  padding: 1px 2px 2px;
  position: relative;
  vertical-align: text-top;
  align-content: center;
  height: 40px !important;
  margin-bottom: 4px;
  line-height: 40px !important;
  background-color: #fff;
  appearance: none
}

.form-control {
  width: 99% !important;
  /*margin: 5px; */
  margin-left:5px;
}

.input-group>button {
  /*margin-top: 5px !important;*/
  margin-left: -10px !important;
  height: 42px !important;
  margin-top: 0px !important;
}

.input-group>.form-control,
.input-group>.form-select {
  position: relative;
  flex: 1 1 auto;
  font-family: Arial;
  width: 1%;
  padding: 5px;
  font-size: 16px;
  line-height: 30px !important;
  min-width: 0
}

button {
  cursor:pointer;
}

.single-tabline-height {
  height: calc(100vh - 200px) !important;
  overflow-y: auto
}

.propertyHeader {
  font-size: 20px;
  padding-left: 5px !important;
  color: #fff;
  background: #007bff;
  height: 45px;
  line-height: 45px;
  top: 0;
  width: 100%
}

.utterances,
.visualText {
  color: #000;
  font-size: 14px;
  width: 100%;
  white-space: pre-wrap
}

.btn,
.menu ul li,
.nav-tabs .nav-link,
.utterances>div {
  white-space: nowrap
}

.propertyHeader-light {
  background: #eeeeee88;
  border: 2px solid #ddd;
  height: 50px;
  line-height: 50px;
  font-weight: 300;
  top: 0;
  width: 100%
}

.utterances,
.visualText,
textarea {
  background: white !important
}

.utterances {
  line-height: 0;
  margin: 5px auto 6px;
  -o-user-select: text;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
  overflow-y: auto
}

.visualText {
  border: 1px solid;
  height: 250px !important;
  overflow-y: auto;
  line-height: 2rem;
  margin: 0 auto;
  -o-user-select: text;
  border-radius: 15px;
  -webkit-user-select: all;
  -moz-user-select: all;
  -ms-user-select: all;
  user-select: all
}

.addModule {
  right: 0;
  padding: 2px;
  cursor: pointer;
  font-size: 20px;
  margin-top: 5px;
  width: 36px;
  font-weight: 900;
  height: 36px;
  border: 2px solid silver;
  color: #7b7a7a !important;
  vertical-align: middle;
  line-height: 28px
}

.addModule:hover {
  background: #0057b4 !important;
  color: #fff !important
}

.h-property-window {
  overflow-y: hidden !important;
  overflow-x: hidden !important
}

.utterances>div {
  border: 1px solid silver;
  outline: 0 !important;
  max-height: 38px;
  height: 38px !important;
  min-height: 38px;
  max-width: 100%;
  text-overflow: ellipsis;
  line-height: 38px !important;
  display: flex;
  color: #000;
  margin-top: 5px;
  background: #fff;
  align-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline
}

header {
  height: 50px;
  background: #eee
}

header h6 {
  margin: 10px;
  color: #000;
  line-height: 25px;
  font-size: 1.4em;
  display: inline
}

.context-pill-name:focus,
.context-rule-name:focus,
.regex-pill-name:focus,
a.non-link,
header a {
  color: #000
}

.them-edit-link {
  position: absolute;
  top: 10px;
  right: 100px;
  color: #000;
  font-size: 40px
}

.github-link {
  position: absolute;
  top: 10px;
  right: 20px;
  color: #000
}

.converse-conversational-wrapper {
  width: 100%;
  height: calc(100% - 50px);
  background: #fff;
  display: flex;
  position: fixed
}

.btn {
  color: #fff;
  vertical-align: inherit;
  font-size: 14px
}

.btn-group,
.simulator-close {
  vertical-align: initial
}

.btn:hover {
  color: #d3d3d3
}

.btn-white {
  background: #fff;
  box-shadow: 0 0 5px #000
}

.btn-outline-primary {
  background-color: #fff
}

.btn-outline-danger:hover,
.btn-outline-primary:hover,
.btn-outline-success:hover {
  color: #fff !important
}

.btn-outline-primary-ext {
  color: #0d6efd
}

.badge-slate,
.blue,
.blue:hover,
.btn-outline-primary-ext:active,
.btn-outline-primary-ext:focus,
.green,
.nav-link:focus,
.nav-link:hover,
.pink,
.slate {
  color: #fff
}

.btn-outline-primary-ext:hover {
  color: #0d6efd !important;
  background: #d3d3d3 !important
}

.custom-card {
  min-height: 12vh;
  color: #444;
  font-weight: 500;
  padding: 10px;
  font-size: 1.7vw;
  transition: transform .2s
}

.custom-card:hover {
  border-radius: 10px;
  cursor: pointer;
  transform: scale(1.1)
}

.custom-body-card:hover {
  background-color: #f5f5f5;
  border-width: 1px;
  cursor: pointer
}

.navbar {
  padding-top: 0;
  padding-bottom: 0
}

.navbar-nav .dropdown-menu {
  border-style: solid;
  box-shadow: 5px 5px 20px #e3e3e3e3
}

.btn .btn-primary .dropdown-toggle {
  padding: 7.25px 20px;
  margin-left: 2px
}

.dropdown-toggle::after {
  display: inline-block;
  margin-left: 0 !important;
  vertical-align: .255em;
  content: "";
  border-top: .3em solid;
  border-right: .3em solid transparent;
  border-bottom: 0
}

.btn-primary {
  background-color: #007bff;
  border-color: #0d6efd
}

a.dropdown-item:hover {
  background: #0057b4 !important;
  color: #fff
}

.btn-light {
  background-color: #fefefefe;
  border-color: #fefefe
}

.choice-list {
  overflow-y: hidden;
  overflow-x: auto
}

.nav-tabs .nav-link {
  font-size: 14px;
  margin-bottom: -1px;
  border-left-color: #a9a9a9;
  border-right-color: #a9a9a9;
  border-top-color: #a9a9a9;
  margin-right: 2px;
  line-height: 20px;
  color: #000;
  background: #ececec;
  height: 40px;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important
}

.icon-btn {
  height: 35px;
  border-radius: 5px !important
}

.align-page-title {
  display: inline-block;
  height: 100%;
  line-height: 50px
}

.dropdown-menu {
  background: #037dff
}

.dropdown-item {
  line-height: 35px;
  color: #fff;
  cursor: pointer
}

.dropdown-item-red {
  background: #dc3545 !important
}

.nav-link:hover {
  background: silver
}

.dropdown-item:hover {
  color: #fff !important;
  background: #0057b4 !important
}

.dropdown-menu .dropdown-submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: -7px
}

.dropdown-menu .dropdown-submenu-left {
  right: 100%;
  left: auto
}

.drawflow-node.welcome,
.submenu-link {
  width: 250px
}

.wd-10 {
  width: 10% !important
}

.wd-20 {
  width: 20% !important
}

.wd-25 {
  width: 25% !important
}

.dropdown-menu .submenu-link::after {
  content: "";
  position: absolute;
  right: 0;
  height: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 6px solid transparent;
  border-left-color: #fff
}

.navbar-nav .nav-link {
  margin-left: 3px;
  background: #007bff;
  color: #fff !important;
  border-radius: 5px
}

.navbar-nav .nav-link:hover {
  background: #0057b4;
  color: #fcf9f9
}

.navbar-nav .nav-link-white {
  margin-left: 3px;
  background: #fff;
  color: #000;
  border-radius: 5px
}

.navbar-nav .nav-link-white:hover {
  background: #e2e2e2;
  color: #797979
}

.navbar-nav .nav-link-red {
  margin-left: 3px;
  background: #dc3545;
  border-color: #dc3545;
  color: #fff;
  border-radius: 5px
}

.navbar-nav .nav-link-red:hover {
  background: #c82333;
  border-color: #bd2130
}

.nav-tabs .nav-link.active {
  color: #000;
  font-weight: 300;
  border-top: 3px solid #007bff !important;
  background: #fff;
  border-color: #dee2e6 #dee2e6 #fff
}

.suggestionPanel {
  transition: .3s
}

.fade-in-bubble {
  display: block;
  transform: translateY(-10px);
  transition: transform .3s ease-in-out
}

.fade-in-bubble.fade-in-done {
  transition: none
}

.fadeIn {
  animation: fadeIn 0.5s ease-in forwards; /* Adjust duration and easing as needed */
}
@keyframes fadeIn {
  from {
      opacity: 0;
  }

  to {
      opacity: 1;
  }
}

@keyframes fadeOut {
  from {
      opacity: 1;
  }

  to {
      opacity: 0;
  }
}

.zoomIn {
  animation: .5s createBox
}

.zoomOut {
  animation: .5s closeBox
}

@keyframes createBox {
  from {
    transform: scale(0)
  }

  to {
    transform: scale(1)
  }
}

@keyframes closeBox {
  from {
    transform: scale(1)
  }

  to {
    transform: scale(0)
  }
}
/*
.accordion-button:not(.collapsed) {
  color: #000;
  font-weight: 300;
  background-color: #f3f3f3;
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
  min-height: 38px !important
}
*/

.childReplies>.divHeading:hover {
  background: #7abcff;
  background: -moz-linear-gradient(top, #7abcff 0, #60abf8 44%, #4096ee 100%);
  background: -webkit-linear-gradient(top, #7abcff 0, #60abf8 44%, #4096ee 100%);
  background: linear-gradient(to bottom, #7abcff 0, #60abf8 44%, #4096ee 100%);
  color: #fff
}

.tooltip-inner {
  background-color: #fff;
  color: #000;
  font-size: 1.2em;
  box-shadow: 0 0 4px #000
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: silver
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: silver
}

.tooltip.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: silver
}

.tooltip.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: silver
}

.single-layer-column-scroll {
  height: calc(100vh - 180px) !important;
  padding: 5px;
  padding-top: 0 !important;
  overflow-y: auto !important
}

.tab-pane {
  padding: 0 !important
}

.menuwrapper {
  overflow-y: scroll;
  max-width: 250px !important;
  min-width: 290px;
  height: calc(100% - 5rem)
}

.converse-publish-container {
  display: grid;
  place-items: center center;
  justify-content: space-evenly;
  min-height: 400px;
  align-content: center;
  flex-wrap: wrap
}

.utteranceLine {
  border-color: silver;
  border-style: Solid;
  min-height: 2.5em !important;
  margin-right: 5px;
  margin-left: 5px;
  padding-left: 10px;
  line-height: 2.1em;
  border-width: 1px;
  cursor: text
}

.menu,
.menu ul {
  position: absolute;
  background: #eee;
  display: block
}

.utteranceLine:hover {
  border-color: #0057b4;
  border-width: 1px
}

.utteranceLine:focus {
  border-color: #52a8ec;
  border-style: Solid;
  border-left-width: 10px;
  box-shadow: 1px 1px 5px #1494f7 !important
}

.duplicate {
  border-color: red !important;
  border-width: 2px 2px 2px 10px !important;
  box-shadow: none
}

.converse-navigator {
  background: #fff;
  overflow: hidden;
  max-width: 200px !important;
  min-width: 200px;
  height: 100%;
  flex: 1 0 0%;
  border-right: 1px solid var(--border-color) !important
}

.drawflow-rule,
.menu ul {
  overflow-x: auto;
  white-space: nowrap
}

.drag-drawflow {
  line-height: 40px;
  border-bottom: 1px solid var(--border-color);
  padding-left: 10px;
  cursor: move
}

.parameter-link,
.parameter-link-reserved {
  min-height: 35px;
  min-width: 200px !important;
  margin: 5px;
  line-height: 35px;
  color: #000;
  text-align: left
}

.menu ul li,
.parameter-link {
  cursor: pointer;
  position: relative
}

.menu {
  height: 40px;
  margin-left: 5px;
  width: calc(100% - 50px)
}

[contenteditable] {
  -moz-appearance: textfield;
  -webkit-appearance: textfield
}

table>[contenteditable] {
  width: -webkit-fill-available !important;
  height: -webkit-fill-available !important
}

.menu ul {
  margin-top: 2px;
  height: 70px;
  margin-left: 0;
  border-bottom-color: silver;
  border-bottom-style: solid;
  width: calc(100vw - 280px);
  overflow-y: hidden
}

.menu ul li {
  line-height: 32px;
  box-sizing: border-box;
  padding: 0 8px 5px;
  font-size: 14px;
  border-left: 1px solid silver !important;
  border-top: 1px solid silver !important;
  border-right: 1px solid silver !important;
  border-bottom: 1px solid silver !important;
  background: #f0f0f0;
  max-width: max-content;
  margin: 5px 1px 0;
  height: 36px;
  margin-top: 3px !important;
  width: 100%;
  overflow: hidden
}

.menu ul li:hover {
  background: #cfcfcf
}

.accordion-button:after {
  order: -1;
  margin-left: 0;
  margin-right: .5em
}

.menu ul li.selected {
  font-weight: 600;
  border-top: 3px solid #007bff !important;
  border-bottom: 3px solid #fff !important;
  background: #eeeEEE55 !important;
  height: 36px
}

.parameter-link {
  border: 1px solid silver;
  border-radius: 15px;
  padding-left: 15px;
  background: #bfd9ff !important
}

.parameter-link:hover {
  background: #44d8fd !important;
  border-color: #1b76ff
}

.draggable {
  cursor: grabbing !important;
  user-select: none !important
}

.parameter-link-reserved {
  cursor: pointer;
  border: 1px solid silver;
  background: #d5ffc7 !important;
  border-radius: 15px;
  padding-left: 10px;
  position: relative
}

.parameter-link-reserved:hover {
  background: #79ff4c !important;
  border-color: #15ae01
}

.swal-wide {
  width: 80% !important
}

.swal-height {
  height: 60vh !important
}

[contenteditable=true]:focus,
[contenteditable=true]:hover:active {
  background-color: #fff;
  cursor: text;
  box-shadow: 1px 1px 10px rgba(20, 148, 247, .6) !important
}

.nextSlide,
.preSlide {
  background: #fff;
  border-color: silver;
  border-width: 2px;
  height: 35px;
  border-radius: 0;
  color: #000
}

.nextSlide {
  position: fixed;
  right: 40px;
  top: 55px;
  z-index: 1
}

.btn-varbase {
  color: #fff;
  font-weight: 300;
  background: 0 0;
  transition: 1s;
  outline: 0
}

select {
  font-family: FontAwesome, Roboto
}

.smallTalkResponses,
.tag-height,
textarea,
textarea:focus {
  outline: 0 !important
}

.btn-var {
  position: relative;
  bottom: 20px;
  border: none;
  margin-bottom: 5px;
  right: 10px;
  box-shadow: none;
  width: 100% !important;
  height: 40px;
  line-height: 42px;
  perspective: 230px
}

.btn-var-blue span {
  background: #00acee
}

.btn-var-green span {
  background: #00c31a
}

.btn-var-orange span {
  background: #ffc559;
  background: linear-gradient(0deg, #eec12d 0, #ff9407 100%)
}

.btn-var span {
  display: block;
  width: 100% !important;
  height: 38px;
  border-radius: 5px;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: .3s;
  transition: .5s
}

.btn-var span:first-child {
  box-shadow: -7px -7px 20px 0 #fff9, -4px -4px 5px 0 #fff9, 7px 7px 20px 0 #0002, 4px 4px 5px 0 #0001;
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  transform: rotateX(90deg);
  -webkit-transform-origin: 50% 50% -20px;
  -moz-transform-origin: 50% 50% -20px;
  transform-origin: 50% 50% -20px;
  cursor: pointer
}

.btn-var span:nth-child(2) {
  -webkit-transform: rotateX(0);
  -moz-transform: rotateX(0);
  transform: rotateX(0);
  -webkit-transform-origin: 50% 50% -20px;
  -moz-transform-origin: 50% 50% -20px;
  transform-origin: 50% 50% -20px;
  cursor: pointer
}

.btn-var:hover span:first-child {
  box-shadow: inset 2px 2px 2px 0 rgba(255, 255, 255, .5), 7px 7px 20px 0 rgba(0, 0, 0, .1), 4px 4px 5px 0 rgba(0, 0, 0, .1);
  -webkit-transform: rotateX(0);
  -moz-transform: rotateX(0);
  transform: rotateX(0)
}

.btn-var:hover span:nth-child(2) {
  color: transparent;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg)
}

.smoothScroll {
  scroll-behavior: auto
}

.smallTalkResponses {
  line-height: 1.3rem;
  border-style: solid;
  height: 125px;
  width: 98.5% !important;
  margin-top: 8px !important;
  margin-bottom: 2px !important;
  padding: 10px;
  margin-left: 5px
}

.tag-height {
  background: #ffffff00 !important;
  font-size: 5em !important;
  color: silver !important;
  margin-left: 50px !important;
  width: 1.7em !important;
  border: none !important;
  height: auto !important
}

.channel-icon,
.tag-intent-count {
  font-size: smaller;
  box-shadow: 0 0 5px #000
}

.tag-content {
  height: 120px !important
}

.tag-intent-count {
  border-radius: 50%;
  right: 80px !important;
  color: #fff !important;
  width: 2.2em;
  border: 2px solid #fff
}

.channel-icon {
  height: 40px;
  top: -60%;
  position: absolute;
  border-radius: 50%;
  right: 70px !important;
  width: 3em;
  border: 2px solid #fff
}

.note-input,
textarea {
  width: 100% !important
}

.note-editing-area {
  height: calc(100vh - 297px)
}

.note-input {
  font-size: 16px
}

.note-editor .note-editing-area .note-editable table td,
.note-editor .note-editing-area .note-editable table th {
  border: 1px solid #000;
  padding: 5px 3px
}

.note-editor.note-airframe .note-editing-area .note-codable,
.note-editor.note-frame .note-editing-area .note-codable {
  display: none;
  width: 100%;
  font-size: 14px;
  padding: 10px;
  border: none;
  box-shadow: none;
  font-family: Roboto, Monaco, monospace, sans-serif;
  color: #fff;
  background-color: #000 !important;
  resize: none;
  outline: 0;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 0;
  margin-bottom: 0
}

#drawflow #screen,
.inner,
.lds-hourglass:after,
.paper:before {
  box-sizing: border-box
}

.shadow {
  box-shadow: 1px 1px 5px silver
}

.drawflow .drawflow-node {
  border: 3px solid var(--border-color);
  padding: 4px;
  min-width: 100px;
  max-width: 550px;
  min-height: auto;
  border-radius: 20px
}

.drawflow .drawflow-node.selected {
  box-shadow: 0 0 4px 2px #007bff
}

.drawflow .drawflow-node.selected .title-box {
  color: #fff;
  border-radius: 25px
}

.standard-border {
  border-radius: 0;
  border: 1px solid #a9a9a9 !important;
  line-height: 40px;
  padding-left: 10px
}

.standard-border:hover {
  background: #d3d3d3
}

.drawflow .drawflow-node .input,
.drawflow .drawflow-node .output {
  height: 20px !important;
  width: 20px !important;
  border: 2px solid #a9a9a9;
  background: #f5f5f5;
  border-radius: 50%
}

.drawflow .drawflow-node .input:hover,
.drawflow .drawflow-node .output:hover {
  border-color: #000;
  background: #00fa0c
}

.drawflow .drawflow-node .output-inner {
  right: 30px
}

.drawflow .drawflow-node .input {
  left: -20px
}

.drawflow .drawflow-node .output {
  right: 0
}

.drawflow-delete {
  border: 2px solid #fff;
  background: silver;
  line-height: 28px;
  color: #fff;
  -webkit-box-shadow: 0 2px 20px 2px silver;
  box-shadow: 0 2px 20px 2px silver;
  transition: .25s
}

#delete-phrase:hover,
.big-close-widget:hover,
.drawflow-delete:hover,
.mod-comms,
.mod-end,
.param-table-del-row-btn:hover,
.red {
  background: red;
  color: #fff
}

.mod-start {
  background: #00e6ee;
  color: #fff
}

.btn-green,
.mod-callcenter {
  background: #00c431;
  color: #fff
}

.toggle-button {
  padding: 15px 8px;
  border: 1px solid #bbb;
  background: #f3f3f3;
  color: #888;
  cursor: pointer;
  left: 100%;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  transition: transform .5s
}

.editTextDiv,
.editTextDiv:focus {
  border-style: Solid;
  border-width: 1px
}

.toggle-button:hover {
  background: #3395ff;
  color: #fff;
  transform: scale(1.25)
}

.ml {
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 5px
}

.ml-10 {
  margin-left: 10px;
  margin-right: 10px
}

.editTextDiv {
  width: 300px;
  height: 35px;
  border-radius: 5px;
  padding-left: 5px;
  line-height: 35px;
  outline: 0;
  background: #fff;
  border-color: silver;
  box-shadow: 1px 1px 10px #c2c2c2 !important
}

.editTextDiv:focus {
  background: #fff;
  border-color: rgba(82, 168, 236, .8);
  box-shadow: 1px 1px 10px rgba(20, 148, 247, .6) !important
}

.inputSwal:focus,
select:focus,
textarea:focus {
  box-shadow: 0 0 10px #2997fd
}

input[type=text] {
  width: auto;
  cursor: text;
  display: inline-block !important;
  height: 42px !important;
  outline-style: none;
  padding: 5px;
  border: 1px solid silver !important
}

input[type=text]:focus {
  border: 1px solid #2997fd !important
}

.inputSwal:focus {
  border: 1px solid #2997fd;
  outline: 0
}

.form-switch .form-check-input {
  width: 4.6em;
  height: 1.4em;
  line-height: 2em
}

.drawflow-node utterances {
  height: calc(100% - 80px);
  width: 100%;
  font-size: 14px;
  line-height: 12px
}

.utterances:focus {
  border-color: silver;
  background: #fff;
  outline: 0
}

.drawflow-node-responses {
  height: 60px;
  min-height: 60px;
  max-height: 500px;
  width: 100%;
  font-size: 14px;
  line-height: 15px;
  overflow-y: auto
}

.drawflow-node-badge {
  width: 30px;
  height: calc(100% - 0px);
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px
}

.drawflow-general-inline {
  padding: 10px;
  position: absolute;
  top: 45px;
  width: 100%;
  left: 0
}

.drawflow-general-inline input {
  opacity: .9;
  background: #e3e3e3;
  font-weight: 800
}

.drawflow-center-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%
}

.pulse {
  background-color: #222;
  animation-name: pulse-color;
  animation-duration: 2s;
  animation-iteration-count: infinite
}

@keyframes pulse-color {

  0%,
  100% {
    background-color: #fff
  }

  50% {
    background-color: #0f0
  }
}


.pulse-green {
  animation: pulse-green 1s ease-in-out;
  animation-iteration-count: 5; /* Pulse 3 times */
}

@keyframes pulse-green {
  0% {
    background-color: #28a745; /* Green color */
    box-shadow: 0 0 5px #28a745;
  }
  50% {
    background-color: #53ff58; /* Brighter green */
    box-shadow: 0 0 10px #53ff58;
  }
  100% {
    background-color: #28a745;
    box-shadow: 0 0 5px #28a745;
  }
}


.msteams,
.slackteams,
.webex {
  height: 180px
}

.silver {
  background: silver;
  color: #000
}

.entity-outline,
.entity-outline-single {
  background: #c0ffc0;
  color: #000;
  padding: 5px
}

.silver:hover {
  background: #aaa;
  color: #000
}

.entity-outline {
  border: 2px solid #5bff4f;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px
}

.entity-outline-single {
  border: 2px solid #5bff4f;
  border-radius: 10px
}

.entity-field {
  border: 2px solid rgb(91 207 64);
  background-color: #00af0f !important;
  padding: 5px;
  border-left: none;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  color: #fff
}

.green {
  background: #3aaf00
}

.green:hover {
  background: #2e8a00
}

.slate {
  background: #5576c2
}

.slate:hover {
  background: #1e46a3
}

.badge-slate {
  background: #1f3e85
}

.pink {
  background: #ff009d
}

.pink:hover {
  background: #ce007f
}

.blue {
  background: #63b9ff
}

.blue:hover {
  background: #339ff8
}

.lightskyblue {
  background: #dff2fd !important;
  color: #000
}

.purple {
  background: #af72ec;
  color: #fff
}

.purple:hover {
  background: #820ef7
}

.darkpurple {
  background: #b343af;
  color: #fff
}

.badge-darkpurple {
  background: #9c2698;
  color: #fff
}

.darkpurple:hover {
  background: #983295
}

.badge-lilac,
.lilac {
  background: #b43bff;
  color: #fff
}

.badge-lilac:hover {
  background: #ac28ff
}

.magenta {
  background: #fc0fc0;
  color: #fff
}

.badge-magenta {
  background: #d818d2;
  color: #fff
}

.magenta:hover {
  background: #7c1a79
}

.module-header {
  font-weight: 400;
  font-size: 20px
}

.darkorange {
  background: #ff8c00;
  color: #fff
}

.darkorange-text {
  color: orange
}

.darkorange:hover {
  background: #d67600;
  color: #fff
}

.seagreen {
  background: #11ad7f;
  color: #fff
}

.darkseagreen,
.seagreen:hover {
  background: #06805b;
  color: #fff
}

.badge-darkseagreen {
  background: #06805b
}

.turquoise {
  background: #18c2aa
}

.turquoise :hover {
  background: #03a38e
}

.orange {
  background: #ffa600;
  color: #fff
}

.darkred {
  background: #c2185b;
  color: #fff
}

.darkred:hover {
  background: #9c0642
}

.badge-red {
  background: #d4001c;
  color: #fff
}

.badge-turquoise {
  background: #ff0024;
  color: #fff
}

.darkcyan {
  background: #0e9eb8;
  color: #fff
}

.badge-cyan {
  background: #08d4d4;
  color: #fff
}

.red:hover {
  background: #c40000;
  color: #fff
}

.aqua {
  background: #06b9a1;
  color: #fff
}

.aqua:hover,
.badge-aqua {
  background: #069482
}

.lightgray {
  background: #d3d3d3;
  color: #000
}

.gray {
  background: gray;
  color: #fff
}

.gray:hover {
  background: #8e8e8e
}

.badge-gray {
  background: #575757
}

.badge-blue {
  background: #5d91ff
}

.badge-green {
  background: #1ba41b
}

.badge-pink {
  background: #c00076
}

.badge-darkred {
  background: #c2185b
}

.badge-orange {
  background: #ff8c00
}

.badge-purple {
  background: #b402cc
}

.drawflow-button {
  background-color: #58e8ff;
  border-radius: 25px;
  height: 35px;
  width: 100%;
  font-size: 14px;
  margin: 5px 5px 5px 0;
  color: #000;
  line-height: 30px;
  border: 1px solid #adb5bd;
  transition: background-color .5s ease-out
}

.drawflow-rule-blue,
.drawflow-rule-lilac,
.drawflow-rule-pink,
.drawflow-rule-red {
  transition: background-color .25s ease-out
}

.relationship-box {
  bottom: 25px;
  height: 140px;
  left: 220px;
  z-index: 99;
  width: 300px;
  opacity: .9;
  border-radius: 15px;
  box-shadow: 0 0 2px 5px #f5f5f5;
  border: 1px solid #d3d3d3;
  background: #fff
}

.drawflow-button-no,
.drawflow-button-yes,
.drawflow-media,
.drawflow-rule {
  height: 35px;
  font-size: 14px;
  margin: 5px 5px 5px 0;
  text-align: center
}

.home-tile,
.home-tile-small {
  height: 12em;
  backdrop-filter: blur(5px)
}

.btn-success,
.switch.flat .slider {
  box-shadow: none
}

.drawflow-button:hover {
  background-color: #d6eaf7
}

.drawflow-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 0 25px 25px 0;
  border-left-width: 10px !important;
  width: 100%;
  color: #000;
  line-height: 30px;
  border-style: solid;
  border-width: 1px;
  overflow-y: hidden
}

.drawflow-rule-pink {
  border-color: #ff2bae;
  background-color: rgb(252 180 222 / 50%) !important
}

.drawflow-rule-pink:hover {
  background-color: #ffacdd !important;
  cursor: pointer !important
}

.drawflow-rule-pink:focus-visible {
  outline-color: #ff1493
}

.drawflow-rule-blue {
  border-color: #1b76ff;
  background-color: rgb(131 206 255 / 30%) !important
}

.drawflow-rule-blue:hover {
  background-color: #a2daff !important;
  cursor: pointer !important
}

.drawflow-rule-blue:focus-visible {
  outline-color: #00f
}

.drawflow-rule-lilac {
  background: #e9c6ff;
  border-color: #ca75ff
}

.drawflow-rule-lilac:hover {
  background: #d797ff;
  cursor: pointer !important
}

.drawflow-rule-lilac:focus-visible {
  outline-color: #c76ffe
}

.drawflow-rule-red {
  border-color: #d10000 !important;
  color: #fff !important;
  background-color: rgb(255 54 54) !important;
  display: flex;
  align-items: center;
  padding-right: 35px
}

.drawflow-rule-red::before {
  content: "\e1e3";
  font: var(--fa-font-regular);
  font-size: 2em;
  line-height: 35px;
  display: inline-block;
  margin-right: .15em;
  color: #fff;
  pointer-events: none
}

.drawflow-rule-red:hover {
  background-color: #ff5757 !important;
  cursor: pointer !important
}

.drawflow-rule-red:focus-visible {
  outline-color: red
}

.accordion-item {
  transition: background-color .5s ease-out;
  background-color: #fff
}

.drawflow-button-no,
.drawflow-button-yes {
  color: #fff !important;
  border-radius: 25px;
  width: 100%;
  line-height: 30px;
  border: 1px solid #adb5bd
}

.drawflow-media {
  background-color: #fff;
  border-left-width: 22px;
  border-color: #adb5bd #adb5bd #adb5bd #afeeee;
  border-radius: 10px;
  width: 100%;
  color: gray;
  line-height: 30px;
  border-style: solid
}
/*
.accordion-button {
  font-weight: 300;
  padding: .5rem .25rem !important;
  min-height: 38px !important;
  font-size: 14px;
  transition: .2s ease-in-out
}
*/

.accordion-button:hover {
  background: #ededed
}

.menu-button {
  margin: 5px;
  border-radius: 25px;
  border: 1px solid silver;
  transition: transform .2s
}

.category-button,
.category-button-nm,
.diagram-items-button {
  transition: .2s;
  border-style: solid;
  padding: 5px;
  white-space: nowrap
}

.category-button,
.category-button-nm {
  margin: 5px;
  cursor: pointer
}

.menu-button:hover {
  transform: scale(1.1)
}

.category-button {
  border-color: silver silver silver gray;
  border-width: 1px 1px 1px 5px
}

.category-button-nm:focus,
.category-button:focus,
.diagram-items-button:focus {
  background: #b8e9fb9c
}

.category-button-nm:hover,
.category-button:hover {
  background-color: #f5f5f5;
  border-style: solid;
  border-left-color: #2997fd;
  border-left-width: 5px;
  box-shadow: 0 0 5px #d4eaff;
  margin-left: 25px
}

.category-button-nm,
.diagram-items-button {
  border-width: 1px 1px 1px 5px
}

.category-button-nm {
  width: 85%;
  flex: none !important;
  border-color: silver silver silver gray;
  cursor: pointer !important;
}

.dt-button-collection {
  background-color: #f5f5f5 !important;
  color: #000 !important;
  cursor: pointer !important;
}

.btn-success {
  color: #fff !important;
  background-color: #28a745 !important;
  border-color: #28a745 !important;
  cursor: pointer !important;
}
/*
.btn-secondary {
  color: #fff;
  background-color: #a5a5a6;
  border-color: #888;
  cursor: pointer !important;
}
  */

  .btn-secondary {
    color: #585858;
    background-color: #e7e7e7;
    border-color: #888;
    cursor: pointer !important;
  }


.dataTables_length {
  display: inline-block !important
}

.dt-buttons {
  margin-right: 25px !important
}

.diagram-items-button {
  margin: 5px 5px 5px 0;
  cursor: pointer !important;
  border-color: silver silver silver gray;
  text-overflow: ellipsis;
  overflow: hidden
}

.diagram-items-button:hover {
  background-color: #f2f8ff;
  border-style: solid;
  border-left-color: #2997fd;
  border-left-width: 5px;
  box-shadow: 0 0 5px #d4eaff;
  margin-left: 10px
}

button.swal2-close:focus {
  box-shadow: none;
  outline: 0;
  border: none
}

.blueviolet {
  background: #8a2be2
}

.rounded-circle {
  border: 1px solid silver;
  color: #fff;
  margin: 0 0 0 2px !important
}

.resp-count {
  margin-left: 2px
}

.drawflow-button:focus,
.drawflow-media:focus {
  box-shadow: 0 2px 2px rgba(0, 0, 0, .075) inset, 0 0 8px rgba(20, 148, 247, .6);
  background: #fff;
  outline: 0;
  color: #789;
  font-weight: 800;
  border: none
}

.home-tile {
  background: #dddddd55;
  border-radius: 16px;
  box-shadow: 0 0 3px 0;
  width: 25em;
  background: rgba(255, 255, 255, .2);
  box-shadow: 0 4px 30px rgba(0, 0, 0, .1);
  border: 1px solid
}

.home-tile-small {
  background: rgba(255, 255, 255, .2);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, .1);
  width: 11em;
  font-size: 0.75rem;
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, .5);
  transform: translate(0); /* Default transform state */
}

.home-tile-small:hover { 
  border: 3px solid #fff;
  transform: scale(1.15);
}

.home-tile:hover {
  border: 3px solid #fff
}

.node-features {
  color: #007bff
}

.note-editable {
  background-color: #fff !important;
  color: #000 !important;
  height: 65vh !important;
  overflow-y: auto
}

.drawflow-node .title-box {
  position: absolute;
  width: calc(100% - 5px);
  height: 30px;
  top: 0;
  left: 0;
  margin: 2px;
  line-height: 30px;
  border-radius: 15px
}

.drawflow-node .box {
  padding: 5px 10px 10px;
  font-size: 14px;
  color: #555
}

.drawflow-node .box p {
  margin-top: 5px;
  margin-bottom: 5px
}

.options {
  cursor: pointer
}

.scroll-panel {
  overflow-y: auto;
  height: calc(100vh - 170px)
}

textarea {
  line-height: 22px;
  border-style: solid;
  padding: 5px;
  -webkit-user-select: all;
  -moz-user-select: all;
  -ms-user-select: all;
  user-select: all;
  color: #000;
  border-radius: 5px;
  border-color: #d3d3d3 !important;
  margin-top: 0 !important;
  font-size: 14px;
  cursor: auto
}

textarea:focus {
  border: 1px solid #2997fd;
  border-left-style: solid
}

.alert-primary {
  border-left: 5px solid !important
}

.drawflow-node input:not(.color-input-field),
.drawflow-node select {
  border-radius: 4px;
  border: 1px solid silver;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 60px !important;
  line-height: 30px !important;
  font-size: 14px;
  font-weight: 400;
  width: 100%;
  color: #555
}

select:focus {
  border: 1px solid #2997fd;
  outline: 0;
  border-left-style: solid
}

.color-input-field {
  display: inherit;
  width: 30px !important;
  max-height: 22px !important;
  position: absolute;
  z-index: 1;
  left: 85%;
  top: 5px;
  cursor: pointer
}

.modal,
.modal-content {
  height: 100%;
  width: 100%
}

#drawflow>div.drawflow>svg>main-path {
  stroke-dasharray: none;
  fill: #70c6e9
}

.drawflow .connection .point {
  stroke: var(--border-color);
  stroke-width: 2;
  fill: white
}

.drawflow .connection .point.selected,
.drawflow .connection .point:hover {
  fill: #70c6e9;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px
}

#save-status {
  width: 120px;
  height: 100px;
  background-color: #fefefe;
  vertical-align: top;
  margin-top: 0;
  line-height: 25px;
  font-size: 4.5em;
  position: absolute;
  border-radius: 10px;
  bottom: -120px;
  box-shadow: 0 0 5px silver;
  display: block;
  left: 20px;
  transition: .5s ease-in-out;
  z-index: 1
}

.modal {
  position: fixed;
  display: none;
  z-index: 999;
  left: 0;
  top: 0;
  overflow: auto;
  color: #fff;
  overflow-x: hidden;
  cursor: auto;
  background: #fafafa;
  box-shadow: 0 9px 0 0 #fff, 0 -9px 0 0 #fff, 12px 0 15px -4px rgb(197 197 197 / 80%), -12px 0 15px -4px rgb(197 197 197 / 80%)
}

.modal-content,
.modal-label,
.paper,
.spinner,
.toolbox-height {
  overflow-x: hidden
}

.modal-content {
  position: relative;
  border: 1px solid #ddd;
  overflow-y: hidden;
  background: #f5f5f5
}

.close-window,
.modal .close {
  position: absolute;
  opacity: 1;
  width: 60px;
  font-size: 60px;
  font-weight: 700;
  transition: .5s;
  cursor: pointer;
  color: #fff
}

.drawflow-content-node {
  min-height: 180px
}

.modal-label {
  margin-left: 32px;
  text-overflow: ellipsis;
  max-width: 145px;
  white-space: nowrap
}

.modal-label-wide {
  max-width: calc(100% - 95px)
}

.modal .close {
  top: -8px;
  height: 60px;
  right: 5px
}

.close-window:hover,
.modal .close:hover {
  opacity: .7;
  -webkit-transform: rotateZ(90deg);
  -ms-transform: rotateZ(90deg);
  transform: rotateZ(90deg)
}

.close-window {
  top: 0;
  height: 45px;
  right: 0
}

.simulator-close {
  border: 2px solid #bbb;
  border-bottom-left-radius: 20%;
  border-top-left-radius: 20%;
  font-size: 70px;
  position: absolute !important;
  line-height: 90px !important;
  left: -60px;
  opacity: .8 !important;
  height: 90px;
  opacity: 1;
  top: calc(100vh / 2 - 40px);
  width: 55px;
  background: #f3f3f3;
  box-shadow: 0 0 0 0 #dee2e6;
  color: #a4908f;
  cursor: pointer;
  transition: transform .5s ease-out
}

.simulator-close:hover {
  background: #007bff;
  color: #fff;
  transform: scale(1.25)
}

.p-white {
  color: #fff;
  font-weight: 500;
  font-size: 20px;
  margin-top: 10px;
  text-shadow: 1px 1px 2px #000
}

.caret,
.tools,
.widgets {
  pointer-events: all;
  position: absolute;
  top: 0;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  color: #fff
}

p {
  margin: 0;
  color: #000
}

.widgets {
  width: 45px;
  display: inline-block;
  right: 40px
}

.tools {
  right: 0;
  width: 30px
}

.caret {
  right: 35px;
  width: 25px
}

.accordion-body {
  padding: 0;
  border: 1px solid silver;
  background: #fff
}

#delete-phrase,
#delete-widget,
.big-close-widget {
  background-color: silver;
  cursor: pointer !important;
  z-index: 20
}

#drawflow #phone {
  width: 310px;
  height: 540px;
  border: 2px solid #7c7b7b;
  border-radius: 30px;
  position: relative;
  background: #fff
}

#drawflow #home,
#drawflow #screen {
  border: 1px solid #ccc;
  left: 50%;
  position: absolute
}

#drawflow #screen {
  width: 290px;
  height: 445px;
  top: 55%;
  margin: -260px -145px;
  pointer-events: auto
}

#drawflow #home {
  width: 36px;
  height: 36px;
  bottom: 10px;
  margin: 0 -18px;
  border-radius: 50%
}

#speaker {
  width: 50px;
  height: 6px;
  border: 1px solid #ccc;
  border-radius: 6px;
  position: absolute;
  left: 50%;
  top: 25px;
  margin: 0 -25px
}

.simulator {
  box-shadow: 0 0 !important;
  border: 0 !important
}

#delete-phrase,
.big-close-widget {
  border: 2px solid #fff;
  -webkit-transition: background 3s
}

div.drawflow_content_node>div>div.box>div.drawflow-rule.rule_output_1 {
  margin-top: 10px !important
}

.drawflow .buttonlist .outputs,
.drawflow .choice .outputs,
.drawflow .llmdirector .outputs,
.drawflow .yesno .outputs {
  margin-top: 80px
}

.drawflow .buttonlist .output,
.drawflow .choice .output,
.drawflow .llmdirector .output,
.drawflow .pci .output,
.drawflow .yesno .output {
  margin-top: 20px
}

.drawflow .pci .outputs,
.timeline .timeline-item .timeline-panel .timeline-body>p+p {
  margin-top: 5px
}

div[class^=col-3],
div[class^=col-4] {
  line-height: 40px
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px
}

.spacing-lr-2 {
  padding-left: 2px;
  padding-right: 2px
}

.spacing-lr-10 {
  padding-left: 10px;
  padding-right: 10px
}

.spacing-lr-25 {
  padding-left: 25px;
  padding-right: 25px
}

.big-close-widget {
  border-radius: 50%;
  position: absolute;
  top: -35px;
  font-size: 2.2em;
  width: 50px !important;
  right: 20px;
  height: 50px;
  box-shadow: 0 0 3px #000;
  line-height: 40px;
  color: #fff;
  transition: background 3s
}

#delete-phrase,
#delete-widget,
.close-widget,
.close-widget-top {
  height: 32px;
  box-shadow: 0 0 3px #000;
  color: #fff;
  position: absolute
}

.close-widget,
.close-widget-top {
  z-index: 999;
  display: flex;
  line-height: 30px !important;
  width: 32px !important;
  transform: translateY(-50%);
  right: 2.5%;
  background: silver;
  padding: 10px;
  cursor: pointer
}

.close-widget {
  border-radius: 50%;
  border: 1px;
  align-items: center;
  justify-items: center !important;
  top: 50%;
  -webkit-transition: background 1s;
  transition: background 3s
}

.entityButtonLists>.close-widget {
  top: 22px !important
}

.close-widget-top {
  border-radius: 50%;
  border: 1px;
  justify-content: center;
  align-items: center;
  justify-items: center !important;
  top: 10%;
  -webkit-transition: background 1s;
  transition: background 1s
}

.close-widget-top:hover,
.close-widget:hover {
  cursor: pointer;
  background: red;
  color: #fff
}

.show-lifespan-settings {
  display: block !important
}

#delete-phrase {
  border-radius: 50%;
  display: block;
  top: 2px;
  right: 5px;
  width: 32px;
  line-height: 30px;
  transition: background 3s
}

#delete-widget {
  border: 2px solid #fff;
  border-radius: 50%;
  top: 0;
  left: 0;
  width: 32px;
  display: none;
  line-height: 30px;
  -webkit-transition: background 3s;
  transition: background 3s
}

.data-param-delete {
  transition: background 3s
}

#delete-widget:hover,
.context-pill-delete:hover,
.context-regexPill-delete:hover,
.data-param-delete:hover {
  cursor: pointer;
  background: red
}

.switch {
  display: inline-block;
  width: 60px;
  height: 25px;
  margin: 4px;
  transform: translateY(50%);
  position: relative
}

.slider {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 30px;
  box-shadow: 0 0 0 2px #777, 0 0 4px #777;
  cursor: pointer;
  border: 4px solid transparent;
  transition: .4s
}

.slider:before {
  content: "";
  width: 100%;
  height: 100%;
  background: #777;
  border-radius: 30px;
  transform: translateX(-30px);
  transition: .4s
}

input:checked+.slider:before {
  transform: translateX(30px);
  background: #32cd32
}

input:checked+.slider {
  box-shadow: 0 0 0 2px #32cd32, 0 0 2px #32cd32
}

.trackRow:not(.divSubHeading),
.trackRowTop:not(.divSubHeading) {
  background: #fff;
  position: relative
}

.trackRow:hover:not(.entityButtonLists),
.trackRowTop:hover {
  background: #2997fd
}

.property-window-height {
  height: calc(100vh - 70px)
}

.intent-param-table {
  height: calc(100vh - 180px) !important;
  overflow-y: auto
}

.topRight {
  right: 5px;
  top: 3px
}

.green-circle {
  background: #e7e6e6;
  width: 36px;
  height: 36px;
  line-height: 30px !important;
  border: 1px solid #afaeae;
  color: #b1b1b1;
  cursor: pointer;
  font-size: 20px;
  font-weight: 500;
  border-radius: 50%;
  transition: background .2s
}

.green-circle:hover {
  background: #007bff;
  color: #fff;
  font-weight: 900
}

i {
  vertical-align: center
}

.fas {
  font-weight: 300 !important;
  line-height: 1.25 !important
}

.fa-duotone {
  vertical-align: middle !important
}

.neutral-circle {
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  padding-left: 6px !important;
  margin: 2px;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  border: 1px solid grey
}

.neutral-circle:hover {
  background: #ccc;
  font-weight: 900
}

.float-end {
  float: right !important
}

.switch.flat .slider:before,
.switch.flat input:checked+.slider:before {
  background: #fff
}

.switch.flat input:checked+.slider {
  background: #32cd32
}

#converseSimulator {
  background: #dbe2e9;
  color: #333;
  top: 45px;
  z-index: 999 !important;
  box-shadow: 0 5px 10px #000;
  right: -554px;
  width: 494px;
  height: calc(100% - 40px);
  -webkit-transition-duration: .5s;
  -moz-transition-duration: .5s;
  -o-transition-duration: .5s;
  transition-duration: 1s
}

#converseSimulator.on {
  z-index: 995;
  right: 7px
}

.navbar-expand-lg .navbar-nav .nav-link {
  padding-right: 1.5rem;
  padding-left: 1.5rem;
  line-height: 1.35
}

.form-check-input:checked {
  background-color: #00d400 !important;
  border-color: #37e404 !important
}

.converseInput[type=checkbox],
.converseInput[type=radio] {
  --active-inner: #fff;
  --active: rgb(0, 212, 0);
  --border: #868686;
  --border-hover: #007bce;
  --focus: 2px rgb(2, 182, 253);
  --background: #fff;
  --disabled: #F6F8FF;
  --disabled-inner: #868686;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: 20px;
  outline: 0;
  display: inline-block;
  vertical-align: top;
  position: relative;
  margin: 0;
  cursor: pointer;
  border: 1px solid var(--bc, var(--border));
  background: var(--b, var(--background));
  transition: background .3s, border-color .3s, box-shadow .2s
}

.converseInput[type=checkbox]:disabled+label,
.converseInput[type=radio]:disabled+label,
.nav-item.disabled {
  cursor: not-allowed
}

.converseInput[type=checkbox]:after,
.converseInput[type=radio]:after {
  content: "";
  display: block;
  left: 0;
  top: 0;
  position: absolute;
  transition: transform var(--d-t, .3s) var(--d-t-e, ease), opacity var(--d-o, .2s)
}

.row:after,
.timeline .timeline-item:after,
.timeline .timeline-item:before {
  content: "";
  display: table
}

.converseInput[type=checkbox]:checked,
.converseInput[type=radio]:checked {
  --b: var(--active);
  --bc: var(--active);
  --d-o: .3s;
  --d-t: .6s;
  --d-t-e: cubic-bezier(.2, .85, .32, 1.2)
}

.converseInput[type=checkbox]:disabled,
.converseInput[type=radio]:disabled {
  --b: var(--disabled);
  cursor: not-allowed;
  opacity: .9
}

.converseInput[type=checkbox]:disabled:checked,
.converseInput[type=radio]:disabled:checked {
  --b: var(--disabled-inner);
  --bc: var(--border)
}

.converseInput[type=checkbox]:hover:not(:checked):not(:disabled),
.converseInput[type=radio]:hover:not(:checked):not(:disabled) {
  --bc: var(--border-hover)
}

.converseInput[type=checkbox]:focus,
.converseInput[type=radio]:focus {
  box-shadow: 0 0 0 var(--focus)
}

.converseInput[type=checkbox]:not(.switch),
.converseInput[type=radio]:not(.switch) {
  width: 21px
}

.converseInput[type=checkbox]:not(.switch):after,
.converseInput[type=radio]:not(.switch):after {
  opacity: var(--o, 0)
}

.converseInput[type=checkbox]:not(.switch):checked,
.converseInput[type=radio]:not(.switch):checked {
  --o: 1
}

.converseInput[type=checkbox]+label,
.converseInput[type=radio]+label {
  font-size: 14px;
  line-height: 42px;
  color: #000;
  display: inline-block;
  vertical-align: top;
  cursor: pointer;
  margin-left: 4px
}

.alert>hr {
  color: #084298
}

section {
  position: relative;
  padding: 5px;
  box-shadow: 0 0 2px gray
}

section::before {
  font-family: Roboto;
  content: "Section";
  top: 0;
  left: 0;
  right:0;
  padding: 5px;
  background-color: #c4e1ff;
  color: #141414;
  font-weight: 400
}

.converseInput[type=checkbox]:not(.switch) {
  border-radius: 7px
}

.converseInput[type=checkbox]:not(.switch):after {
  width: 5px;
  height: 9px;
  border: 2px solid var(--active-inner);
  border-top: 0;
  border-left: 0;
  left: 7px;
  top: 4px;
  transform: rotate(var(--r, 20deg))
}

.converseInput[type=checkbox]:not(.switch):checked {
  --r: 43deg
}

.converseInput[type=checkbox].switch {
  width: 38px;
  border-radius: 11px;
  min-height: 10px !important;
  height: 22px !important
}

.converseInput[type=checkbox].switch:after {
  left: 2px;
  top: 2px;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  background: var(--ab, var(--border));
  transform: translateX(var(--x, 0))
}

.converseInput[type=checkbox].switch:checked {
  --ab: var(--active-inner);
  --x: 17px
}

.converseInput[type=checkbox].switch:disabled:not(:checked):after {
  opacity: .6
}

.converseInput[type=radio] {
  border-radius: 50%
}

.converseInput[type=radio]:after {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--active-inner);
  opacity: 0;
  transform: scale(var(--s, .7))
}

.converseInput[type=radio]:checked {
  --s: .5
}

.background-red {
  background: red
}

.background-orange {
  background: orange
}

.blue-gradient {
  background: linear-gradient(135deg, rgba(208, 228, 247, var(--main-opacity-hover)) 0, rgba(115, 177, 231, var(--main-opacity-hover)) 24%, rgba(10, 119, 213, var(--main-opacity-hover)) 50%, rgba(83, 159, 225, var(--main-opacity-hover)) 79%, rgba(135, 188, 234, var(--main-opacity-hover)) 100%)
}

.blue-gradient:hover {
  background: linear-gradient(135deg, rgba(208, 228, 247, var(--main-opacity)) 0, rgba(115, 177, 231, var(--main-opacity)) 24%, rgba(10, 119, 213, var(--main-opacity)) 50%, rgba(83, 159, 225, var(--main-opacity)) 79%, rgba(135, 188, 234, var(--main-opacity)) 100%)
}

.green-gradient {
  background-image: linear-gradient(135deg, rgb(214, 255, 127, var(--main-opacity)), rgb(0, 179, 204, var(--main-opacity)))
}

.green-gradient:hover {
  background-image: linear-gradient(135deg, rgb(214, 255, 127, var(--main-opacity-hover)), rgb(0, 179, 204, var(--main-opacity-hover)))
}

.purple-gradient {
  background-image: linear-gradient(135deg, rgb(223, 152, 250, var(--main-opacity)), rgb(144, 85, 255, var(--main-opacity)))
}

.purple-gradient:hover {
  background-image: linear-gradient(135deg, rgb(223, 152, 250, var(--main-opacity-hover)), rgb(144, 85, 255, var(--main-opacity-hover)))
}

.pink-gradient {
  background-image: linear-gradient(135deg, rgb(244, 0, 118, var(--main-opacity)), rgb(223, 152, 250, var(--main-opacity)))
}

.pink-gradient:hover {
  background-image: linear-gradient(135deg, rgb(244, 0, 118, var(--main-opacity-hover)), rgb(223, 152, 250, var(--main-opacity-hover)))
}

.orange-gradient {
  background-image: linear-gradient(135deg, rgb(240, 105, 102, var(--main-opacity)), rgb(250, 214, 166, var(--main-opacity)))
}

.orange-gradient:hover {
  background-image: linear-gradient(135deg, rgb(240, 105, 102, var(--main-opacity-hover)), rgb(250, 214, 166, var(--main-opacity-hover)))
}

.red-gradient {
  background-image: linear-gradient(135deg, rgb(226, 51, 255, var(--main-opacity)), rgb(255, 107, 0, var(--main-opacity)))
}

.red-gradient:hover {
  background-image: linear-gradient(135deg, rgb(226, 51, 255, var(--main-opacity-hover)), rgb(255, 107, 0, var(--main-opacity-hover)))
}

.beige-gradient {
  background-image: linear-gradient(135deg, rgb(115, 125, 254, var(--main-opacity)), rgb(255, 202, 201, var(--main-opacity)))
}

.beige-gradient:hover {
  background-image: linear-gradient(135deg, rgb(115, 125, 254, var(--main-opacity-hover)), rgb(255, 202, 201, var(--main-opacity-hover)))
}

.converse-wrapper {
  display: grid
}

.text-center-vertical {
  font-size: 14px;
  display: flex;
  align-items: center
}

.border-radius-10 {
  border-radius: 10px
}

.converse-columnl {
  line-height: 60px;
  float: left;
  width: 40%;
  color: #000
}

.converse-columnr {
  line-height: 70px;
  font-weight: 500;
  font-size: 1.4em;
  left: 100px;
  width: auto;
  color: #000;
  -webkit-transition: .2s ease-out;
  -moz-transition: .2s ease-out;
  -ms-transition: .2s ease-out;
  -o-transition: .2s ease-out;
  transition: .2s ease-out
}

.converse-columnr:hover {
  left: 110px
}

.table {
  --bs-table-bg: transparent;
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: #212529;
  --bs-table-striped-bg: rgba(207, 207, 207, 0.05);
  --bs-table-active-color: #212529;
  --bs-table-active-bg: rgba(0, 0, 0, 0.1);
  --bs-table-hover-color: #212529;
  --bs-table-hover-bg: rgba(167, 205, 255, 0.075);
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
  vertical-align: top;
  border-color: #dee2e6
}

.fa-16x,
.fa-18x,
.fa-20x,
.fa-4x-modified {
  vertical-align: middle
}

td:focus[contenteditable=true] {
  background: #cbf2ff;
  box-shadow: 1px 1px 10px rgba(20, 148, 247, .6) !important
}

.stroke-transparent {
  -webkit-text-stroke: 1px #000;
  -webkit-text-fill-color: transparent
}

.fa-18x,
.fa-20x {
  -webkit-text-stroke: 1px rgb(255, 255, 255)
}

.text-red {
  color: red
}

.text-orange {
  color: #ff8c00
}

.text-blue {
  color: #77acfd
}

.text-green {
  color: #00db00
}

.square {
  background: #fff;
  opacity: .5;
  border-radius: 50%;
  border-width: 1px;
  border-style: solid;
  inline-size: auto;
  min-width: 4em;
  margin: 3px;
  box-shadow: 2px 2px 2px #a9a9a9
}

.circleIcon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  line-height: 38px;
  border: 2px solid #fff
}

.circleIconSmall {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 14px;
  top: 55px;
  right: 15px;
  line-height: 28px;
  border: 2px solid #fff
}

.fa-15x,
.fa-15x-green,
.fa-15x-red,
.fa-16x {
  font-size: 1.5em;
  cursor: pointer
}

.fa-ssml {
  padding: 10px;
  border: 1px solid #d3d3d3;
  border-radius: 50%;
  background: #fff
}

.fa-15x {
  line-height: 0;
  color: #007bff;
  -webkit-text-fill-color: #007bff
}

.fa-15x-green {
  color: #00e500;
  -webkit-text-fill-color: #00e500
}

.fa-15x-red {
  color: red;
  -webkit-text-fill-color: red
}

.fa-16x {
  color: #00cfff;
  -webkit-text-fill-color: #bac3ff
}

.fa-18x {
  font-size: 2.25em;
  cursor: pointer;
  color: #3498db;
  -webkit-text-fill-color: #3498db
}

.fa-20x {
  font-size: 3.5em;
  cursor: pointer;
  color: #007bff;
  -webkit-text-fill-color: #007bff
}

.fa-3x-modified {
  color: #40e0d0;
  -webkit-text-fill-color: turquoise
}

.fa-4x-modified {
  cursor: pointer;
  text-shadow: 0 0 4px #000;
  width: 100%;
  color: #fff;
  font-size: 5em
}

.home-font-h4,
.home-font-h5,
.home-font-h5-small {
  width: 200px !important;
  white-space: nowrap
}

.fa-15xs {
  font-size: 1.75em
}

.input-group {
  flex-wrap: nowrap
}

.row {
  margin: 0 0 2px !important;
  border-radius: 0;
  padding-right: 0 !important;
  padding-left: 0 !important
}

.row:after {
  height: 12.28%
}

.box-shadow {
  border-width: .5px;
  border-style: solid;
  -webkit-box-shadow: 0 1px 1px silver;
  box-shadow: 0 1px 1px silver;
  -webkit-transition: .2s ease-out;
  -moz-transition: .2s ease-out;
  -ms-transition: .2s ease-out;
  -o-transition: .2s ease-out;
  transition: .2s ease-out
}

.systemEntities {
  border-left: 10px solid #00afff !important;
  cursor: pointer
}

.nav-item.disabled {
  color: #888;
  opacity: .5;
  pointer-events: none
}

.form-check {
  display: block;
  min-height: 1.5rem;
  line-height: 2em;
  margin-bottom: .125rem;
  margin-right: 1em;
  color: #000
}

table th {
  position: sticky;
  top: 0;
  white-space: nowrap;
  height: 43px;
  border-bottom: 1px solid #cfcfcf;
  z-index: 1;
  font-weight: 400;
  border-top: 0;
  background-color: #ededed !important
}

.home-font-h4 {
  font-size: 1.5rem
}

.home-font-h5 {
  font-size: 1.25rem
}

.home-font-h5-small {
  font-size: 20px;
  margin-top: 2px;
  max-height: 45px;
  margin-left: 10px;
  border: 1px solid #a9a9a9;
  font-weight: 400
}

.tag-synonym-preview1,
.tag-synonym-preview2,
.tag-synonym-preview3,
.tag-synonym-preview4,
.tag-synonym-preview5,
.tag-synonym-preview6 {
  border-radius: 8px;
  color: #000 !important
}

.home-font-h5-small:hover {
  box-shadow: 0 0 10px silver
}

.tag-silver-light {
  cursor: pointer;
  border-color: #000 #000 #000 #e2e2e2;
  background: rgb(228 227 225);
  margin: .75em;
  font-size: 1.5em;
  padding: .3em
}

.tag-silver-light:hover {
  background: #bebff7;
  color: #fff !important
}

.tag-synonym-preview1 {
  background: #f5b7b1;
  border-bottom: 3px solid #e74c3c
}

.tag-synonym-preview2 {
  background: #e8daef;
  border-bottom: 3px solid #7d3c98
}

.tag-synonym-preview3 {
  background: #aed6f1;
  border-bottom: 3px solid #3498db
}

.tag-synonym-preview4 {
  background: #d5f5e3;
  border-bottom: 3px solid #2ecc71
}

.tag-synonym-preview5 {
  background: #fad7a0;
  border-bottom: 3px solid #d35400
}

.tag-synonym-preview6 {
  background: #eaeded;
  border-bottom: 3px solid #707b7c
}

.tag-blue-light {
  background: #fff;
  color: #000 !important;
  font-weight: 400;
  border: .5px solid silver;
  min-height: 40px;
  border-radius: 15px !important;
  outline: #6610f2 !important
}

.tag-green-light,
.tag-orange-light {
  color: #fff !important;
  border-radius: 15px !important
}

.tag-blue-light:hover {
  background: #e3f2ff
}

.tag-green-light {
  background: #14c5fd;
  font-weight: 400
}

.tag-orange-light {
  background: #0771ff;
  font-weight: 500
}

.report-badge,
.tag {
  color: #fff;
  display: inline-block
}

.tag {
  padding: 5px;
  cursor: pointer;
  line-height: 24px
}

.gmap_canvas {
  overflow: hidden;
  background: 0 0 !important;
  height: calc(100vh - 220px);
  width: 100%
}

#gmap_canvas {
  height: calc(100vh - 220px) !important
}

#drop-zone {
  max-width: 100%;
  border: 2px dotted #00f;
  display: flex;
  align-items: center
}

img .drop-image {
  object-fit: cover;
  width: 30%;
  height: 30%;
  display: none
}

.report-badge {
  padding: .35em .65em;
  font-size: 1em;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 1em
}

.import-text {
  line-height: 20px !important
}

table.dataTable thead>tr>td.sorting,
table.dataTable thead>tr>td.sorting_asc,
table.dataTable thead>tr>td.sorting_asc_disabled,
table.dataTable thead>tr>td.sorting_desc,
table.dataTable thead>tr>td.sorting_desc_disabled,
table.dataTable thead>tr>th.sorting,
table.dataTable thead>tr>th.sorting_asc,
table.dataTable thead>tr>th.sorting_asc_disabled,
table.dataTable thead>tr>th.sorting_desc,
table.dataTable thead>tr>th.sorting_desc_disabled {
  font-weight: 600 !important;
  background-color: #f5f5f5 !important;
  /*background-image: -webkit-linear-gradient(top, #f5f5f5 0, #e8e8e8 100%) !important;
  background-image: linear-gradient(to bottom, #f5f5f5 0, #e8e8e8 100%) !important */
}

.paramTableBody {
  top: 2px !important;
  width: 100%;
  position: relative
}

table.dataTable tfoot td,
table.dataTable tfoot th,
table.dataTable thead td,
table.dataTable thead th {
  text-align: left;
  font-weight: 600 !important;
  background-color: #f5f5f5 !important;
  /*background-image: -webkit-linear-gradient(top, #f5f5f5 0, #e8e8e8 100%) !important;
  background-image: linear-gradient(to bottom, #f5f5f5 0, #e8e8e8 100%) !important*/
}

tbody,
td,
tfoot,
th,
thead,
tr {
  border-color: silver;
  border-style: solid
}

td {
  border-width: 1px;
  padding: 5px !important
}

tr:hover {
  background: #b7b8b924 !important
}

.table>:not(:first-child) {
  border-top: 0 solid silver !important
}

.aquabox,
.greenbox,
.redbox {
  border-left-width: 10px !important;
  border-style: solid
}

.row-no-alternative {
  background-color: revert !important
}

.aquabox,
.greenbox,
.parent-context-container,
.redbox {
  background: #fff;
  color: #000
}

.aquabox {
  border-color: #45caff;
  box-shadow: 0 0 1px #45caff
}

.redbox {
  border-color: red;
  box-shadow: 0 0 1px red
}

.greenbox {
  border-color: #adff2f;
  box-shadow: 0 0 1px #adff2f
}

.parent-context-container {
  display: inline-block;
  border: 1px solid silver;
  padding-left: 0;
  margin: 5px;
  border-radius: 20px;
  box-shadow: 0 0 1px #717171
}

.context-pill-delete {
  border-radius: 50%;
  border-style: solid;
  border-width: 1px
}

.parent-context-container:hover {
  border-color: #0057b4
}

.entity-pill-rule {
  background: #d8edff;
  height: 35px;
  line-height: 24px;
  width: 100%
}

.mbtn,
.page-container {
  margin: 5px
}

.regex-pill-name {
  border-style: solid;
  display: inline-block;
  border-color: silver;
  margin: 10px 0 0;
  padding: 5px;
  background: #f1eeee;
  color: #000;
  border-radius: 20px;
  width: 100%;
  font-size: 14px;
  cursor: text
}

span.regex-pill-name[contenteditable]:empty::before {
  content: attr(data-placeholder);
  display: inline-block
}

span.regex-pill-name[contenteditable]:empty:focus::before {
  content: attr(data-focused-advice)
}

.context-pill-name,
.context-rule-name {
  border: 0 solid;
  outline: 0;
  font-size: 14px;
  padding: 5px;
  border-radius: 15px
}

.context-pill-value {
  width: 32px;
  max-height: 32px;
  max-width: 32px;
  line-height: 32px;
  border: 1px solid;
  white-space: nowrap;
  padding-left: 5px;
  padding-right: 5px;
  background: #9022d5;
  border-radius: 50%;
  outline: 0
}

.context-pill-delete {
  padding: 5px;
  line-height: 34px;
  background: silver;
  color: #fff;
  -webkit-transition: background 1s;
  transition: background 1s
}

.context-regexPill-delete,
.data-param-delete:not(.dataSource) {
  border-style: solid;
  border-width: 1px;
  padding: 3px;
  position: absolute;
  background: silver;
  border-radius: 50%;
  color: #fff
}

.context-regexPill-delete {
  width: 30px;
  margin-top: 14px;
  right: 15px;
  -webkit-transition: background 1s;
  transition: background 1s;
  cursor: pointer
}

.add-parameter-button {
  right: 1px;
  position: absolute;
  margin-top: -3px
}

.destData,
.sourceData {
  height: calc(100vh - 350px) !important;
  overflow-y: auto
}

.data-param-delete:not(.dataSource) {
  width: 36px;
  height: 36px;
  line-height: 28px;
  right: calc(0% + 1px);
  padding-right: 4px !important;
  -webkit-transition: background 1s;
  transition: background 1s
}

.router {
  -webkit-clip-path: polygon(0% 20%, 80% 20%, 60% 0%, 100% 50%, 60% 100%, 80% 80%, 0% 80%);
  clip-path: polygon(0% 20%, 80% 20%, 60% 0%, 100% 50%, 60% 100%, 80% 80%, 0% 80%)
}

.res {
  text-align: left;
  z-index: 1;
  width: 100%
}

.res ul {
  padding: 0;
  margin: 0
}

.res li {
  list-style: none;
  display: inline;
  margin-bottom: 4px;
  padding: 5px;
  border-bottom: 1px solid #eee
}

.searching {
  text-align: center;
  padding: 10px
}

.lds-hourglass {
  position: relative;
  width: 64px;
  height: 64px
}

.lds-hourglass:after {
  content: " ";
  display: block;
  border-radius: 50%;
  width: 0;
  height: 0;
  margin: 6px;
  border: 26px solid #007bff;
  border-color: #007bff transparent;
  animation: 1.2s infinite lds-hourglass
}

@keyframes lds-hourglass {
  0% {
    transform: rotate(0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
  }

  50% {
    transform: rotate(900deg);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
  }

  100% {
    transform: rotate(1800deg)
  }
}

.outline {
  border: 1px;
  line-height: 25px;
  background: #fff;
  border-radius: 60px;
  outline: 0;
  box-shadow: 2px 2px 5px silver;
  margin-right: 10px !important;
  margin-top: 10px !important;
  transition: background-color .5s ease-out
}

.outline:hover {
  background-color: #7eff7a
}

.radio-parent {
  height: 150px
}

.radio-parent>.row {
  display: flex;
  align-items: center;
  height: 100%
}

.radio-col {
  border-radius: 10px;
  width: 20%
}

.radio-col img {
  height: 100px;
  cursor: pointer;
  border-radius: 0;
  transition: transform 1s;
  object-fit: cover
}

.radio-col img:hover {
  outline: #4caf50 solid 4px
}

.radio-col label {
  overflow: hidden;
  position: relative
}

.imgbgchk:checked+label>img {
  transform: scale(1.25);
  opacity: .5
}

.tick_container {
  transition: .1s;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  cursor: pointer;
  text-align: center
}

.tick {
  background-color: #4caf50;
  color: #fff;
  font-size: 14px;
  padding: 5px 1px;
  height: 40px;
  width: 40px;
  border-radius: 100%
}

.param-entity,
.param-text-field {
  font-size: 14px;
  min-width: 99%;
  overflow-x: hidden;
  white-space: nowrap
}

.f0x0 {
  background: url(../images/formations/adaptive.png)
}

.f1x1 {
  background: url(../images/formations/1x1.png)
}

.f2x2 {
  background: url(../images/formations/2x2.png)
}

.f3x3 {
  background: url(../images/formations/3x3.png)
}

.f4x4 {
  background: url(../images/formations/4x4.png)
}

.gridItems {
  width: fit-content !important;
  display: flex;
  flex-wrap: wrap
}

.gridItems>* {
  flex: 0 0 20%
}

.gridItemOutline {
  border-style: solid;
  border-color: silver silver silver #007bff;
  margin: 5px;
  padding: 5px;
  border-left-width: 10px !important;
  border-width: 1px
}

.param-check-field {
  line-height: 40px !important;
  height: 44px !important;
  margin-top: 6px !important
}

.param-entity,
.param-text-field {
  line-height: 1.6;
  outline: 0 !important
}

.param-entity {
  background-color: #fff;
  border-left: 10px solid #007bff !important;
  width: 3em;
  color: #000;
  min-height: 40px;
  background-image: none;
  padding: .5em .1em;
  border: 3px solid #007bff;
  cursor: pointer !important
}

.param-table-height,
.phrase-training-height,
.toolbox-height {
  cursor: default;
  overflow-y: auto
}

.param-samples {
  width: 25%
}

.param-entity:hover {
  background-color: #ececec;
  color: #000
}

.param {
  padding: 0
}

.email-body-format {
  border: 1px solid;
  outline: 0 !important;
  height: calc(100vh - 420px);
  background: #fff !important;
  border-color: silver !important;
  resize: none
}

.toolbox-height {
  height: calc(100vh - 135px)
}

.param-table-height {
  height: calc(100vh - 370px) !important
}

.phrase-training-height {
  height: calc(100vh - 460px) !important
}

.phrase-training-height-nonintent {
  overflow-y: auto;
  height: calc(100vh - 445px) !important
}

.param-title {
  margin-top: 0
}

.param-info {
  vertical-align: top;
  text-align: right;
  padding: 0 1em 0 0;
  margin: 0 1.3em 0 0;
  font-weight: 700;
  color: #454545;
  border-right: 1px dotted #eee;
  width: 100%;
  float: left
}

.btn-outline-secondary,
.btn-outline-secondary-ext {
  background: #f0f1f1 !important;
  /*margin-left: 5px;*/
  border: 1px solid #a4a4a4;
  font-weight: 300;
  font-size: 14px;
  color: #000 !important;
  margin-top: 1px !important;
  height: 40px !important
}

.btn-outline-secondary-ext {
  margin-top: 0;
  border: 1px solid #a4a4a4
}

.btn-outline-secondary-ext:hover,
.btn-outline-secondary:hover {
  color: #000 !important;
  background: #ddd !important
}

.param-table {
  position: relative;
  width: 100%;
  padding: 0 10px 0 0;
  z-index: 10
}

.param-table-cell {
  padding: 0 2px
}

.param-text-field {
  width: 3em;
  color: #000;
  background-color: #fff;
  background-image: none;
  padding: .5em .1em;
  border: 3px solid #ccc;
  cursor: text !important
}

.zoom-in-out-box {
  animation: 5s infinite zoom-in-zoom-out;
  box-shadow: 5px 5px 5px red
}

@keyframes zoom-in-zoom-out {

  0%,
  100% {
    transform: scale(1, 1)
  }

  50% {
    transform: scale(1.3, 1.3)
  }
}

.param-table-add-row {
  margin-top: 0;
  position: relative;
  border-top: 1px solid #eee;
  z-index: 8
}

.param-table-add-row-btn {
  display: block;
  cursor: pointer
}

.param-table-del-row-btn {
  border-style: solid;
  border-color: #fff;
  border-radius: 50%;
  background-color: silver;
  cursor: pointer !important;
  display: inline-block;
  font-weight: 700;
  margin-right: 10px;
  padding: .25em .4em;
  font-size: 1.2em;
  line-height: 3px;
  color: #fff;
  text-decoration: none;
  transition: 1.25s;
  text-align: center;
  box-shadow: 0 0 3px #000
}

.drag-handler {
  width: 1.4em;
  padding-left: 20px;
  position: relative;
  color: #a9a9a9;
  cursor: move
}

.drag-handler:active {
  color: green
}

.highlight {
  box-shadow: 0 0 2px red;
  background: #ffa07a
}

#containerScript {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden
}

.timeline,
.timeline-horizontal {
  list-style: none;
  padding: 20px;
  position: relative;
  background: #f5f5f5
}

.timeline:before {
  top: 40px;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 3px;
  background-color: #fff;
  left: 50%;
  margin-left: -1.5px
}

.timeline .timeline-item {
  margin-bottom: 20px;
  position: relative
}

.timeline .timeline-item .timeline-badge {
  color: #fff;
  width: 54px;
  height: 54px;
  padding-top: 2px;
  line-height: 50px;
  font-size: 43px;
  text-align: center;
  position: absolute;
  margin-left: -15px;
  background-color: #cf8af4;
  border: 1px solid #a9a9a9;
  z-index: 100;
  border-radius: 50%
}

.timeline .timeline-item .timeline-badge .fa,
.timeline .timeline-item .timeline-badge .glyphicon,
.timeline .timeline-item .timeline-badge i {
  top: 2px;
  left: 0
}

.timeline .timeline-item .timeline-badge.primary {
  background-color: #0bd3ff
}

.timeline .timeline-item .timeline-badge.info {
  background-color: #fd7e14
}

.timeline .timeline-item .timeline-badge.success {
  background-color: #84df4e
}

.timeline .timeline-item .timeline-badge.warning {
  background-color: #ffc107
}

.timeline .timeline-item .timeline-badge.danger {
  background-color: #ff7a7a
}

.timeline .timeline-item .timeline-panel {
  position: relative;
  border-radius: 5px;
  padding: 20px;
  box-shadow: 0 1px 20px rgb(0 0 0 / 18%);
  transition: .25s ease-in-out
}

.timeline-shadow {
  -webkit-box-shadow: 0 1px 25px #00db00 !important;
  box-shadow: 0 1px 20px #00db00 !important
}

.timeline .timeline-item .timeline-panel:before {
  position: absolute;
  top: 26px;
  right: -16px;
  display: inline-block;
  border-top: 16px solid transparent;
  border-left: 16px solid #777;
  border-right: 0 solid #777;
  border-bottom: 16px solid transparent;
  content: " "
}

.timeline .timeline-item .timeline-panel .timeline-title {
  margin-top: 0;
  color: inherit
}

.timeline .timeline-item .timeline-panel .timeline-body>p,
.timeline .timeline-item .timeline-panel .timeline-body>ul {
  margin-bottom: 0
}

.timeline .timeline-item:last-child:nth-child(2n) {
  float: right
}

.timeline .timeline-item:nth-child(2n) .timeline-panel {
  float: right;
  left: 16px
}

.timeline .timeline-item:nth-child(2n) .timeline-panel:before {
  border-left-width: 0;
  border-right-width: 14px;
  left: -14px;
  right: auto
}

.timeline-horizontal .timeline-item .timeline-panel:before,
.timeline-panel:hover:before {
  border-right: 16px solid transparent !important;
  border-left: 16px solid transparent !important
}

.timeline-horizontal {
  list-style: none;
  position: relative;
  padding: 0;
  display: inline-block
}

.timeline-horizontal:before {
  height: 3px;
  top: auto;
  bottom: 26px;
  background: silver;
  left: 56px;
  right: 0;
  width: 100%;
  margin-bottom: 0 !important
}

.timeline-horizontal .timeline-item {
  display: table-cell;
  height: 225px;
  width: 20%;
  min-width: 320px;
  float: none !important;
  padding-left: 10px;
  padding-right: 20px;
  margin: 0 auto;
  vertical-align: bottom
}

.timeline-horizontal .timeline-item .timeline-panel {
  top: auto;
  bottom: 50px;
  display: inline-block;
  border-radius: 10px;
  float: none !important;
  left: 0 !important;
  right: 0 !important;
  width: 100%;
  margin-bottom: 20px;
  cursor: pointer
}

.timeline-horizontal .timeline-item .timeline-panel:before {
  top: auto;
  bottom: -16px;
  left: 28px !important;
  right: auto;
  border-top: 16px solid #3498db !important;
  border-bottom: 0 solid #fff !important
}

.timeline-panel:focus {
  background-color: #22ff2233 !important
}

.timeline-panel:hover {
  -webkit-box-shadow: 0 0 20px #0000ff88;
  box-shadow: 0 0 20px #0000ff88;
  transform: scale(1.1);
  border: 4px solid silver !important
}

.tooltip .tooltip-inner {
  max-width: 400px !important;
  width: auto;
  white-space: normal
}

.note-popover,
.note-tooltip-content {
  font-size: 1.2em;
  box-shadow: 0 0 4px #000 !important
}

.timeline-panel:hover:before {
  border-top: 16px solid #007bff !important;
  border-bottom: 0 solid #007bff !important
}

.timeline-horizontal .timeline-item .timeline-badge {
  top: auto;
  bottom: 0;
  left: 43px
}

.fixed-bottom {
  z-index: 999 !important
}

.ribbon {
  width: 150px;
  height: 150px;
  overflow: hidden
}

.ribbon::after,
.ribbon::before {
  position: absolute;
  z-index: -1;
  content: '';
  display: block;
  border: 5px solid #2980b9
}

.ribbon span {
  display: block;
  width: 225px;
  padding: 15px 0;
  background-color: #3498db;
  box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
  color: #fff;
  font: 600 16px/1 Lato, sans-serif;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  text-transform: uppercase;
  text-align: center
}

.ribbon-top-left {
  top: -10px;
  left: -10px
}

.ribbon-top-left::after,
.ribbon-top-left::before {
  border-top-color: transparent;
  border-left-color: transparent
}

.ribbon-bottom-right::after,
.ribbon-top-left::before {
  top: 0;
  right: 0
}

.ribbon-bottom-right::before,
.ribbon-top-left::after {
  bottom: 0;
  left: 0
}

.ribbon-top-left span {
  right: -25px;
  top: 30px;
  transform: rotate(-45deg)
}

.ribbon-top-right {
  top: -10px;
  right: -10px
}

.ribbon-top-right::after,
.ribbon-top-right::before {
  border-top-color: transparent;
  border-right-color: transparent
}

.ribbon-bottom-left::after,
.ribbon-top-right::before {
  top: 0;
  left: 0
}

.ribbon-bottom-left::before,
.ribbon-top-right::after {
  bottom: 0;
  right: 0
}

.ribbon-top-right span {
  left: -25px;
  top: 30px;
  transform: rotate(45deg)
}

.ribbon-bottom-left {
  bottom: -10px;
  left: -10px
}

.ribbon-bottom-left::after,
.ribbon-bottom-left::before {
  border-bottom-color: transparent;
  border-left-color: transparent
}

.ribbon-bottom-left span {
  right: -25px;
  bottom: 30px;
  transform: rotate(225deg)
}

.ribbon-bottom-right {
  bottom: -10px;
  right: -10px
}

.ribbon-bottom-right::after,
.ribbon-bottom-right::before {
  border-bottom-color: transparent;
  border-right-color: transparent
}

.ribbon-bottom-right span {
  left: -25px;
  bottom: 30px;
  transform: rotate(-225deg)
}

.voice-tags {
  background: #fff;
  color: #000;
  border: 1px solid silver;
  margin: 0
}

.usedEntities {
  background: #ff000011;
  border-color: red !important;
  color: red
}

.spinner {
  height: 150px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative
}

.spinner .circle {
  animation: linear infinite spinners;
  border: 10px solid transparent;
  border-top-color: red;
  border-radius: 50%
}

.spinner .one {
  width: 50px;
  height: 50px;
  border-top-color: #0000FF66;
  animation-duration: .85s
}

.spinner .two {
  width: 70px;
  height: 70px;
  border-top-color: #00fF0055;
  animation-duration: .95s
}

.spinner .three {
  width: 100px;
  height: 100px;
  border-top-color: #ff000055;
  animation-duration: 1.05s
}

@keyframes spinners {
  0% {
    transform: rotate(0)
  }

  100% {
    transform: rotate(360deg)
  }
}

.panel-container {
  display: flex;
  flex-direction: row;
  border: 1px solid silver;
  overflow: hidden;
  touch-action: none
}

.panel-left {
  flex: 0 0 auto;
  padding: 0;
  width: 300px;
  min-height: 209px;
  min-width: 275px;
  max-width: calc(100vw - 460px);
  white-space: nowrap;
  background: #fff;
  color: #000
}

.alert-info {
  white-space: pre-line
}

.splitter {
  flex: 0 0 auto;
  width: 12px;
  background: #d2d2d2;
  min-height: 200px;
  cursor: col-resize;
  justify-content: center;
  align-items: center;
  display: grid
}

.panel-right {
  flex: 1 1 auto;
  padding-top: 0;
  padding-left: 0;
  width: 100%;
  min-height: 200px;
  min-width: 335px;
  color: #000
}

.section-body {
  padding: 10px
}

.channelTriggers {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  pointer-events: none
}

.channelTrigger {
  display: flex;
  pointer-events: all;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 5px;
  background-color: #fff;
  margin: 10px;
  color: #007bff;
  cursor: pointer;
  border-width: 1px;
  transition: transform .25s
}

.channelTrigger:hover {
  box-shadow: 1px 1px 10px #1494f7 !important;
  transform: scale(1.2)
}

.channelTrigger i {
  font-size: 60px;
  margin-right: 10px
}

.blue-tag,
.green-tag,
.orange-tag,
.purple-tag,
.red-tag {
  border-width: 1px !important;
  font-weight: 700 !important;
  padding-left: 5px;
  padding-right: 5px;
  position: absolute;
  border-style: solid
}

.pre-line {
  white-space: pre-line !important
}

.red-tag {
  border-color: red;
  color: red !important;
  background: #ff000022
}

.green-tag {
  border-color: #3aaf00;
  color: #038721 !important;
  background: #e1fce1
}

.purple-tag {
  border-color: #d818d2;
  color: #d818d2 !important;
  background: rgb(252 226 251)
}

.orange-tag {
  border-color: #ffa600;
  color: #f77202 !important;
  background: #fcf0dd
}

.blue-tag {
  border-color: #007bff;
  color: #007bff !important;
  background: #e5edff
}

.dataSpinner {
  width: 40px;
  height: 40px;
  margin: 100px auto;
  background-color: #333;
  border-radius: 100%;
  -webkit-animation: 1s ease-in-out infinite sk-scaleout;
  animation: 1s ease-in-out infinite sk-scaleout
}

@-webkit-keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0)
  }

  100% {
    -webkit-transform: scale(1);
    opacity: 0
  }
}

@keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0)
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0
  }
}

#phraseDataTable_wrapper,
#promptDataTable_wrapper {
  padding-top: 10px !important
}

#promptDataTable_wrapper>div.row.dt-row {
  max-height: calc(100vh - 210px) !important;
  overflow-y: auto
}

#phraseDataTable_wrapper>div.row.dt-row {
  max-height: calc(100vh - 200px) !important;
  overflow-y: auto
}

.dataTable {
  height: 2.4em;
  line-height: 2em;
  white-space: nowrap
}

div.dataTables_wrapper div.dataTables_filter input {
  margin-left: 10px !important;
  display: inline-block;
  height: 42px;
  font-size: 16px !important;
  border-top-left-radius: 20px !important;
  border-bottom-left-radius: 20px !important
}

div.dataTables_wrapper div.dataTables_filter {
  text-align: right;
  margin-top: 2px
}

#knowledgeCategory,
#knowledgeTitle,
#smallTalkCategory,
#smallTalkTitle {
  background: #eaeaea;
  padding-left: 10px;
  padding-right: 10px;
  height: 38px;
  margin-top: 1px
}

.note-tooltip.bottom .note-tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: silver !important
}

.note-tooltip.top .note-tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 5px 5px 0;
  border-top-color: silver !important
}

.note-tooltip.right .note-tooltip-arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-width: 5px 5px 5px 0;
  border-right-color: silver !important
}

.note-tooltip.left .note-tooltip-arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-width: 5px 0 5px 5px;
  border-left-color: silver !important
}

.note-tooltip-content {
  max-width: 250px !important;
  font-family: sans-serif;
  padding: 5px 10px;
  color: #000 !important;
  text-align: center;
  background-color: #fff;
  border-radius: 10px !important
}

.note-popover {
  position: absolute;
  z-index: 1060;
  font-family: Roboto;
  display: none;
  background: #fff;
  border: 1px solid silver !important;
  border-radius: 10px !important;
  opacity: 1 !important
}

.inner,
.loader {
  position: absolute;
  width: 100%;
  border-radius: 50%
}

.param-noinput,
.param-nomatch {
  cursor: not-allowed;
  pointer-events: none;
  opacity: .5
}

#debugNotificationParent {
  position: absolute;
  background: #fff;
  width: auto;
  max-width: 500px;
  left: 10px !important;
  z-index: 99;
  color: green;
  font-size: 20px;
  border-width: 1px 1px 1px 10px;
  border-style: solid;
  top: -115px;
  font-weight: 400;
  height: 115px;
  padding: 5px;
  transition: .5s ease-in-out
}

.loader {
  top: calc(50% - 32px);
  left: calc(30% - 32px);
  height: 200px;
  perspective: 800px
}

.inner {
  height: 100%
}

.inner.one {
  left: 0;
  top: 0;
  animation: 2s linear infinite rotate-one;
  border-bottom: 10px solid #88f
}

.inner.two {
  right: 0;
  top: 0;
  animation: 2s linear infinite rotate-two;
  border-right: 10px solid #aaf
}

.inner.three {
  right: 0;
  bottom: 0;
  animation: 2s linear infinite rotate-three;
  border-top: 10px solid #ccf
}

@keyframes rotate-one {
  0% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0)
  }

  100% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg)
  }
}

@keyframes rotate-two {
  0% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(0)
  }

  100% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg)
  }
}

@keyframes rotate-three {
  0% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(0)
  }

  100% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg)
  }
}

.paper {
  position: relative;
  width: 100%;
  height: calc(100vh - 340px);
  margin: 0 auto;
  background: #fafafa;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
  overflow-y: auto
}

.paper:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 60px;
  background: radial-gradient(#9b9b9b 6px, transparent 7px) repeat-y;
  background-size: 30px 30px;
  border-right: 3px solid #d44147
}

.paper-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 30px;
  left: 60px;
  background: linear-gradient(transparent, transparent 28px, #91d1d3 28px);
  background-size: 30px 30px
}

.paper-content textarea {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  background: rgba(255, 255, 255, 0) !important;
  line-height: 30px;
  padding: 0 10px;
  border: 0;
  outline: 0;
  color: #0000cd;
  font-weight: 600;
  font-size: 18px;
  box-sizing: border-box;
  z-index: 1
}

footer {
  margin-top: 30px;
  text-align: center;
  font-size: 12px;
  color: rgba(0, 0, 0, .6)
}

footer a {
  color: rgba(255, 255, 255, .8)
}

@-webkit-keyframes cycle-design {
  0% {
    stroke-dashoffset: 0
  }

  100% {
    stroke-dashoffset: 1434.9226
  }

  0%,
  100%,
  20%,
  80% {
    stroke: #8dc63f
  }

  30%,
  70% {
    stroke: #00b6de
  }
}

@keyframes cycle-design {
  0% {
    stroke-dashoffset: 0
  }

  100% {
    stroke-dashoffset: 1434.9226
  }

  0%,
  100%,
  20%,
  80% {
    stroke: #8dc63f
  }

  30%,
  70% {
    stroke: #00b6de
  }
}

@-webkit-keyframes think-color {

  0%,
  100% {
    color: #8dc63f
  }

  40%,
  60% {
    color: #eee
  }
}

@keyframes think-color {

  0%,
  100% {
    color: #8dc63f
  }

  40%,
  60% {
    color: #eee
  }
}

@-webkit-keyframes make-color {

  0%,
  100%,
  20%,
  80% {
    color: #eee
  }

  50% {
    color: #00b6de
  }
}

@keyframes make-color {

  0%,
  100%,
  20%,
  80% {
    color: #eee
  }

  50% {
    color: #00b6de
  }
}

.compile-product-cycle {
  width: 75%;
  height: calc(40vmin + 2.4rem);
  position: relative
}

.compile-path {
  width: 40vmin;
  height: 20vmin;
  position: absolute;
  top: 0;
  left: 0
}

.compile-path path {
  fill: transparent;
  stroke-width: 10;
  stroke-linecap: round
}

.compile-path.-animate {
  stroke: #00b6de;
  stroke-dasharray: 478.3075333333 956.6150666667;
  stroke-dashoffset: 1434.9226;
  -webkit-animation: 5s linear infinite cycle-design;
  animation: 5s linear infinite cycle-design
}

.compile-path.-bg {
  stroke: #eee
}

.compile-header,
.explain {
  width: 20vmin;
  position: absolute;
  color: #eee;
  text-align: center
}

.compile-header {
  font-size: 3.5vmin;
  line-height: 20vmin
}

.compile-header.-think {
  left: 0;
  -webkit-animation: 5s linear infinite think-color;
  animation: 5s linear infinite think-color
}

.compile-header.-make {
  left: 20vmin;
  -webkit-animation: 5s linear infinite make-color;
  animation: 5s linear infinite make-color
}

.explain {
  width: 20vmin;
  top: calc(20vmin + 1rem);
  font-size: 2.5rem;
  text-align: center
}

.explain.-think {
  left: 0;
  color: #8dc63f
}

.explain.-make {
  left: 20vmin;
  color: #00b6de
}

#cards_landscape_wrap-2 {
  text-align: center;
  background: #f7f7f7
}

#cards_landscape_wrap-2 .container {
  padding-top: 0px;
  padding-bottom: 100px
}

#cards_landscape_wrap-2 a {
  text-decoration: none;
  outline: 0
}

#cards_landscape_wrap-2 .card-flyer .image-box {
  background: #fff;
  overflow: hidden;
  box-shadow: 0 2px 15px rgba(0, 0, 0, .5);
  border-radius: 5px
}

#cards_landscape_wrap-2 .card-flyer .image-box img {
  -webkit-transition: .9s;
  -moz-transition: .9s;
  -o-transition: .9s;
  -ms-transition: .9s;
  width: 100%;
  height: 200px
}

#cards_landscape_wrap-2 .card-flyer:hover .image-box img {
  opacity: .7;
  -webkit-transform: scale(1.15);
  -moz-transform: scale(1.15);
  -ms-transform: scale(1.15);
  -o-transform: scale(1.15);
  transform: scale(1.15)
}

#cards_landscape_wrap-2 .card-flyer .text-box .text-container {
  padding: 30px 18px
}

#cards_landscape_wrap-2 .card-flyer {
  border-radius: 5px;
  background: #fff;
  margin-top: 0px;
  -webkit-transition: .2s ease-in;
  -moz-transition: .2s ease-in;
  -ms-transition: .2s ease-in;
  -o-transition: .2s ease-in;
  transition: .2s ease-in;
  box-shadow: 0 3px 4px rgba(0, 0, 0, .4)
}

#cards_landscape_wrap-2 .card-flyer:hover {
  background: #fff;
  box-shadow: 0 15px 26px rgba(0, 0, 0, .5);
  -webkit-transition: .2s ease-in;
  -moz-transition: .2s ease-in;
  -ms-transition: .2s ease-in;
  -o-transition: .2s ease-in;
  transition: .2s ease-in;
  margin-top: 40px
}

#cards_landscape_wrap-2 .card-flyer .text-box p {
  margin-top: 10px;
  margin-bottom: 0;
  padding-bottom: 0;
  font-size: 14px;
  letter-spacing: 1px;
  color: #000
}

#cards_landscape_wrap-2 .card-flyer .text-box h6 {
  margin-top: 0;
  margin-bottom: 4px;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  font-family: 'Roboto Black', sans-serif;
  letter-spacing: 1px;
  color: #00acc1
}

@media (min-width: 768px) {
  .row-cols-md-8>* {
    flex: 0 0 auto;
    width: 9%;
  }
}

.param-check-large {
  line-height: 40px !important;
  height: 44px !important;
  margin-top: 6px !important;
  width: 20px;
}

.param-label {
  color: #000;
  font-weight: 400;
  vertical-align: bottom;
  line-height: 40px;
}


.genAIStepper {
  border: 0;
  padding-top: 10px;
  padding-bottom: 10px;
}

.nav-container {
  position: relative;
  font-size: 16px;
  font-weight: 500;
  height: calc(100vh - 50px);
}

.nav-step {
  cursor: pointer;
  position: relative;
  padding-left: 40px;
}


.list-group-item {
  background: transparent !important;
  color: white !important;
  z-index:9999 !important;
}

#genAIPage .list-group-item {
  background: transparent !important;
  color: gray !important;
  z-index:9999 !important;
}

.nav-step::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #dee2e6;
}

.nav-step.active::before {
  background: #007bff;
  transform: translateY(-50%);
  height: 25px;
  z-index: 3 !important;
}

.line {
  position: absolute;
  left: 20px;
  top: 30px;
  width: 2px;
  bottom: 450px;
  z-index: 999 !important;
  background: #dee2e6 !important;
  z-index: 0;
}

.step-content {
  display: none;
}

.step-content.active {
  display: block;
}

.clipped-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.column-content {
  height: 100%;
  overflow: hidden;
}

#genAIPage .genAIUpload {
  font-size: 6em;
  background: whitesmoke;
  border: solid 1px silver;
  position: relative;
  min-height: calc(100vh - 300px);
}

#genAIProfile .fa-head-side-brain {
  -webkit-text-stroke: #0a58ca;
  -webkit-text-stroke-width: 2px;
  color: #9fbeea;
  transition: color 0.3s;
}

#genAIProfile .fa-head-side-brain.drag-over {
  color: orange;
}

.genAIStepper:hover {
  background: #f0f0f1 !important;
}

.range-height {
  max-height: 125px;
}

#genAIPage .rangeInput  {
  margin-top: 50px;
}

.value-bubble {
    top: -80px;
    min-width: 45px;
    transform: translateX(-15%);
    padding: 10px 10px;
    background: #b8daff;
    min-width: 50px !important;
    color: blue;
    border-radius: 10px;
    font-size: 14px !important;
    font-family: Roboto;
    font-weight: 300;
    white-space: nowrap;
    z-index: 999;
    text-align: center;
    display: inline-block;
    position: relative;
    transition: left 0s ease-in-out, transform 0.25s ease-in-out;
}


.grid-container {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.grid-icon {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border: 1px solid silver;
  border-radius: 10px;
  margin: 5px;
}


/* Syntax highlighting for JSON objects */
ul.json-dict, ol.json-array {
  list-style-type: none;
  margin: 0 0 0 1px;
  border-left: 1px dotted #ccc;
  padding-left: 2em;
}
.json-string {
  color: #0B7500;
}
.json-literal {
  color: #1A01CC;
  font-weight: bold;
}

/* Toggle button */
a.json-toggle {
  position: relative;
  color: inherit;
  text-decoration: none;
}
a.json-toggle:focus {
  outline: none;
}
a.json-toggle:before {
  color: #aaa;
  content: "\25BC"; /* down arrow */
  position: absolute;
  display: inline-block;
  width: 1em;
  left: -1em;
}
a.json-toggle.collapsed:before {
  content: "\25B6"; /* left arrow */
}




/* Collapsable placeholder links */
a.json-placeholder {
  color: #aaa;
  padding: 0 1em;
  text-decoration: none;
}

a.json-placeholder:hover {
  text-decoration: underline;
}

pre.modal  {
  word-break: break-all;
  word-wrap: break-word;
  padding: 52px;
}

.jsonRenderer {
  text-align: left !important;
  line-height: 18px;
  font-family: tahoma;
  margin: 0;
  padding: 0;
  white-space: pre-wrap; /* Ensures that long lines wrap instead of overflowing */
}


.horizontal-ruler-with-dots-and-text {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #eeeeee;
  height: 80px;
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  border-color: silver;
}

.horizontal-ruler-with-dots-and-text > .labels {
  display: flex;
  width: 99%;
  height:10px;
  font-size:14px;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}

.horizontal-ruler-with-dots-and-text > .labels > div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2rem;
  border-radius:5x;
  color:black;
  background:#fff;
  border-style:solid;
  border-color:silver;
  padding:5px;
  border-width:1px;
  text-align: center;
  z-index:1;
}

.dotted-line {
  position: absolute;
  z-index: 1;
  width: 100%;
  border-bottom: 2px dotted rgba(50, 50,50, 1);
  bottom: calc(1.1rem + 1px);
}


.light-pill {
    display: inline-block;
    padding: 0.25em 0.6em;
    /* font-size: 0.75rem; */
    font-weight: 500;
    alignment-baseline: middle;
    color: black;
    border-style: solid;
    height: 40px;
    border-width: 1px;
    border-color: gray;
    background-color: #d9e7ff;
    border-radius: 50px;
    text-align: center;
    line-height: 35px;
    max-height: 50px;
    white-space: nowrap;
}

.card-top {
  margin-top: 15px;
}

.card-top h4 {
  margin: 0 0 0.5rem;
  margin-top: 8px;
  font-weight: 400;
}

.card-top p {
  margin: 0;
  width: 100%;
  font-size: 0.75rem;
  color: #666;
}

.card-bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  align-items: center;
}
#genAIPage hr {
  color: silver !important;
  padding: 1px 1px 1px 1px;
}

#genAIPage input[type=text] {
  width: auto;
  cursor: text;
  display: inline-block !important;
  height: 43px !important;
  outline-style: none;
  padding: 5px;
  border: 1px solid silver !important;
}


.icon {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #007bff;
  transition: color 0.3s;
}

.icon:hover {
  color: #0056b3;
}

.icon i {
  margin-right: 0.5rem;
}

.icon span {
  font-size: 0.9rem;
}
.filter-container {
  margin: 10px 0;
  z-index: 999 !important;
  position: relative;
}
.filter-input {
  display: inline-block;
  width: 200px;
  margin-right: 10px;
  position: relative;
}
.clear-button {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #dc3545;
  font-size: 30px;
  font-weight: 500;
}

.bd-callout-info {
  --bd-callout-color: var(--bs-info-text-emphasis);
  --bd-callout-bg: var(--bs-info-bg-subtle);
  --bd-callout-border: var(--bs-info-border-subtle);
}

.bd-callout {
  --bs-link-color-rgb: var(--bd-callout-link);
  --bs-code-color: var(--bd-callout-code-color);
  padding: 1.25rem;
  width: 85%;
  margin-top: 0.5rem;
  margin-left: 10px;
  margin-bottom: 1.25rem;
  color: var(--bd-callout-color, inherit);
  background-color: var(--bd-callout-bg, var(--bs-gray-100));
  border-left: 0.25rem solid var(--bd-callout-border, var(--bs-gray-300));
}

    /* Styles for the iframe container and spinner */
    .iframe-container {
      position: relative; /* Needed for absolute positioning of spinner */
      width: 100%;
      /* Adjust height as needed, viewport height minus some offset is common */
      height: 85vh;
      overflow: hidden; /* Hide potential iframe scrollbars if desired */
  }

  .iframe-container iframe {
      border: none; /* Borderless iframe */
      width: 100%;
      height: 100%;
      display: block; /* Remove extra space below iframe */
  }

  .spinner-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white */
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 10; /* Ensure spinner is on top */
      /* Hidden by default, shown via JS */
      visibility: hidden;
      opacity: 0;
      transition: opacity 0.3s ease-in-out, visibility 0.3s;
  }

   .spinner-overlay.visible {
       visibility: visible;
       opacity: 1;
   }