1  .new-chat-interface {
  2      position: absolute;
  3      border: 1px solid #fff;
  4      top: 50%;
  5      left: 50%;
  6      transform: translate(-50%, -50%);
  7      color: #fff;
  8      background-color: #000;
  9      padding: 20px;
 10      width: 80vw;
 11      height: 60vh;
 12      overflow: auto;
 13  }
 14    
 15  .new-chat-header {
 16      display: flex;
 17      justify-content: space-between;
 18      align-items: center;
 19      align-content: center;
 20      margin-bottom: 20px;
 21  }
 22  
 23  .close-button {
 24      background-color: transparent;
 25      border: none;
 26      color: #fff;
 27      font-size: 24px;
 28      cursor: pointer;
 29  }
 30  
 31  .new-chat-form {
 32      display: flex;
 33      flex-wrap: wrap;
 34      justify-content: space-around;
 35      height: 80%;
 36  }
 37    
 38  .new-chat-form-group {
 39      display: flexbox;
 40      width: 40%;
 41      margin: 20px 0 20px 0;
 42  }
 43    
 44  .new-chat-interface label {
 45      display: inline;
 46      font-weight: bold;
 47      /* margin-bottom: 5px; */
 48  }
 49  
 50  .new-chat-interface #chat-name-form-group {
 51      display: inline-flex;
 52      flex-direction: column;
 53      align-items: left;
 54  }
 55  
 56  .new-chat-interface #chat-name-label {
 57      padding: 0;
 58      margin-bottom: 0;
 59  }
 60  
 61  .new-chat-interface #chat-name-input {
 62      padding: 0;
 63  
 64      width: 60%;
 65      border: none;
 66      border-bottom: 1px solid #fff;
 67  }
 68  
 69  .new-chat-interface #model-select-form-group {
 70      display: inline-flex;
 71  }
 72  
 73  .new-chat-interface #system-prompt-form-group {
 74      display: flexbox;
 75  }
 76  
 77  .new-chat-interface #system-prompt-input {
 78      width: 100%;
 79  }
 80  
 81  .new-chat-interface input[type="text"],
 82  .new-chat-interface textarea,
 83  .new-chat-interface select {
 84      /* display: inline-flex; */
 85      width: 100%;
 86      padding: 8px;
 87      border: 1px solid #fff;
 88      background-color: transparent;
 89      color: #fff;
 90  }
 91  
 92  .new-chat-interface input[type="text"]:focus {
 93      outline: none;
 94  }
 95  
 96  .new-chat-interface input[type="range"] {
 97      width: 100%;
 98      height: 20px;
 99      appearance: none;
100      -webkit-appearance: none;
101      background-color: transparent;
102      outline: none;
103  }
104  
105  .new-chat-interface input[type="range"]::-webkit-slider-thumb {
106      -webkit-appearance: none;
107      appearance: none;
108      width: 15px;
109      height: 15px;
110      background: #fff;
111      border-radius: 50%;
112      cursor: pointer;
113  }
114  
115  .new-chat-interface input[type="range"]::-webkit-slider-runnable-track {
116      height: 5px;
117      background: linear-gradient(to left, #a30000, #fff);
118      border-radius: 2.5px;
119  }
120  
121  .temperature-value {
122      margin-left: 10px;
123  }
124    
125  .start-new-chat-button {
126      background-color: transparent;
127      text-decoration: underline;
128      color: #fff;
129      border: none;
130      padding: 10px 20px;
131      border-radius: 3px;
132      cursor: pointer;
133      font-weight: bold;
134      align-self: flex-end;
135  }