:root {
  --omrs-color-ink-lowest-contrast: rgba(47, 60, 85, 0.18);
  --omrs-color-ink-low-contrast: rgba(60, 60, 67, 0.3);
  --omrs-color-ink-medium-contrast: rgba(19, 19, 21, 0.6);
  --omrs-color-interaction: #1e4bd1;
  --omrs-color-interaction-minus-two: rgba(73, 133, 224, 0.12);
  --omrs-color-danger: #b50706;
  --omrs-color-bg-low-contrast: #eff1f2;
  --omrs-color-ink-high-contrast: #121212;
  --omrs-color-bg-high-contrast: #ffffff
}

button {
  color: #fff
}

input,optgroup,select,textarea {
  background-color: #f1f6fd!important;
  color: #333;
  border: 0;
  width: 100%
}

label {
  color: #333!important
}

a {
  color: #0075fe;
  text-decoration: underline;
  transition: color .3s
}

a:hover {
  color: #333
}


.input {
  background-color: #f1f6fd!important;
  color: #333;
  border: 0
}

.output-node .add-button,.user-input-node .add-button {
  background: 0 0
}

.avatarSmall {
  width: 60px;
  border-radius: 50%;
}

.generic-add-button {
  background: 0 0;
  color: #0075fe
}

.approval-button {
  background: #fff;
  border: 1px solid #333;
  border-radius: 5px
}

.approval-button.approve {
  border: 1px solid green;
  color: green
}

.approval-button.reject {
  border: 1px solid red;
  color: red
}

.approval-button.edit {
  border: 1px solid #0075fe;
  color: #0075fe
}

.run-button {
  width: 200px;
  padding: 5px;
  color: white;
  background-color: #0075fe;
}

.keyvaluePairs {
  border: 0;
  display: flex;
  gap:5px;
}

.material-icons {
  background-color: transparent!important
}

.accordion-legal {
  background-color: #fff;
  font-weight: lighter
}

select.minimal {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  font-size: 14px;
  min-width: 100px;
  height: 25px!important;
  padding: .275em .2em .275em .275em;
  background-color: transparent;
  border: 1px solid #caced1;
  border-radius: 10px;
  color: #333!important;
  cursor: pointer;
  background-position: calc(100% - 20px) calc(1em + 2px),calc(100% - 15px) calc(1em + 2px),calc(100% - 2.5em) .5em;
  background-size: 5px 5px,5px 5px,1px 1.5em;
  background-repeat: no-repeat;
}

#chatBox {
  background-color: #fff!important
}

.avatar_chat_user {
  z-index: 2
}

.avatar_chat_assistant {
  max-width: 40px;
  border-radius: 50%;
  margin-top: 20px;
}

.avatar_chat_user {
  max-width: 40px;
  border-radius: 50%;
  margin-top: 20px;
}

.chat-assistant {
  position: relative;
  padding: 10px 20px;
  background: #f1f6fd!important;
  border-radius: 25px;
  color: #000;
  margin-left: 30px;
  margin-top: 100px;
  float: left;
  width: 100%
}

.chat-assistant:before {
  content: "";
  position: absolute;
  z-index: 2;
  bottom: -2px;
  left: -7px;
  height: 20px;
  border-left: 20px solid #f1f6fd;
  border-bottom-right-radius: 16px 14px;
  -webkit-transform: translate(0,-2px)
}

.chat-assistant:after {
  content: "";
  position: absolute;
  z-index: 3;
  bottom: -2px;
  left: 4px;
  width: 26px;
  height: 20px;
  background: #fff;
  border-bottom-right-radius: 10px;
  -webkit-transform: translate(-30px,-2px)
}

.chat-user {
  background: #0075fe!important;
  color: #fff!important;
  padding: 10px;
  border-radius: 20px;
}


.msgbox-area {
  position: absolute;
  top:0px;
  width: 100%;
  z-index: 999;
 
}

.msgbox-box {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  height: 100px;
  padding: 15px;
  font-family: Karla;
  font-size: 16px;
  color: black;
}

.msgbox-close {
  color: #000;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  cursor: pointer;
}

