body {
  margin: 20px;
  background-color: #0a1e0f;
}

.item {
  display: inline-block;
  padding: 5px;
  width: auto;
  height: 15px;
  background-color: #09859e;
  color: #eeeeee;
  border: 1px solid #2e6da4;
  border-radius: 9999px;
  font-size: 12px;
  cursor: pointer;
  margin:3px;
  overflow: hidden;
  opacity: 0.6;
  text-align: center;
}

.item:hover {
  color: #e32910;
  transform: scale(1.1);
}

.item.selectedItem {
  background-color: #280cca;
  color: #c5da0b;
}

.table, .api {
  display: inline-block;
  padding: 5px;
  width: 80px;
  height: 15px;
  background-color: #7dc37f;
  color: #2115cb;
  font-size: 12px;
  border: 1px solid #a4bf3b;
  border-radius: 9999px;
  cursor: pointer;
  margin:3px;
  overflow: hidden;
  opacity: 0.6;
  text-align: center;
}

.table.deleteItem, .api.deleteItem {
  text-decoration: line-through;
  text-decoration-color: white;
  text-decoration-style: wavy;
  background-color: #373f1c;
  color: #eff0e8;
  opacity: 0.3;
}

.table:hover {
  color: #eeeeee;
  transform: scale(1.1);
}

.activeItem {
  background-color: lightcoral;
}

.relatedItem {
  animation: blinkItem 1s infinite alternate;
}

