body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-width: 100vw;
  padding: 4px;
  box-sizing: border-box;
  overflow: hidden;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: small;
}
  .container {
    max-width: 100vw;
    border: 1px solid green;
    overflow: hidden;
    border-radius: 4px;
    font-size: small;
    }

  #item-details{
    display: flex;
    flex-direction: column;
    overflow-y: auto ;
    height: 100vh;
    }

  #container-chat {
    display: flex;
    font-size: small;
    justify-content: space-between;
    flex-direction: column; 
    margin-top: 8px;
    height: calc(100% - 72px); 
  }

  #chat-messages{
    flex-direction: column;
    flex-grow: 1;
    overflow-y: auto; 
    
    width: 100%;
  }

  #user-message-input-form {
    display: flex;
    box-sizing: border-box;  
    margin: 2px 0 6px 0;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
  }
  #chat-input {
    padding: 6px;
    margin: 0;
    border-color: green;

  }
  .user-message-input {
    width: 100%;
    padding: 6px;
    border: 1px solid green;
    border-radius: 4px;
    box-shadow: 2px 2px 1px 0px lightgray;
  }

  .user-message-input:focus {
    outline: none;
  }

  .message-item .fa-user {
    color: lightgreen;
    margin: 0 0 0 12px;

  }

  #user-message-input-form button {
    border: none;
    align-content: center;
    color: green;
    background-color: transparent;

  }

  .user-message {
    margin-bottom: 10px;
    width: 60%;
    display: flex;
    justify-content: flex-end;
    margin-left: auto;
    padding: 4px 4px 4px 4px;
  }

  .user-message-text {
    display: flex;
    background-color: rgb(193, 253, 193);
    border-radius: 4px;
    padding: 6px 6px 8px 6px;
    color: black;
    max-height: 120px; /* 24px * 3 lines */
    overflow: hidden;
    text-overflow: ellipsis;
    font-family:'Segoe UI', Tahoma, Verdana, Arial, Helvetica, sans-serif;
    box-shadow: 1px 1px 1px 0px lightgray;
    width: 100%;
    overflow-y: auto; 
  }


  .ai-message {
    margin-bottom: 10px;
    width: 100%;
    display: flex;
    justify-content: flex-start;

  }

  .ai-message-text {
    background-color: whitesmoke;
    text-align: left;
    color: rgb(0, 36, 36);
    padding: 6px 6px 6px 6px;
    font-family:'Segoe UI', Tahoma, Verdana, Arial, Helvetica, sans-serif;
    box-shadow: 1px 1px 1px 0px lightgray;
    border-radius: 4px;
  
  }

  .ai-message-text code {
    font-size: inherit;
    font-family: inherit;
    background-color: rgb(240, 240, 240);
    border-radius: 4px;
    padding: 1px 4px 1px 4px;
    color: inherit;
  }

  .ai-message-text .highlight {
    background-color: white;
    padding: 6px;
    margin: 3px;
    border-radius: 6px;
    font-size: x-small;
  }

  .ai-message-text span {
    font-size: xx-small;
  }

  .ai-message-text .c1 {
    font-size:x-small;
  }

  .ai-message img {
    display: flex;
    width: 20px;
    height: 20px;
    margin: 6px 6px 0 0;
  }

  .flashed-message {
    max-width: 100vw;
    border: 1px solid green;
    overflow: hidden;
    border-radius: 4px;
    font-size: x-small;
    height: 10vh;
    display: none;
  }

  .container .row {
      display: flex;
      flex-wrap: nowrap; /* Prevent wrapping onto new lines */
    }

  .transition-height {
    transition: height 0.03s ease;
  }
  
  .container-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    }  

  .container-item .row.col-4 {
    border: 1px solid green;
    border-radius: 4px;
    padding: 10px 10px 10px 10px;
    }  


  .container-item .form-input {
    width: 100%;
    margin: 0 0 8px 0;
    }  

  .container-item .form-check {
    margin: 0 0 10px 0;
    }  

  .container-item .form-label {
    width: 100%;
    padding: 4px 0 0 0;
    }  
  .text-danger {
    margin-bottom: 8px;
  }


  #side-list {
    display: flex;
    height: 100%;
    padding: 6px 6px 0 6px;
    flex-direction: column;
    height: 100vh;
    overflow: auto;
    border-right: 1px green solid;
    }

  .side-list-item {
      display: flex;
      justify-content: space-between;  /* Optional: use if you want the items spread across the line */
      align-items: center;  /* Optional: use if you want the items vertically centered */
      border: 2px lightgray solid;
      border-radius: 4px;
      padding: 4px 4px 4px 0px;
      margin: 4px 0 4px 0;
      cursor: pointer;
    }

  .side-list-item .item-info-span {
    padding: 2px 2px 2px 4px;
    white-space: nowrap;       /* Prevents the text from wrapping */
    overflow: hidden;          /* Hides the overflowed text */
    text-overflow: ellipsis;   /* Shows '...' to indicate there is more text */
    width: min-content;
    }  

  .side-list-item .side-list-item-btns {
    display: inline;
    white-space: nowrap;       /* Prevents the text from wrapping */
   }

  .side-list-item.selected {
    border-color: blue; 
    }

  .btn-item-edit, .btn-item-delete {
    background-color: transparent;
    border: transparent;
    }


  .btn-message{
    background-color: transparent;
    border: transparent;
    padding: 0 0 0 0;
  }

  .btn-item-score-ai-response-up:hover .fa-regular {
    color: red;
  }

  .btn-item-score-ai-response-down:hover .fa-regular {
    color: green;
  }

  .fas, .fa-solid{
    color: darkgray;
    transition-duration: 0.4s; /* Animation for hover */
    }

  .fa-regular {
    color: darkgray;
    margin: 0 0 0 0;
    display: inline-block;
    color: lightgray;
    transition-duration: 0.4s; /* Animation for hover */

    }

 
  .btn-item-edit:hover .fas, 
  .btn-item-delete:hover .fas, 
  .btn-item-delete-ai-response:hover .fa-regular,
  .btn-item-copy-ai-response:hover .fa-regular {
      color: blue;
    }

  .message-btn-grp {
    display: flex;
    padding: 6px 0 0 0;
    margin: 0 0 0 0;
    font-size: xx-small;
    color: lightgray;
    justify-content: right;
    }
  .btn-input-area{
    display: flex;
    padding: 6px 0 0 0;
    margin: 0 0 0 0;
    font-size: xx-small;
    color: lightgray;
    justify-content: left;

  }

  .ai-response-statics {
    display: flex;
    padding: 6px 0 0 0;
    margin: 0 0 0 0;
    font-size: xx-small;
    color: lightgray;
    align-items: flex-start;

  }

  .ai-message-btns {
    display: flex;
    flex-direction: column;
    width: 80%;

  }
  .btn-message:hover .fa-regular, .btn-message:hover .fa-solid {
    color: blue;
  }


  .side-list-item.selected .btn-item-edit,
  .side-list-item.selected .btn-item-delete {
    display: inline-block; /* or "inline", depending on your layout */
    }

  .item-details-heading {
    padding: 5px 0 5px 0; /* vertical and horizontal padding */
    margin: 10px 0 20px 0;
    font-weight: bold;
    border-bottom: solid darkgray 1px;
  }
  
  .item-details-row {
    display: inline-flex;
    align-items: center; /* Aligns items vertically in the middle */
    padding: 10px 0 10px 0;
    }
  .list-value, .list-label  {
    padding-top: 4px;
  }

  .item-details-label {
    text-align: left; /* Aligns text to the left */
    margin: 7px 0 7px 0;
    }
    
  .item-details-value {
    align-items: center;
    }

    /* Add this rule to your CSS */
  .item-details-value input {
    text-align: left;
    width: 100%;
    }

  /* Add this rule for checkbox inputs */
  .item-details-value input[type=checkbox] {
    width: auto; /* Restore default width */
  }

  #btn-item-cancel-update,  #btn-item-save-update, #btn-item-save-new, #btn-item-cancel-new {
      border: 1px solid; /* remove default button border */
      padding: 5px 20px 5px 20px; /* vertical and horizontal padding */
      margin: 10px 10px 0 0;
      border-radius: 4px; /* rounded corners */  
      width: 100px;
    }
  
    
  #btn-item-add:hover {
      background-color: #0046d5; /* change background color on hover */
      color: white;
    }

  .conv-details {
    display: inline-flexbox;
    border-bottom: 1px solid;
    border-color: green;
    height: fit-content;
    margin: 6px 0 6px 10px;
    padding: 6px 0 6px 0;
    width: 100%;
  }

  .navbar-brand {
    background-color: red;
    padding: 0 6px 0 6px;
    color: rgb(238, 238, 238);
    border-radius: 3px; 
    height: 24px;
    font-size: 16px;
    font-weight: bold;

  }

  .badge {
    display: flex;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
  }

  .navbar-text {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .dropdown-item{
    font-size: small;
  }

  .container-item-details {
    display: flex;
    flex-direction: column;
    height: 100vh;
    }  

  .container-item-details .item-details-heading {
    padding: 5px 0 5px 0; /* vertical and horizontal padding */
    margin: 10px 0 20px 0;
    font-weight: bold;
    border-bottom: solid darkgray 1px;
    font-size: large;
  }

  .container-item-details .form-input {
    width: 100%;
    margin: 0 0 8px 0;
    }  

  .container-item-details .form-check {
    margin: 0 0 10px 0;
    }  

  .container-item-details .form-label {
    width: 100%;
    padding: 4px 0 0 0;
    }  
  .text-danger {
    margin-bottom: 8px;
  }

.flash-message-box.info {
    border: 1px solid darkblue;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 10px;
    background-color: lightblue;
    color: darkblue;
}

.flash-message-box.error {
    border: 1px solid darkred;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 10px;
    background-color: pink;
    color: darkred;
}

.empty-page{
  font: large italic;
  color: darkgray;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.btn-wrapper {
  border: solid 1px lightgray;
  border-radius: 4px;
  padding: 0px 3px 0 3px;
  margin: 0 2px 0 2px;

}

.btn-wrapper:hover .fa-tags{
  color: gray;
  pointer-events: none;

}

.select2-container .select2-selection--single {
  height: 22px;
  margin: 0 0 12px 0;
  border-radius: 2px;
  border: 1px solid;
  border-color: rgb(118, 118, 118), 
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 20px;
}
.select2-dropdown { 
  font-size: xx-small;
}

.select2-container .select2-selection--single .select2-selection__rendered {
  display: block;
  padding-left: 4px;
  padding-right: 20px;

}

.select2-container--default .select2-selection--multiple {
  border-radius: 2px;
  border: 1px solid;
  border-color: rgb(118, 118, 118);

}

.margin-multiple {
  margin: 4px 0 6px 0;
}


#select2-select-tags-container{
  height: fit-content;
  padding: 0;
  margin:0;
}

.no-conversation {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: x-large;
  color: darkgray;

}

.btn {
  font-size: small;
}

.form-user-input-btn{
  display: flex;
  justify-content: space-between;
  margin-right: 40px;
}
.loader {
  border: 9px solid #f3f3f3; /* Light grey */
  border-radius: 50%;
  width: 18px;
  height: 18px;
  animation: spin 2s linear infinite;
  margin: 6px 0 0 0;
  background-color: #f3f3f3;
  display: block;
  transition: background-color 1s;
}


@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.success {
  background-color: lightgreen; /* Green */
  border-color: lightgreen; /* Green */
  transition: background-color 1s, border-color 1s;
}

.failure {
  background-color: #FF0000; /* Red */
  border-color: #FF0000;
}

.running {
  border-top: 9px solid lightgreen; /* Green */
}

.form-row {
  padding: 0 0 0 0;
  margin: 0 0 12px 0;
  border-bottom: 1px solid lightgray;
}
.total {
  font-size: x-small;
  font-weight: bold;
  margin: 0 0 0 10px;
  padding: 0 0 0 0;
}
.pagination {
  margin: 16px 0 10px 0;
  font-size: x-small;

}

.pagination-span {
  margin: 0 10px 0 0;
  padding: 0 0 0 0;
  font-size: x-small;
}

.btn-previous {
  margin: 0 10px 0 0;

}

.container-chart {
  height: 50vh;
}

.container-index {
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
}

.negative {
  color: red;
}