.tooltip .tooltip-text {
  visibility: hidden;
  width: 60px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  font-size: small;
  position: absolute;
  transform: translateY(-75%);
  left: 3px;
  z-index: 1;
}

.tooltip.active .tooltip-text {
  visibility: visible;
}

.chat-user:before {
  border-bottom-left-radius: 16px 14px;
  border-left: 20px solid #fff;
  content: "";
  position: absolute;
  z-index: 2;
  bottom: -2px;
  right: -90px;
  width: 60px;
  height: 22px;
  background: #fff;
  border-bottom-right-radius: 10px;
  -webkit-transform: translate(-30px,-2px)
}

.chat-user:after {
  background: #0075fe!important;
  position: absolute;
  bottom: -2px;
  height: 20px;
  -webkit-transform: translate(-30px,-2px);
  right: -40px
}

.tab {
  color: #333
}

.tabs{
  display: flex;
}

table.gridjs-table tr:hover {
  background-color: #f1f6fd!important
}

#inputBox {
  width: 100%;
  height: 38px;
  color: #080f25;
  vertical-align: middle;
  border: 1px solid #ccc;
  margin-bottom: 10px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.42857;
  display: block;
  font-family: Karla;
  font-weight: lighter;
  border-radius: 50px;
  background-color: #fff!important
}

.gridjs-wrapper {
  background-color: #fff
}

.gridjs-footer {
  background-color: #fff!important;
  color: #101935!important
}

.gridjs-search-input {
  background-color: #fff!important;
  color: #101935!important
}

.gridjs-pagination {
  background-color: transparent!important;
  color: #101935!important
}

.gridjs-summary {
  background-color: transparent!important;
  color: #!important
}

.gridjs-pages button {
  background-color: transparent!important;
  color: #101935!important
}

select.minimal option {
  background-color: #fff
}

.button-audit {
  font-family: Karla !important;
}


.centerload {
  color: #333;
}

div.omrs-input-group {
  margin-bottom: 1.5rem;
  position: relative;
  width: 100%
}

.omrs-input-underlined {
  display:flex;
  margin-top:10px;
}


.omrs-input-filled>input,.omrs-input-underlined>input {
  border: none;
  border-bottom: .125rem solid var(--omrs-color-ink-medium-contrast);
  width: 100%!important;
  height: 2rem!important;
  font-size: 1.0625rem!important;
  font-family: Karla!important;
  padding-left: .875rem!important;
  line-height: 147.6%!important;
  padding-top: .825rem!important;
  padding-bottom: .5rem!important;
  padding-right: .875rem!important;
  color: #333!important
}

.omrs-input-filled>input:focus,.omrs-input-underlined>input:focus {
  outline: 0
}


.omrs-input-filled>.omrs-input-label,.omrs-input-underlined>.omrs-input-label {
  position: absolute;
  top: -10px;
  line-height: 1%;
  color: #000;
  transition: top .2s;
  padding-right: .875rem!important;
  font-family: Karla!important;
  font-weight: lighter;
  font-size: 14px;
}

.omrs-input-filled>.omrs-input-helper,.omrs-input-underlined>.omrs-input-helper {
  font-size: .7375rem;
  color: #000;
  letter-spacing: .0275rem;
  margin: .125rem .875rem
}

.omrs-input-filled>input:hover,.omrs-input-underlined>input:hover {
  background: var(--omrs-color-interaction-minus-two);
  border-color: var(--omrs-color-ink-high-contrast)
}

.omrs-input-filled>input:focus+.omrs-input-label,.omrs-input-filled>input:valid+.omrs-input-label,.omrs-input-underlined>input:focus+.omrs-input-label,.omrs-input-underlined>input:valid+.omrs-input-label {
  top: 0;
  font-size: .9375rem;
  margin-bottom: 32px
}

.omrs-input-filled:not(.omrs-input-danger)>input:focus+.omrs-input-label,.omrs-input-underlined:not(.omrs-input-danger)>input:focus+.omrs-input-label {
  color: var(--omrs-color-interaction)
}

