.navbar {
    --bs-navbar-padding-x: 1rem;
}

#app {
    margin-top: 1rem;
    margin-bottom: 6rem;
}

#greetings {
    margin-top: 1em;
}

.comment {
    border-left: 2px solid #555;
}

.conversation {
    margin-top: 1rem;
}

.question {
    font-size: 1rem;
    padding: 1rem;
}

.questionText {
    font-size: 1rem;
    padding: 1rem;
    background-color: var(--bs-tertiary-bg);
}

.questionText i {
    padding-right: 0.5rem;
}

.answerText {
    font-size: 1rem;
    padding: 1rem;
    background-color: var(--bs-secondary-bg);
}

.reaction {
    padding-left: 1rem;
}

.textinput {
    -white-space: pre;
}

.textinput:focus {
    color: #fff;
    outline: none !important;
    border-color: #719ECE;
    box-shadow: 0 0 10px #719ECE;
    background-color: #343541;
}

#the-count {
    text-align: center;
    padding: 0.1rem 0 0 0;
    font-size: 0.6rem;
  }

.tokenCounter {
    float: right;
    text-align: right;
    padding: 0.1rem 0 0 0;
    font-size: 0.6rem;
}

.arrow {
    list-style: none;
    /*outside url('./css/arrow-right.svg');*/
    text-indent: 0; 
    padding-left: 2px;
}

/* li::marker {
    color: cyan;
    font-size: 3em;
} */

.top {
    -color: red;
}

.buttonDiv {
    display: block;
}

.questionButtonDiv,
.answerButtonDiv {
    float: right;
}

.questionText {
    -color: #007e11;
}

.instruction {
    color: green;
}

.footer {
    background-color: rgba(0, 0, 0, 0.8);
}



/* SLIDERS */

#tempSlider .slider-selection,
#tempSlider .slider-handle {
    background: #ff0000;
}

#tempSlider .slider-track-high {
    background: rgb(53, 110, 255);
}

#topPSlider .slider-selection,
#topPSlider .slider-handle {
    background: #007e11;
}

#topPSlider .slider-track-high {
    background: rgb(53, 110, 255);
}

#maxTokensSlider .slider-selection,
#maxTokensSlider .slider-handle {
    background: #868686;
}

#maxTokensSlider .slider-track-high {
    background: rgb(13, 13, 13);
}


/* AUTOCOMPLETE */


.autocomplete {
    position: relative;  /*the container must be positioned relative:*/
    display: inline-block;
}

.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
}

.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #6f6f6f;
    border-bottom: 1px solid #d4d4d4;
}

/*when hovering an item:*/
.autocomplete-items div:hover {
    background-color: #e9e9e9;
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
    background-color: DodgerBlue !important;
    color: #ffffff;
}



/* SCROLL BUTTONS */

.scrollBtn {
    display: none;    /* Hidden by default */
    position: fixed;    /* Fixed/sticky position */
    right: 20px;    /* Place the button 30px from the right */
    z-index: 99;    /* Make sure it does not overlap */
    border: none;    /* Remove borders */
    outline: none;    /* Remove outline */
    background-color: transparent;    /* Set a background color */
    color: rgb(139, 139, 139);    /* Text color */
    cursor: pointer;    /* Add a mouse pointer on hover */
    -padding: 5px;    /* Some padding */
    border-radius: 9999px;    /* Rounded corners */
    font-size: 1.8rem;    /* Increase font size */
}

#upBtn {
    bottom: 350px;  /* Place the button at the bottom of the page */
}

#downBtn {
    bottom: 300px;   /* Place the button at the bottom of the page */
}

.scrollBtn:hover {
    background-color: #555;    /* Add a dark-grey background on hover */
}


/* MODAL FORM VALIDATION */

/* .invalid class prevents CSS from automatically applying */
.invalid input:required:invalid {
    background: #BE4C54;
  }
  
  /* Mark valid inputs during .invalid state */
  .invalid input:required:valid {
    background: #17D654;
  }


  /* PROMPTS */

  #tblPrompts {
    cursor: pointer;
  }


      /* PHOTO GALLERY */

      
      .photo-gallery .photos {
        padding-bottom:20px;
      }
      
      .photo-gallery .item {
        padding-bottom:30px;
      }