:root {
  --border-color: #cacaca;
  --background-color: #ffffff;

  --background-box-title: #f7f7f7;
}

/* Dark color scheme*/
[data-theme="dark"] {
    --app-modal-background-color: #2C2C2E;
    --app-modal-button-background-color: #2C2C2E;
    --app-modal-button-text-color: #FFFFFF;
    --app-modal-text-always_black-color: #000000;
    --app-modal-button-text-hover-color: #FFFFFF;
    --app-modal-button-hover-background-color: #252527;
    --app-modal-button-border-color: #3b3b3d;

    /* Conversation Card */
    --app-card-top-bottom-border-color: #595959;

    --app-card-conversation-pin-button-bg-hover: #ededed;
    --app-card-conversation-pin-button-bg-pinned: #ffffff;
    --app-card-conversation-pin-button-bg-pinned-hover: #e6e6e6;
    --app-card-conversation-pin-button-bg-active: #c3c3c3;

    --app-card-conversation-pin-icon-fill: #838383;
    --app-card-conversation-pin-icon-fill-hover: #000;
    --app-card-conversation-pin-icon-fill-pinned: #000;
    --app-card-conversation-pin-icon-fill-active: #000;
}

/* Light color scheme*/
[data-theme="light"] {
    --app-modal-background-color: #FFFFFF;
    --app-modal-button-background-color: #FFFFFF;
    --app-modal-button-text-color: #2C2C2E;
    --app-modal-text-always_black-color: #000000;
    --app-modal-button-text-hover-color: #2C2C2E;
    --app-modal-button-hover-background-color: #ececec;
    --app-modal-button-border-color: #e6e6eb;

    /* Conversation Card */
    --app-card-top-bottom-border-color: #c2c2c2;

    --app-card-conversation-pin-button-bg-hover: #dfdfdf;
    --app-card-conversation-pin-button-bg-pinned: #000;
    --app-card-conversation-pin-button-bg-pinned-hover: #242425;
    --app-card-conversation-pin-button-bg-active: #302f2f;

    --app-card-conversation-pin-icon-fill: #666;
    --app-card-conversation-pin-icon-fill-hover: #000;
    --app-card-conversation-pin-icon-fill-pinned: #fff;
    --app-card-conversation-pin-icon-fill-active: #fff;
}