.omrs-input-filled:not(.omrs-input-danger)>input:focus,.omrs-input-underlined:not(.omrs-input-danger)>input:focus {
  border-color: var(--omrs-color-interaction)
}

.omrs-input-filled:not(.omrs-input-danger)>input:focus~svg,.omrs-input-underlined:not(.omrs-input-danger)>input:focus~svg {
  fill: var(--omrs-color-ink-high-contrast)
}

.omrs-input-underlined>input:disabled {
  background: var(--omrs-color-bg-low-contrast);
  cursor: not-allowed
}

.omrs-input-underlined>input:disabled+.omrs-input-label,.omrs-input-underlined>input:disabled~.omrs-input-helper {
  color: var(--omrs-color-ink-low-contrast)
}

.omrs-input-underlined>input:disabled~svg {
  fill: var(--omrs-color-ink-low-contrast)
}

.omrs-input-underlined>input {
  background: var(--omrs-color-bg-high-contrast)
}

.omrs-input-filled>input {
  background: var(--omrs-color-bg-low-contrast)
}

.modal-popup {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  max-width: 2500px;
  padding: 1.3rem;
  min-width: 400px;
  min-height: 250px;
  position: absolute;
  top: 30%;
  left: 40%;
  z-index: 12;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 15px;
  padding-top: 0;
  font-family: Karla!important;
  font-size: 18px!important
}

.modal-popup p {
  text-align: left;
  font-size: 14px;
  margin-bottom: 20px
}

.modal-popup-selfposition {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  max-width: 2500px;
  padding: 1.3rem;
  min-width: 400px;
  min-height: 250px;
  background-color: #fff;
  position: absolute;
  border: 1px solid #ddd;
  position: absolute;
  z-index: 12;
  border-radius: 15px;
  padding-top: 0;
  font-family: Karla!important;
  font-size: 18px!important
}

.modal-popup-selfposition p {
  text-align: left;
  font-size: 14px;
  margin-bottom: 20px
}

.modal-popup-wide {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  max-width: 2500px;
  padding: 1.3rem;
  min-height: 250px;
  position: absolute;
  top: 30%;
  left: 8%;
  z-index: 10;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 15px;
  padding-top: 0;
  font-family: Karla!important;
  font-size: 18px!important
}

@media (min-width: 481px) and (max-width:1600px) {
  .modal-popup-wide {
      left:1%!important;
      min-width: 98%;
      top: 10%
  }
}

@media (min-width: 1600px) {
  .modal-popup-wide {
      left:3% !important;
      left: 30% !important;
      min-width: 1400px
  }
}

.modal-popup-wide p {
  text-align: left;
  font-size: 14px;
  margin-bottom: 20px
}

.modal-popup-mid {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  max-width: 2500px;
  padding: 1.3rem;
  min-height: 250px;
  position: absolute;
  top: 30%;
  left: 8%;
  z-index: 10;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 15px;
  padding-top: 0;
  font-family: Karla!important;
  font-size: 18px!important
}

@media (min-width: 481px) and (max-width:1600px) {
  .modal-popup-mid {
      left:15%!important;
      max-width: 70%;
      top: 10%
  }
}

@media (min-width: 1600px) {
  .modal-popup-mid {
      left:30%!important;
      min-width: 40%
  }
}

.modal-popup-mid p {
  text-align: left;
  font-size: 14px;
  margin-bottom: 20px
}

.modal-popup-title {
  font-size: 20px!important;
  color: #333!important;
  text-align: left!important;
  border-bottom: 1px solid #c5cbd6;
  padding: 0;
  margin: 0;
  margin-bottom: 5px;
  padding-bottom: 10px;
}

.modal-popup .flex {
  display: flex;
  justify-content: space-between;
  height: 30px
}

.modal-popup p {
  font-size: 12px;
  color: #777;
  margin-bottom: 0;
  margin-top: 0
}

.modal-popup button:hover {
  color: #fff
}

.panels-resizer {
  background-color: #f1f6fd
}

.modal-popup button {
  cursor: pointer;
  border: none;
  font-size: 14px;
  background-color: #f1f6fd;
  color: #333!important
}