@keyframes blinkItem{
  0% { background-color: #7dc37f}
  100% { background-color: rgb(228, 218, 130)}
}

.activeandrelatedItem {
  animation: blinkmixItem 1s infinite alternate;
}

@keyframes blinkmixItem{
  0% { background-color: lightcoral}
  100% { background-color: rgb(228, 218, 130)}
}

/* columns sample data pop up */
.tooltip {
  display: none;
  position: absolute;
  width: auto;
  padding: 5px;
  background: #dceb0c;
  color: #000000;
  border: 1px solid #1a1a1a;
  font-size: 90%;
  z-index: 10;
  opacity: 0.6;
  border-radius: 9999px;
}

.commonpanel {
  position: absolute;
  margin: 5px;
  padding: 10px;
  background-color: lightgray;
  text-align: center;
  background: rgba(109, 98, 226, 0.15);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
  border-radius: 10px;
}

.commonpanel.itempanel{
    text-align: left;
}

.commonpanelborderon {
  border: 1px solid rgba(12, 236, 12, 0.831);
}

.commonpanelborderoff {
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.genelic_panel {
  animation: blinkBorder 0.5s infinite alternate;
}

@keyframes blinkBorder{
  0% { border-color: rgba(12, 236, 12, 0.831)}
  100% { border-color: rgba(255, 255, 255, 0.18)}
}

.topview {
  opacity: 0.6;
  top: 10%;
  left: 30%;
}

.box_text {
  color: rgb(193, 206, 206);
  font-style: italic;
  text-shadow: 0 0 10px rgb(193, 206, 194), 0 0 15px rgb(193, 206, 206);
}

.initial_alert_text {
  color: #f1ef46;
  font-style: italic;
  font-size: medium;
  text-shadow: 0 0 10px rgb(193, 206, 194), 0 0 15px #f1ef46;
}

input.user-input {
  outline: none;
  border: none;
  color: #a8ce49;
  background: rgb(53, 41, 94, 0.1);
  width: 300px;
}

textarea.user-input{
  outline: none;
  border: none;
  color: #a8ce49;
  background: rgb(53, 41, 94, 0.1);
  width: 500px;
}

.yourText {
  font-size: 6px;
  color: rgb(199, 199, 227);
}

.functionpanel-parts > input, button, select, option, label {
  outline: none;
  border: none;
  color: #a8ce49;
  text-shadow: 0 0 10px rgb(14, 225, 31), 0 0 15px rgb(229, 232, 198);
  background: rgb(53, 41, 94, 0.1);
}

.functionpanel-parts > ol {
  padding-left:50%;
  text-align: left;
  list-style: decimal;
}

.initializepanel {
  text-align: left;
}

.sqllist > p {
  color: #a8ce49;
  text-shadow: 0 0 10px rgb(14, 225, 31), 0 0 15px rgb(229, 232, 198);
}

#my_form > label[name="filelabel"]{
  font-size: 10px;
  color: #a8ce49;
  text-shadow: 0 0 10px rgba(211, 222, 212, 0.964), 0 0 15px rgb(229, 232, 198);
  background: rgb(53, 41, 94, 0.1);
  cursor: pointer;
}

.panelbutton {
  cursor: not-allowed;
}

.apisql {
  width:70%/*500px*/;
  font-size: 16px;
  color: #7dc37f;
  top:50%;
  left:10%;
  position: absolute;
  transform: translate(+10%,-50%);
  word-wrap: break-word;
}

.apisql.apiin {
  top:30%;
}

.apisql.apiout {
  top:50%;
}

.newapino {
  width:500px;
  font-size: 16px;
  color: #7dc37f;
  top:50%;
  left:10%;
  position: absolute;
  transform: translate(+10%,-50%);
}

.something_msg_def {
  width:600px;
  height:100px;
  top:65%;
  left:20%;
}

.jetelina_teach_you {
  width:600px;
  height:200px;
  top:3%;
  left:50%;
}

.jetelina_teach_you_ol {
  padding-left:5%;
  text-align: left;
  list-style: decimal;
}

.something_msg_def.config_history {
  height:200px;
  top:50%;
} 

.jetelina_message {
    color: #e7d967/*#e32910*/;  
    font-style: italic;
    width: 600px;/* match with parent .somthing_msg_def */
    display: inline-block;
    word-wrap: break-word;
    text-align: left;
}

.jetelina_message.config_history_text {
  color: #a8ce49;
}

.jetelina_suggestion {
  color: #7dc37f;
  font-style: italic;
}

.apitestresult {
  color: #f1ef46;
  font-style: italic;
  font-size: small;
  text-align: left;
}

.jetelina_subquery_note {
  color: #72e799;  
  font-style: italic;
}

.msg_scroll {
  margin: 0 auto;
  overflow-y: scroll;
  background-color: rgb(53, 41, 94, 0.1)/* #f8e9f2*/;
  border: solid 1px rgb(0,255,255,0.75)/*#DE94BF*/;
  border-radius: 5px;
  scrollbar-color: rgba(49, 177, 117, 0.1)  rgba(41, 94, 59, 0.1)/* #FAF8D8 #DE94BF*/;
  scrollbar-width: thin;
}

.right_left_panel_scroll {
  margin: 0 auto;
  overflow-y: auto;
  scrollbar-color: rgba(49, 177, 117, 0.1)  rgba(87, 211, 190, 0.1)/* #FAF8D8 #DE94BF*/;
  scrollbar-width: thin;
}

.dblist {
  width:200px;
  height:20px;
  top:6%;
  left:20%;
}

.dbfocus {
/*  background-color: #7dc37f; */
  animation: blinkDb 3s infinite alternate;
}

@keyframes blinkDb{
  0% { background-color: rgba(12, 236, 12, 0.831)}
  100% { background-color: rgba(255, 255, 255, 0.18)}
}

.attentionapiinout {
  /*  background-color: #7dc37f; */
    animation: blinkapiinout 3s infinite alternate;
  }
  
  @keyframes blinkapiinout{
    0% { color: rgba(12, 236, 12, 0.831)}
    100% { color:#7dc37f}
  }
  
  .configparams_key {
    color: #7dc37f;
    text-align: left;
  }

  .configparams_val {
    color: #f1ef46;
    text-align: left;
  }

  .chatImg {
    position:absolute;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: .4s ease-in;
    transition: .4s ease-in;
    width: 30px;
    height: 31px;
  }

  .guidance {
    font-size: larger;
    font-style: italic;
    color: aquamarine;
  }