.wrapper-symap {
    width: 100%;
    /* height: calc(100vh - 145px); */
    display: flex;
    background: #f7f7f7;
    background-size: 25px 25px;
    background-image: radial-gradient(circle, #6b6666 1px, transparent 1px);
}

.col-agent-builder {
  overflow: auto;
  width: 300px;
  height: 100%;
  border-right: 1px solid #e3e3e3;
  background: #f7f7f7;
}

.drag-drawflow {
  line-height: 50px;
  border-bottom: 1px solid var(--border-color);
  padding-left: 20px;
  cursor: move;
  user-select: none;
}
.drag-drawflow:hover{
    background: white;
}
.drag-drawflow:hover i{
    color:black;
}
.drag-drawflow:hover span{
    color:black;
}
.menu {
  position: absolute;
  height: 40px;
  display: block;
  background: white;
  width: 100%;
}
.menu ul {
  padding: 0px;
  margin: 0px;
  line-height: 40px;
}

.menu ul li {
  display: inline-block;
margin-left: 10px;
border-right: 1px solid var(--border-color);
padding-right: 10px;
line-height: 40px;
cursor: pointer;
}

.menu ul li.selected {
  font-weight: bold;
}

.btns-background {
    float: right !important;
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    cursor: pointer !important;
    z-index: 5 !important;
    width: 920px;
    height: 60px;
    background: #ffffff !important;
    border: 1px solid #f1f1f1 !important;
    border-radius: 5px;
}

.btn-save {
  float: right!important;
  position: absolute!important;
  top: 20px!important;
  right: 20px!important;
  cursor: pointer!important;
  z-index: 5!important;
  background: #ef311dff !important;
  color: white !important;
}
.btn-fifty-i {
    vertical-align: middle;
    color: white !important;
}

.btn-load {
  float: right!important;
  position: absolute!important;
  top: 20px!important;
  right: 120px!important;
  cursor: pointer!important;
  z-index: 5!important;
  background: #fff !important;
  border: 1px solid #f1f1f1 !important;
}

.btn-run-all {
  float: right!important;
  position: absolute!important;
  top: 20px!important;
  right: 260px!important;
  cursor: pointer!important;
  z-index: 5!important;
  background: #fff !important;
  border: 1px solid #f1f1f1 !important;
}

.btn-sandbox {
  float: right!important;
  position: absolute!important;
  top: 20px!important;
  right: 385px!important;
  cursor: pointer!important;
  z-index: 5!important;
  background: #fff !important;
  border: 1px solid #f1f1f1 !important;
}

.btn-specs {
  float: right!important;
  position: absolute!important;
  top: 20px!important;
  right: 510px !important;
  cursor: pointer!important;
  z-index: 5!important;
  background: #fff !important;
  border: 1px solid #f1f1f1 !important;
}

.btn-cost {
  float: right!important;
  position: absolute!important;
  top: 20px!important;
  right: 690px!important;
  cursor: pointer!important;
  z-index: 5!important;
  background: #fff !important;
  border: 1px solid #f1f1f1 !important;
}

.btn-clear {
  float: right!important;
  position: absolute!important;
  top: 20px!important;
  right: 800px!important;
  cursor: pointer!important;
  z-index: 5!important;
  background: #fff !important;
  border: 1px solid #f1f1f1 !important;
}

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

.btn-lock {
  float: right;
  position: absolute;
  bottom: 100px;
  right: 140px;
  display: flex;
  font-size: 24px;
  color: white;
  padding: 5px 10px;
  background: #555555;
  border-radius: 4px;
  border-right: 1px solid var(--border-color);
  z-index: 5;
  cursor: pointer;
}

.bar-zoom {
  float: right;
  position: absolute;
  bottom: 100px;
  right: 10px;
  display: flex;
  font-size: 24px;
  color: white;
  padding: 5px 10px;
  background: #555555;
  border-radius: 4px;
  border-right: 1px solid var(--border-color);
  z-index: 5;
}
.bar-zoom svg {
  cursor: pointer;
  padding-left: 10px;
}
.bar-zoom svg:nth-child(1) {
  padding-left: 0px;
}

#drawflow {
  position: relative;
  width: calc(100vw - 300px);
  height: calc(100% - 0px);
  background: #f7f7f7;
  background-size: 25px 25px;
   background-image: radial-gradient(circle, #6b6666 1px, transparent 1px);
}

@media only screen and (max-width: 768px) {
  .col-agent-builder {
    width: 50px;
  }
  .col-agent-builder .drag-drawflow span {
    display:none;
  }
  #drawflow {
    width: calc(100vw - 51px);
  }
}



/* Editing Drawflow */

.drawflow .drawflow-node {
  background: var(--background-color);
  border: 1px solid var(--border-color);
  -webkit-box-shadow: 0 2px 15px 2px var(--border-color);
  box-shadow: 0 2px 15px 2px var(--border-color);
  padding: 0px;
  width: 280px!important;
}

.drawflow .drawflow-node.selected  {
  background: white;
  border: 1px solid #4ea9ff;
  -webkit-box-shadow: 0 2px 20px 2px #bbdaf7;
  box-shadow: 0 2px 20px 2px #bbdaf7;
}

.drawflow .drawflow-node.selected .title-box {
  color: #22598c;
  /*border-bottom: 1px solid #4ea9ff;*/
}

.drawflow .connection .main-path {
  stroke: #4ea9ff;
  stroke-width: 3px;
}

.drawflow .drawflow-node .input, .drawflow .drawflow-node .output {
  height: 15px;
  width: 15px;
  border: 2px solid var(--border-color);
}

.drawflow .drawflow-node .input:hover, .drawflow .drawflow-node .output:hover {
  background: #4ea9ff;
}

.drawflow .drawflow-node .output {
  right: 10px;
}

.drawflow .drawflow-node .input {
  left: -10px;
  background: white;
}