.modal-upload-button {
  background-color: #0075fe!important;
  font-size: 18px;
  color: white !important;
  padding: 10px;
  border-radius: 5px;
}

.upload-button {
  background-color: #0075fe!important;
  padding: 10px;
  border-radius: 5px;
  font-size: 14px
}

.msgbox-form {
  display: block
}

.hyperflow-title {
  font-weight: lighter
}

.hyperflow-description {
  font-weight: lighter
}

.save-button {
  background-color: #e5edf5;
  color: #0075fe;
  border: 1px solid #0075fe;
  border-radius: 5px
}

.heading-pdp.current {
  color: #0075fe
}

.delete-button {
  background-color: #f9050521;
  color: red;
  border: 1px solid red;
  border-radius: 5px;
  font-size: 14px
}

.save-button.save-actions {
  width: 100%;
  background-color: #fff;
  color: #333;
  border-radius: 20px
}

.save-button.versions-selector {
  width: 100%;
  word-break: break-word;
  background-color: #fff;
  color: #333;
  border-radius: 20px
}

.lateral-menu-header-title p {
  font-size: 18px
}

.cancel-confirmation {
  background-color: transparent!important;
  border: 1px solid #0075fe!important;
  color: #0075fe
}

.material-icons.md-dark {
  color: #333
}

.btn-popup {
  display: inline-block;
  padding: .8rem 1.4rem;
  font-weight: 700;
  background-color: #000;
  color: #fff;
  border-radius: 5px;
  text-align: center;
  font-size: 1em
}

.btn-open-popup {
  position: absolute;
  bottom: 150px
}

.btn-close-popup {
  transform: translate(20px,5px);
  padding: .5rem .7rem;
  background-color: #f1f6fd;
  border-radius: 50%
}

.btn-close-popup:hover {
  color: #fff!important
}

.btn-close-popup-wide {
  transform: translate(10px,5px);
  padding: .5rem .7rem;
  background-color: grey;
  border-radius: 50%;
  height: 35px
}

.btn-close-popup-wide:hover {
  background-color: #272626;
  color: #fff
}

.btn-close-popup:hover {
  background-color: #272626;
  color: #fff
}

.button-filters:hover {
  color: #fff!important
}

.talk-button2 {
  padding: 14px;
  border-radius: 0 50px 50px 0;
  background-color: #f1f6fd!important;
  color: #0075fe!important
}

.button-expand {
  padding: 14px;
  border-radius: 5px;
  display: block;
  cursor: pointer;
  display: block;
  background-color: #000;
  color: #fff
}

.overlay-popup {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(3px);
  z-index: 4
}

.hidden {
  display: none
}

.half-outside {
  width: 200px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff
}

.item-list-node {
  display: inline-block;
  position: relative;
  width: 30px;
  margin-left: -10px;
  height: 30px;
  overflow: hidden;
  border-radius: 50%;
  background-color: #fff
}

table.gridjs-table {
  padding-left: 10px;
  padding-right: 10px;
  border-collapse: separate;
  border-spacing: 0 2px;
  width: 100%
}

table.gridjs-table td,th {
  padding: 8px!important;
  font-family: Ubuntu;
  font-size: 14px;
  font-weight: lighter;
  color: #000!important;
  text-align: center!important;
  background-color: transparent!important
}

table.gridjs-table tr {
  background-color: transparent!important;
  color: #000!important
}

table.gridjs-table tr:hover td {
  background-color: #f1f6fd!important
}

table.gridjs-table th {
  font-size: 14px;
  color: #0000008a!important;
  font-weight: 400!important;
  text-align: center!important;
  background-color: transparent!important
}

td.gridjs-td {
  border: 0!important
}

.gridjs-tbody,td.gridjs-td {
  background-color: transparent!important
}

.gridjs-tbody {
  text-align: left!important
}

td.gridjs-td:first-child {
  border-radius: 0
}

td.gridjs-td:last-child {
  border-radius: 0
}

.keyvaluePairs.header input {
  background-color: #f1f6fd!important;
  border: 0
}

