.App {
  display:flex;
  background-color: #282c34;
  color:white;
  position:absolute;
  top:0;bottom:0;right:0;left:0;
}

.sidemenu {
  width:260px;
  padding:10px;
  background-color: #101827;
}
/* under 640px do this */
@media (max-width: 640px) {
  .sidemenu {
    display:none;
  }
}

.side-menu-button {
  padding:12px;
  border-radius:5px;
  text-align: left;
  transition:ease 0.25s all;
  cursor:pointer;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#cedbe9+0,aac5de+17,6199c7+50,3a84c3+51,419ad6+59,4bb8f0+71,3a8bc2+84,26558b+100;Blue+Gloss */
  background: rgb(206,219,233); /* Old browsers */
  background: -moz-linear-gradient(-45deg,  rgba(206,219,233,1) 0%, rgba(170,197,222,1) 17%, rgba(97,153,199,1) 50%, rgba(58,132,195,1) 51%, rgba(65,154,214,1) 59%, rgba(75,184,240,1) 71%, rgba(58,139,194,1) 84%, rgba(38,85,139,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg,  rgba(206,219,233,1) 0%,rgba(170,197,222,1) 17%,rgba(97,153,199,1) 50%,rgba(58,132,195,1) 51%,rgba(65,154,214,1) 59%,rgba(75,184,240,1) 71%,rgba(58,139,194,1) 84%,rgba(38,85,139,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg,  rgba(206,219,233,1) 0%,rgba(170,197,222,1) 17%,rgba(97,153,199,1) 50%,rgba(58,132,195,1) 51%,rgba(65,154,214,1) 59%,rgba(75,184,240,1) 71%,rgba(58,139,194,1) 84%,rgba(38,85,139,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedbe9', endColorstr='#26558b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  text-shadow: 1px 1px 0px black;
  font-weight: 500;
}
.side-menu-button:hover {
  background-color:rgba(255,255,255,0.1);
}
.side-menu-button span {
  padding-left:6px;
  padding-right:12px;
}

span.info {
    text-align: left;
    width: 100% !important;
    display: block;
    padding: 10px;
    line-height: 1.5;
}

.chatbox {
  flex:1;
  background-color:#ffffff;
  position:relative;
  overflow-y:scroll;
  padding-bottom:95px;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.chat-input-holder {
  padding:15px;
  position:absolute;
  bottom:0;
  left:0;right:0;
  background: rgb(57 57 57);
}
.chat-input-textarea {
  background-color: #dddddd;
  width: 90%;
  padding: 12px;
  border-radius: 5px;
  color: #101827;
  font-size: 16px;
  border: none;
  outline: none;
  box-shadow: 0px 7px 6px -6px black;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

.chat-log {
  position: absolute;
  top:0;right:0;bottom:89px;left:0;
  overflow-y:scroll;
  text-align:left;
}

.chat-message.chatgpt {
  background-color:#ffffff;
}
.chat-message-center {
  max-width:640px;
  margin-left:auto;
  margin-right:auto;
  display:flex;
  padding: 20px 10px;
}

section::-webkit-scrollbar {
  display: none;
}
.avatar {
  background:#6BA447;
  border-radius:5px;
  width: 40px;
  height: 40px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:5px;
  font-size:14px;
  color:#444654;
    box-shadow: 0px 5px 5px -3px black;
}


.avatar.chatgpt {
  background:#667DF1;
  border-radius:5px;
  min-width: 40px;
  min-height: 40px;
  padding:5px;
  color:white;
  box-shadow: 0px 5px 5px -3px black;
}
.message {
  padding: 7px 20px;
  line-height: 25px;
  font-size: 14px;
  font-family: "Poppins", "Karla", sans-serif;
  color: #353b4f;
   -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased !important;
    -moz-font-smoothing: antialiased !important;
    text-rendering: optimizelegibility !important;
}

.chat-message.false {
    background: #eef2ff;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.select-models {
  padding:5px 10px;
  background: #4d4f54;
  border-radius:5px;
  color: #5c6aa5;
  background: #ffffff;
  outline:none;
  cursor:pointer;
  max-width:100%;
  min-width:100%;
}
.select-models option {
  background: #2c374b;
  color: #ffffff;
  font-size: 12px;
}

.button-picker {
  border:none;
  padding:6px 12px ;
  border-radius:5px;
  color:white;
  background:#5c6aa5;
  margin-top:6px;
  cursor: pointer;
}
.button-picker:hover {
  background:#626473;
}

.info {
  opacity:0.66;
  font-size:0.8em;
  margin-top:6px;
}

.side-label {
  font-size:0.9em;
  margin-top:1em;
  margin-bottom:0.5em;
  padding-bottom:0em;
  display:block;
}

.form {
  display:flex;
  gap:6px;
}

.submit {
  background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
  background:#0da37f;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:5px 12px;
  font-size:14px;
  color:white;
  border-radius:5px;
  cursor: pointer;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b4ddb4+0,83c783+17,52b152+33,008a00+67,005700+83,002400+100;Green+3D+%231 */
  background: rgb(180,221,180); /* Old browsers */
  background: -moz-linear-gradient(-45deg,  rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 33%, rgba(0,138,0,1) 67%, rgba(0,87,0,1) 83%, rgba(0,36,0,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg,  rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg,  rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4ddb4', endColorstr='#002400',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  box-shadow: 0 10px 12px -8px black;
}
.submit:hover {
  background:#066d55;
}


.ai-logo-container {
    text-align: center;
    padding: 10px 0;
}