.drawflow > .drawflow-delete {
  border: 1px solid #43b993;
  background: white;
  color: #43b993;
  -webkit-box-shadow: 0 2px 20px 2px #43b993;
  box-shadow: 0 2px 20px 2px #43b993;
}

.drawflow-delete {
  border: 1px solid #4ea9ff;
  background: white;
  color: #4ea9ff;
  -webkit-box-shadow: 0 2px 20px 2px #bbdaf7;
  box-shadow: 0 2px 20px 2px #bbdaf7;
}

.drawflow-node .title-box {
  height: 50px;
  line-height: 50px;
  background: var(--background-box-title);
  border-bottom: 1px solid #e9e9e9;
  border-radius: 4px 4px 0px 0px;
  padding-left: 10px;
}
.drawflow .title-box svg {
  position: initial;
}
.drawflow-node .box {
  padding: 10px 20px 20px 20px;
  font-size: 14px;
  color: #555555;

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

.drawflow_content_node .inline-icon {
    color: var(--app-modal-text-always_black-color)!important;
}

.drawflow-node.welcome {
  width: 250px;
}

.drawflow-node.slack .title-box {
  border-radius: 4px;
}

.drawflow-node input, .drawflow-node select, .drawflow-node textarea {
    border-radius: 4px;
    border: 1px solid var(--border-color);
    height: 30px;
    line-height: 15px;
    font-size: 12px;
    width: 100%;
    margin: 5px;
    color: #555555;
}

.drawflow-node textarea {
  height: 100px;
}


.drawflow-node.personalized {
  background: red;
  height: 200px;
  text-align: center;
  color: white;
}
.drawflow-node.personalized .input {
  background: yellow;
}
.drawflow-node.personalized .output {
  background: green;
}

.drawflow-node.personalized.selected {
  background: blue;
}

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

}

.drawflow .connection .point.selected, .drawflow .connection .point:hover {
  fill: #4ea9ff;
}


/* Modal */
.agentModal {
  display: none;
  position: fixed;
  z-index: 7;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.7);
}