.card-hitl {
  background-color: #fff
}

.accordion-header {
  text-align: left;
  margin-left: 40px;
  padding: 5px;
  color: #333
}

.accordion-header[aria-expanded=true] {
  margin-bottom: 5px!important
}

.accordion-icon {
  margin-left: 10px
}

.main_checkboxes {
  padding-left: 5px;
  margin-bottom: 5px;
  font-size: 12px;
  border: 0;
  background-color: #f1f6fd
}

.main_checkboxes.hovered:hover {
  color: #040713!important;
  background-color: #fff!important
}

.aiservice_modal_column1 {
  background-color: #f1f6fd;
  margin-left: 10px;
  padding: 5px
}

.aiservice_modal_column2 {
  background-color: #f1f6fd;
  margin-left: 10px;
  padding: 5px
}

.aiservice_modal_column3 {
  background-color: #f1f6fd;
  margin-left: 10px;
  padding: 5px
}

.aiservice_modal_row:after {
  content: "";
  display: block;
  clear: both
}

#clearBtn {
  color: #0075fe
}

.console-gen-answer {
  color: #000
}

.heading-15 {
  color: #333
}

.component-card-top-container-datasources {
  background-color: #fff;
  width: 80%
}

.component-card-top-container-hitl-audit {
  background-color: #fff
}

.component-card-top-container-insights {
  background-color: #fff
}

.component-card-top-container-actions {
  background-color: #fff
}

.console-gen-translation {
  color: #000
}

.loading-indicator {
  text-align: center;
  margin-top: 20px;
  font-size: 20px;
  color: #333;
  font-size: 14px
}

.fieldset-legend {
  color: #333 important
}

.run-execution-wrapper {
  background-color: #f1f6fd
}

.aiservice_response {
  background-color: #fff;
  overflow-y: auto;
  align-items: center;
  margin-bottom: 10px;
  display: none;
  padding: 5px;
  margin-top: 10px;
  min-height: 100px
}

.box-padding.app-padding-box {
  display: flex
}

.status-badge.green {
  background-color: green!important;
  color: #fff!important
}

.status-badge.grey {
  background-color: grey!important;
  color: #fff!important
}

.app-logo-circle {
  padding: 0
}

.tags-container {
  background-color: transparent!important;
  border: 0!important;
  box-shadow: none!important
}

.tagged {
  background-color: transparent!important;
  border: 0!important;
  box-shadow: none!important
}

.accordion-item {
  border: 0
}

.button-3-add-list:hover {
  color: #fff!important
}

.add-button {
  background: 0 0;
  color: #0075fe;
  margin-top: 0;
  cursor: pointer;
  float: left
}

.subflow-node-content {
  background-color: #f1f6fd
}

.active-inputs-container {
  color: #7e89ac
}

.panel-legal {
  background-color: #fff!important
}

.status-badge.blue {
  background-color: #0075fe!important;
  color: #fff!important
}

.removeBtn {
  background: 0 0;
  color: #0075fe
}

.icon_input {
  color: var(--neutral--500);
  margin-bottom: 0;
  margin-right: 10px;
  font-family: "Fa Solid 900",Verdana,sans-serif;
  font-size: 19px;
  font-style: normal;
  padding: 0
}

@media (min-width: 481px) and (max-width:1600px) {
  .modal-popup-wide {
      left:1%!important
  }
}

@media (min-width: 1600px) {
  .modal-popup-wide {
      left:30%!important
  }
}

ul.checkbox {
  margin: 0;
  padding: 0;
  margin-left: 20px;
  list-style: none;
  background-color: #fff
}

ul.checkbox li input {
  margin-right: .12em;
  display: inline-block;
  appearance: checkbox!important
}

ul.checkbox li {
  border: 1px transparent solid;
  display: inline-block;
  width: 22em;
  margin-right: 50px
}

ul.checkbox label {
  font-family: Karla;
  font-weight: lighter
}

ul.checkbox li.focus,ul.checkbox li:hover {
  background-color: #f1f6fd;
  width: 22em
}