.agentModal-content {
  position: relative;
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 400px; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.agentModal .close {
  color: var(--app-top-button-text-color)!important;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor:pointer;
}

@media only screen and (max-width: 768px) {
  .agentModal-content {
    width: 80%;
  }
}
.title-box-status {
    border-radius: 50%;
    width: 15px;
    height: 15px;
    display: inline-block;
    font-size: 0.9em;
}
.model-price{
    font-size: 0.7em;
}
.models-cost{
}

.flow-chart-viewer{
    width: 800px;
    height: 600px;
}
.grey-table {
    width: 100%;
    font-size: small;
    word-wrap: break-word;
}
.grey-table, .grey-table th, .grey-table tr, .grey-table td {
    background: var(--app-modal-button-background-color)!important;
    color: var(--app-text-color);
    border: none;
    border-bottom: 1px solid;
}
.grey-table tr:nth-child(odd) {
    background: #313133!important;
}

.grey-background {
    background: var(--app-modal-button-background-color)!important;
    color: var(--app-modal-button-text-color)!important;
}
.flowButtons{
    background: var(--app-modal-button-background-color);
    color: var(--app-modal-button-text-color);
    border: none!important;
    font-size: small;
}
.flowButtons:hover{
    background: var(--app-modal-button-hover-background-color);
    color: var(--app-modal-button-text-hover-color) ;
    border: none!important;
}

/* Prompt Optimizer */
.optimizer-container {
    font-size: small;
}
.flow-agent-optimizer-model{
    width: 100%;
    height: 30px;
}
.optimizer-container-child{
}
.optimizer-container-mover{
    display: flex;
    align-items: center;
    justify-content: center;
}
.optimizer-button {
    background: var(--app-modal-button-background-color);
    color: var(--app-top-button-text-color);
    font-size: small;
    display: inline-block;
    border: 1px solid var(--app-modal-button-border-color)!important;
}
.card-button {
    background: var(--app-modal-button-background-color);
    color: var(--app-top-button-text-color);
    font-size: xx-small;
    display: inline-block;
    border: 1px solid var(--app-modal-button-border-color)!important;
}

.pinner {

  > button {
    border-radius: 50%;
    display: block;
    cursor: pointer;
    padding: 2px;
    border: none !important;
    transition: background-color .25s;

    > i {
      height: 90%;
      transition: transform .25s;
      color : var(--app-card-conversation-pin-icon-fill);
    }

    &:hover {
      background: var(--app-card-conversation-pin-button-bg-hover);

      > i {
        color : var(--app-card-conversation-pin-icon-fill-hover);
      }
    }

    &:active {
      transition: background-color 0s;
      box-shadow: inset 0 0 5px #fff;

      > i {
        color : var(--app-card-conversation-pin-icon-fill-active);
      }
    }

    &.pinned {
      background: var(--app-card-conversation-pin-button-bg-pinned);
      padding: 2px;

      &:hover {
        background: var(--app-card-conversation-pin-button-bg-pinned-hover);
      }

      &:active {
        box-shadow: inset 0 0 5px #fff;
      }

      > i {
        transform: rotate(45deg);
        color : var(--app-card-conversation-pin-icon-fill-pinned);
      }
    }
  }
}


.optimizer-container-details{
    border-bottom: 1px solid var(--app-modal-button-border-color);
    border-top: 1px solid var(--app-modal-button-border-color);
    font-size: small;
    height: 150px;
    overflow: hidden;
    overflow-y: auto;
}
.flow-agent-optimizer-menu-row{
    margin-bottom: 5px;
    font-size: small;
    line-height: 40px;
}
.flow-agent-optimizer-menu-group{
    border: 1px solid var(--app-modal-button-border-color);
    border-radius: 5px;
}
.flow-agent-optimizer-menu-group select {
    background: var(--app-modal-button-background-color)!important;
    border: none!important;
    color: var(--app-top-button-text-color)!important;
}
.flow-agent-optimizer-menu-group button {
    border:none;
}
.flowAgentEditorModalBody{
    height: 600px;
}
.center-container-div {
    display: flex;
    justify-content: center;
    align-items: center;
}
.prompts-list, .sandbox-list {
    border-right: 1px solid var(--app-modal-button-border-color);
}
.save-prompts-button {
    background: var(--app-modal-button-background-color);
    color: var(--app-top-button-text-color);
    font-size: small;
    display: inline-block;
    border: 1px solid var(--app-modal-button-border-color)!important;
    margin-top: 5px;
}
#prompt-load-view, #sandbox-load-view{
    height: 83vh;
    overflow: hidden;
    overflow-y: auto;
}
#flow-agent-editor-text, #flow-agent-optimizer-text, .sandboxComment {
    height: 70vh;
}
.prompt-card, .sandbox-card, .conversation-card{
    width: 99%;
    background: var(--app-modal-background-color)!important;
    color: var(--app-top-button-text-color);
    border: 1px solid var(--app-modal-button-border-color)!important;
}
.prompt-card-text, .sandbox-card-text, .conversation-card-text{
    font-size: small;
}
.prompt-card-footer, .sandbox-card-footer, .conversation-card-footer {
    border-top: 1px solid var(--app-card-top-bottom-border-color)!important;
    background: transparent;
}
.prompt-card-header, .sandbox-card-header, .conversation-card-header{
    border-bottom: 1px solid var(--app-card-top-bottom-border-color)!important;
    color: var(--app-top-button-text-color);
    background: transparent;
}
.card-details {
    font-size: small;
}
.data-viewer, .flow-list {
    height: 500px;
    overflow: hidden;
    overflow-y: auto;
}
.data-viewer-view li {
  list-style:none;
}

/* Symap revamp */

.builder-logo {
    margin-bottom: 15px;
    background: white;
    padding: 5px;
}
.symap-logo img {
    width: 120px;
}
.symap-highlight span {
    font-size: x-large;
    margin-top: 10px;
}
.symap-body {
    background: white;
}
.symap-view{
}
.accordion-item {
    margin: 10px !important;
    border: none !important;
}
.accordion-header {
    broder: 1px solid var(--bs-accordion-border-color) !important;
    border-radius: 4px;
}

.symap-accordion {
    margin-left: 10px;
}