.chatbot input#input {
    width: 600px;
}

.interaction {
    position: relative;
}

.questions {
  padding: 20px;
}
.interaction.generating .prompt::before {
    content: "⏳";
    position: absolute;
    right: -30px;
    top: 6px;
    line-height: 22px;
    animation: spin 1s infinite;
    transform-origin:center;
}
.interaction.error::before {
    content: "❌";
    position: absolute;
    left: -30px;
    top: -3px;
}
.output {
    margin: 0;
    padding: 10px 0px 30px 0px;
    white-space-collapse: preserve-breaks;
}

@keyframes spin{
    0%{transform:rotateZ(0deg);}
    100%{transform:rotateZ(359deg);}
}


#chatbot .options {
    display: flex;
    /* height: 30px; */
    font-size: 12px;
    background-color: #f8f8f8;
    color: #fff;
    padding: 10px 20px;
    align-items: center;
    justify-content: space-between;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

#chatbot .options select {
    padding: 0;
    display: block;
    /* position: relative; */
    /* left: -5px; */
    margin-right: 10px;
    width: 200px;
    flex: 1;
    background: none;
    border: none;
    outline: none;
    box-shadow: none;
    color: #fff;
    max-width: 200px;
    font-size: 16px;
    cursor: pointer;

}

.chat_input {
    text-align: right;
}

.prompt, .output {
    background: #fff;
    padding: 10px 16px;
    font-size: 16px;
    line-height: 16px;
    display: inline-block;
    border-radius: 5px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}

.output {
    line-height: 24px;
    display: block;
    position:relative;
    border-top-left-radius: 0;
}
p.output[data-name]::after {
    content: attr(data-name);
    text-align: right;
    font-size: 12px;
    color: #f8f8f8;
    position: absolute;
    right: 0;
    top: -12px;
}
.prompt {
    color: #dcdcdc;
    /* margin-bottom: 0; */
    position: relative;
    line-height: 20px;
    margin-right: 40px;
    font-weight: normal;
    position: sticky;
    top: 0px;
    z-index: 10;

}

.outputtext {
  margin: 0;
  white-space: break-spaces;
}
#chatbot_output {
    position: relative;
    max-height: 600px;
    overflow-y: auto;
    min-height: 400px;
    /* margin-right: -200px; */
    /* left: -200px; */
    /* position: relative; */
    border-left: 1px solid #999;
    border-right: 1px solid #999;
    padding: 10px;
}

#chatbot_output_wrap {
    position: relative;
    max-height: 600px;
    overflow-y: auto;
    min-height: 400px;
}
.output:empty {
    display: none;
}

#chatbot details {
    font-size: 12px;
    color: #999;
    margin: 0;
    position: relative;
    white-space: pre-line;
}
#chatbot .answer details {
    padding-top: 4px;
    margin-top: 10px;
    border-top: 1px solid #ddd;
}

#chatbot details ul {
    margin: 0;
}

#modellist details summary {
    cursor: pointer;
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid #aaa;
    text-align: center;
    line-height: 15px;
    border-radius: 50%;
    color: #aaa;
    font-size: 12px;
    /*! font-weight: bold; */
    position: absolute;
    top: -24px;
    right: 0;
}
#modellist details summary::-webkit-details-marker,
#modellist details summary::marker {
 display: none; 
 content: "";
}

#history {
    display: none;
}

#chatbot .chat_input {
    border-radius: 10px;
    border-top-right-radius: 0px;
    border-top-left-radius: 0;
    box-shadow: none;
    border: 1px solid #999;
    display: flex;
    overflow: hidden;
}

#chatbot .submit {
    margin: 0;
    position: relative;
}

#chatbot input[type="submit"] {
    margin: 0;
    border-radius: 0;
    padding: 5px 20px;
    font-size: 32px;
    font-weight: normal;
    font-family: monospace;
    height: 100%;
    width: 60px;
}

#chatbot #input {
    border-radius: 0;
}

#chatbot #input:focus {
    border: none;
}
.answer {
    margin-left: 40px;
    margin-bottom: 20px;
    margin-top: 6px;
    position: relative;
}
#history + span {
    margin-left: 5px;
    display: block;
    width: 30px;
    height: 15px;
    padding: 2px;
    background: #fff;
    border-radius: 10px;
    cursor: pointer;
    position: relative;
}

label[for=history] {
    display: flex;
    align-items: center;
    margin: 0;
}

#history + span::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 50%;
    bottom: 0;
    border: 2px solid;
    background: #bbb;
    border-radius: 50%;
    box-sizing: border-box;
    transition: 0.4s;
}

#history:checked + span:after {
    right: 0;
    left: 50%;
    background: #dcdcdc;
}

#chatbot label {
    font-weight: normal;
}

/* #model input[type=radio] {
    display: none;
} */

i.chatavatar {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 29px;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    font-size: 16px;
    background-size: contain;
    background-position: center;
    background-clip: content-box;
    font-style: normal;
}

#modellist {
    position: absolute;
    color: #444;
    background-color: #fff;
    padding: 10px;
    list-style: none;
    border: 1px solid #ddd;
    margin: 0;
    display: none;
    z-index: 999;
    top: 32px;
    min-width: 300px;
    box-shadow: 1px 1px 2px;
}

#modellist.open {
    display: block;
    max-height: 400px;
    overflow-y: scroll;
}

#modellist label {
    cursor: pointer;
    display: flex;
    padding: 4px 6px;
    margin-bottom: 5px;
    flex: 1;
}

#modellist label:hover {
    background: #eee;
}

#modellist label {
    margin: 0;
    cursor: pointer;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*! border: 2px solid transparent; */
    border-radius: 10px;
    transition: 0.4s;
    height: 100%;
    /*! text-align: center; */
    min-width: 40px;
}
#modellist label span {
    margin: 0;
    /*! margin-left: 10px; */
    flex: 1;
    transition: 0.4s;
}
#modellist label::after {
    /*! content: "\000020"; */
    display: inline-block;
    font-family: monospace;
    font-size: 24px;
    line-height: 15px;
    height: 14px;
    width: 14px;
    flex: 0 14px;
    margin-left: 10px;
    border: 1px solid;
    border-radius: 4px;
    color: #999;
}
/* #modellist input:checked  + label::after {
    content: "✓";
    color: #444;
} */

#modellist li.disabled {
    opacity: 0.5;
    pointer-events: none;
}
#chatmodels {
    display: flex;
    margin: 0;
    /* cursor: pointer; */
}

#chatmodels > span {
    margin-right: 10px;
}

.chatname {
    position: relative;
    /* text-align: right; */
    margin-bottom: 0;
    margin-left: -35px;
    z-index: 2;
}

.chatname span {
    color: #999;
    font-size: 12px;
    position: relative;
    left: 6px;
    bottom: -4px;
}

.chatname i {
    position: relative;
    top: 6px;
}
#chatbot .disclaimer * {
    font-size: 12px;
    line-height: 20px;
}
#chatbot .disclaimer a {
    text-decoration: underline;
}

.generating .copy{
    display: none;
}
.copy {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 24px;
    height: 24px;
    cursor: pointer;
    padding: 4px;
    background-size: contain;
    background-clip: border-box;
    opacity: 0.2;
    z-index: 2;
}
.copy.all {
    bottom: 0;
    right: auto;
    left: 0;
}

.copy::after {
    content: "";
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAwnpUWHRSYXcgcHJvZmlsZSB0eXBlIGV4aWYAAHjabVDBDcMwCPwzRUewDXHwOKRJpW7Q8XsOJIqbnmQ4OOuMoe3zftGjo2QhmWatrdYESJNWDESTw/aYk+zRi0PLY59OoaDFyOyl1rh/9PNp4MnApouRPkNYRqFJ+OuPUfHEfaLO1zBqYcTFhRwG5t9Ktel8/cKypRHqh3oQHce+1TO2t054h0vZOHNCZBYfgPsRYtuJQcY6EBlc0DN0c5hhIf/2dIC+6mlZDWJad98AAAGEaUNDUElDQyBwcm9maWxlAAB4nH2RPUjDQBzFX1NF0YqDHUQcMtROdlERwaVWoQgVQq3QqoPJpV/QpCFJcXEUXAsOfixWHVycdXVwFQTBDxBnBydFFynxf0mhRYwHx/14d+9x9w4QGhWmWV1xQNNtM51MiNncqtjzCgH9CCGKWZlZxpwkpeA7vu4R4OtdjGf5n/tzDKh5iwEBkTjODNMm3iCe3rQNzvvEYVaSVeJz4nGTLkj8yHXF4zfORZcFnhk2M+l54jCxWOxgpYNZydSIp4gjqqZTvpD1WOW8xVmr1FjrnvyFoby+ssx1mqNIYhFLkCBCQQ1lVGAjRqtOioU07Sd8/COuXyKXQq4yGDkWUIUG2fWD/8Hvbq3C5ISXFEoA3S+O8zEG9OwCzbrjfB87TvMECD4DV3rbX20AM5+k19ta5AgY3AYurtuasgdc7gDDT4Zsyq4UpCkUCsD7GX1TDhi6BfrWvN5a+zh9ADLUVeoGODgEokXKXvd5d29nb/+eafX3A84LcstghrwWAAANemlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNC40LjAtRXhpdjIiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iCiAgICB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIgogICAgeG1sbnM6R0lNUD0iaHR0cDovL3d3dy5naW1wLm9yZy94bXAvIgogICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgIHhtcE1NOkRvY3VtZW50SUQ9ImdpbXA6ZG9jaWQ6Z2ltcDplYmIwYWFmOS05N2IyLTRlMjQtYmYzZC0wZGM3YzhkODEwNWEiCiAgIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjZmMWI5Y2YtMWEyYS00ODQwLTk0MjMtOTMxZTM3ZWY4ZjRjIgogICB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6MGI0ZjlhNTctYzM2OS00ZGZjLWIxOWQtZjkxZTg4MzhjMjJmIgogICBHSU1QOkFQST0iMi4wIgogICBHSU1QOlBsYXRmb3JtPSJNYWMgT1MiCiAgIEdJTVA6VGltZVN0YW1wPSIxNzA3NjU1MjIxOTgwNTMxIgogICBHSU1QOlZlcnNpb249IjIuMTAuMzQiCiAgIGRjOkZvcm1hdD0iaW1hZ2UvcG5nIgogICB0aWZmOk9yaWVudGF0aW9uPSIxIgogICB4bXA6Q3JlYXRvclRvb2w9IkdJTVAgMi4xMCIKICAgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyNDowMjoxMVQxMzo0MDoyMSswMTowMCIKICAgeG1wOk1vZGlmeURhdGU9IjIwMjQ6MDI6MTFUMTM6NDA6MjErMDE6MDAiPgogICA8eG1wTU06SGlzdG9yeT4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgc3RFdnQ6YWN0aW9uPSJzYXZlZCIKICAgICAgc3RFdnQ6Y2hhbmdlZD0iLyIKICAgICAgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDozY2ZmN2Y0Zi1kZGIwLTQ0YzktYjhlMS0zYzc0OWY1ZWM3NzMiCiAgICAgIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkdpbXAgMi4xMCAoTWFjIE9TKSIKICAgICAgc3RFdnQ6d2hlbj0iMjAyNC0wMi0xMVQxMzo0MDoyMSswMTowMCIvPgogICAgPC9yZGY6U2VxPgogICA8L3htcE1NOkhpc3Rvcnk+CiAgPC9yZGY6RGVzY3JpcHRpb24+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgCjw/eHBhY2tldCBlbmQ9InciPz4Pp7vtAAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH6AILDCgVophUCwAAAQtJREFUSMft1b1KQ0EQBeAvol5QUbAVhDRGwd43EEGbFBa+hljZpbD0NVKJCD6BrYiNhYiFIiIIFhHRyr9mAjFcN/dCbpcDC8OwO+fMsJwhjWv8lDjn2OotUBtAcIy6YpjHYsRNnKgA29HJbaqDGTQKFnzEc1/uCqsYx1f/gwN8lJx7G1M9NS4iPyFYumhhH284QmeA+kmsYwdz2ExdruE11NdLzHwaN6F4Ka+DsUguYza+5V0JgnecRbyWd6FLkA3hB2UpgsowIhgRjAj+mt2wcBo2/lkVQStvRJ2CK/Q/J1bA3j2FzW6UKN7AC76xkGIXi6Md8X0BRRlWIj7EXhFFTVyWWJcP2E0V/AWMDEwz7SHEHwAAAABJRU5ErkJggg==');
    background-size: contain;
    background-clip: border-box;
    display: block;
    width: 100%;
    height: 100%;
    /*! position: absolute; */
}
.copy.all::after {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAw3pUWHRSYXcgcHJvZmlsZSB0eXBlIGV4aWYAAHjabVBbDsQgCPznFHsEeVTxOHbrJnuDPf6i0KZtOgnjAGZEoP++H3gNEArIUjTXnJNBqlRqJjQ52mRMMtmTd/TwWoejQVZiO9lTzXF/r+Nh4EcztZyMNIxwvTaqhL/ejOIhHhORiS2MahgxeQPDoPm3Uq5azl9Ye7pCPWAQl+l9mNxzKba9bbEiE3VGTsbM4gPwCAFuUzQLW4ddylPzZIpJbCFPe9oBf210WXLZP8KGAAABhGlDQ1BJQ0MgcHJvZmlsZQAAeJx9kT1Iw0AcxV9TpSKVDlYRcchQneyiIoJLrUIRKoRaoVUHk+snNGlIUlwcBdeCgx+LVQcXZ10dXAVB8APE2cFJ0UVK/F9SaBHjwXE/3t173L0DhEaFqWZXDFA1y0gl4mImuyoGXiFgACEMYlZmpj4nSUl4jq97+Ph6F+VZ3uf+HH25vMkAn0gcY7phEW8QT29aOud94jAryTnic+Jxgy5I/Mh1xeU3zkWHBZ4ZNtKpeeIwsVjsYKWDWclQiaeIIzlVo3wh43KO8xZntVJjrXvyFwbz2soy12mOIIFFLEGCCAU1lFGBhSitGikmUrQf9/APO36JXAq5ymDkWEAVKmTHD/4Hv7s1C5MTblIwDnS/2PbHKBDYBZp12/4+tu3mCeB/Bq60tr/aAGY+Sa+3tcgRENoGLq7bmrIHXO4AQ0+6bMiO5KcpFArA+xl9UxbovwV619zeWvs4fQDS1FXyBjg4BMaKlL3u8e6ezt7+PdPq7wfGvHLIb4pLswAAECZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+Cjx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDQuNC4wLUV4aXYyIj4KIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgIHhtbG5zOkdJTVA9Imh0dHA6Ly93d3cuZ2ltcC5vcmcveG1wLyIKICAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIKICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIgogICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIgogICB4bXBNTTpEb2N1bWVudElEPSJnaW1wOmRvY2lkOmdpbXA6ZWJiMGFhZjktOTdiMi00ZTI0LWJmM2QtMGRjN2M4ZDgxMDVhIgogICB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjhlMjBhNTZjLTA1OTYtNDRlNC04NDhhLTM0YmNhM2RlZTI1NiIKICAgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjBiNGY5YTU3LWMzNjktNGRmYy1iMTlkLWY5MWU4ODM4YzIyZiIKICAgR0lNUDpBUEk9IjIuMCIKICAgR0lNUDpQbGF0Zm9ybT0iTWFjIE9TIgogICBHSU1QOlRpbWVTdGFtcD0iMTcwODUyOTAwMjc0Mzk4NCIKICAgR0lNUDpWZXJzaW9uPSIyLjEwLjM0IgogICBkYzpGb3JtYXQ9ImltYWdlL3BuZyIKICAgdGlmZjpPcmllbnRhdGlvbj0iMSIKICAgeG1wOkNyZWF0b3JUb29sPSJHSU1QIDIuMTAiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjQ6MDI6MjFUMTY6MjM6MjIrMDE6MDAiCiAgIHhtcDpNb2RpZnlEYXRlPSIyMDI0OjAyOjIxVDE2OjIzOjIyKzAxOjAwIj4KICAgPHhtcE1NOkhpc3Rvcnk+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpCiAgICAgIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiCiAgICAgIHN0RXZ0OmNoYW5nZWQ9Ii8iCiAgICAgIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6M2NmZjdmNGYtZGRiMC00NGM5LWI4ZTEtM2M3NDlmNWVjNzczIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJHaW1wIDIuMTAgKE1hYyBPUykiCiAgICAgIHN0RXZ0OndoZW49IjIwMjQtMDItMTFUMTM6NDA6MjErMDE6MDAiLz4KICAgICA8cmRmOmxpCiAgICAgIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiCiAgICAgIHN0RXZ0OmNoYW5nZWQ9Ii8iCiAgICAgIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6YTU5MDk2OWQtN2VkOC00Yzk2LTkzZjYtMzUzNDI2ZjIyMTdiIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJHaW1wIDIuMTAgKE1hYyBPUykiCiAgICAgIHN0RXZ0OndoZW49IjIwMjQtMDItMjFUMTM6NTY6MDQrMDE6MDAiLz4KICAgICA8cmRmOmxpCiAgICAgIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiCiAgICAgIHN0RXZ0OmNoYW5nZWQ9Ii8iCiAgICAgIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MTZkYzdjYmUtMzc3Yi00NDVkLWE2NTctYTAwMzU5NTg0NDMxIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJHaW1wIDIuMTAgKE1hYyBPUykiCiAgICAgIHN0RXZ0OndoZW49IjIwMjQtMDItMjFUMTY6MjE6NDkrMDE6MDAiLz4KICAgICA8cmRmOmxpCiAgICAgIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiCiAgICAgIHN0RXZ0OmNoYW5nZWQ9Ii8iCiAgICAgIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6OGUyMTg4YmUtNWEwYi00N2VhLWI1YTUtYTAwNDg3MWZmZjIwIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJHaW1wIDIuMTAgKE1hYyBPUykiCiAgICAgIHN0RXZ0OndoZW49IjIwMjQtMDItMjFUMTY6MjM6MjIrMDE6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgIAo8P3hwYWNrZXQgZW5kPSJ3Ij8+KZcDwwAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB+gCFQ8XFtHPsXgAAAEXSURBVEjH7daxSsNQGMXxX9OqoKDgAwidxAfwFUTQpYODr6GbWwZHX8NJROjg7Cri4iDioIg4OSiiKBR1uUIsheYLNIL0QMgl5Oafc06SG2K6xFdgO8V68QKNIPAQ7ZLnzmMhjTs4UoM2ktNrNeoiQZuQjbozfKR9Bq0SwPdAZ8vo/mVnTZylYxOj7kyC/AL2d7iLt2Bv+5ge0NlAFTvMsYMXHOBpiJNJrGATc1iLRvGc3LUDc2ZwVYhQIcKhkc6mp/ImAHzFScRVpmaNgWNgWK0aGF3co1cXMP/XHfbq6PCnM33f2JEB80ikjQqARtU7e0gRrAbmLOIRn1Xew+20eh/jtsQCPIWlNN6r6rKD88DvxR22IoBvRDZmQFjpgdQAAAAASUVORK5CYII=');
}

.copy:hover {
    opacity: 1;
}

.copy.message::before {
    content:"Réponse copiée";
    position:absolute;
    font-size:12px;
    line-height:12px;
    background-color:#ccc;
    padding:4px;
    right:0;
    white-space:nowrap;
    bottom:-22px;
}
.copy.all.message::before {
    content:"Conversation copiée";
    position:absolute;
    font-size:12px;
    line-height:12px;
    background-color:#ccc;
    padding:4px;
    left:24px;
    white-space:nowrap;
    top:0;
    right: auto;
    bottom: auto;
}
#chatbot_form > .copy {
    bottom: 64PX;
    /* top: 55px; */
    right: 15px;
}

form#chatbot_form {
    position: relative;
}
#selected-models {
    height: 30px;
}
i#modelmenu {
    font-style: normal;
    font-size: 20px;
    line-height: 32px;
    text-align: center;
    padding-left: 2px;
    background-color: #f8f8f8;
    cursor: pointer;
}

div#model {
    display: flex;
    position: relative;
}

i#modelmenu:hover {
    background-color: #dcdcdc;
}
span#modelcount {
    display: block;
    text-align: right;
    padding: 0 4px;
    margin-right: 16px;
}


.modelfamilywrap {
  margin-bottom: 10px;
}

.modelfamilywrap.disable {
  pointer-events: none;
  opacity: 0.6;
}
#modellist li {
  flex: 1;
}
/* #modellist input:checked + label span {
  text-decoration: underline;
} */
/* #modellist input:checked + label {
    background: #eee;
} */
#modellist label.selected {
    background: #eee;
}

#modelhelp {
  line-height: 1.5;
  text-align: end;
}

fieldset {
  border: none;
  padding: 0;
}
.modelfamily {
  flex: 100%;
}

#modellist label.none {
  font-size: 14px;
  opacity: 0.7;
}
#modellist i.chatavatar {
  margin-right: 10px;
}

.none i.chatavatar {
  background: #aaa;
}
.sources a:hover {
  text-decoration: underline;
}
#chatbot details summary {
  cursor: pointer;
}

#propositions {
  position: absolute;
  top: 100%;
  z-index: 10;
  text-align: left;
  background: #fff;
  box-shadow: 1px 1px 3px #999;
  /*! padding: 4px 0; */
  left: 5px;
  right: 61px;
  display: none;
}
#propositions label {
  margin: 0;
  font-style: italic;
  color: #aaa;
  font-size: 12px;
  padding: 0px 10px;
}
#propositions span {
  display: block;
  font-size: 14px;
  cursor: pointer;
  color: #444;
  line-height: 20px;
  padding: 4px 10px;
}
#propositions span:hover {
  /*! text-decoration: underline; */
  background: #eee;
}
#propositions.open {
  display: block;
}

#chatbot .intro {
    font-size: 14px;
    line-height: 22px;
    padding: 20px;
    margin: 0 20px;
    text-align: center;
    color: #999;
    font-style: italic;
    white-space: pre-line;
}

input[autocomplete="off"]::-webkit-contacts-auto-fill-button,
input[autocomplete="off"]::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    display: none !important;
    pointer-events: none;
    height: 0;
    width: 0;
    margin: 0;
}
.modelfamilywrap .wrap {
    display: flex;
    flex-wrap: wrap;
}

.modelfamilywrap.unavailable .modelfamily::after {
  content: attr(data-unavailable);
  margin-left: 10px;
  font-style: italic;
  color: #dcdcdc;
  font-size: 10px;
}
.modelfamilywrap.unavailable {
  opacity: 0.7;
  pointer-events: none;
}
#chatbot_interface{
    position: relative;
}
#chatbot #loading,
#chatbot #outofservice{
    position: absolute;
    inset: 0;
    background-color: rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
}
#chatbot #loading p,
#chatbot #outofservice p{
    white-space: pre-line;
    text-align: center;
}
#chatbot.loading #loading,
#chatbot.outofservice #outofservice{
    display: flex;
}
#chatbot #loading i,
#chatbot #outofservice i{
    display: block;
    font-size: 50px;
    width: 50px;
    height: 50px;
    line-height: 46px;
    /* margin-bottom: 30px; */
    text-align: center;
    /* background: red; */
    margin: auto;
    color: #dcdcdc;
}

#chatbot.loading .intro,
#chatbot.outofservice .intro{
    display: none;
}

.spinner{
    transform-origin: center;
    animation: spin 1s ease-in-out infinite;
}
.emoji{
    transform: rotateZ(90deg);
    transform-origin: center;
    font-style: normal;
    letter-spacing: 2px;
}
/* =================================================== */


@media screen and (max-width: 960px) {

    label[for=history] {
        text-align: right;
        flex-direction: column;
        align-items: end;
        justify-content: start;
    }
    .prompt {
        max-width: 80%;
    }
    
    .answer {
        margin-left: 10px;
    }
    #chatbot .options{
        align-items:start;
    }
    #chatmodels {
        flex-direction:column;
        line-height: 1.6em;
    }
    .chatname {
        position: static;
        margin-left: -12px;
        margin-bottom: 5px;
    }
    .chatname i{
        position: static;
        margin:0;
    }
    .chatname span {
        position: static;
        margin-left: 5px;
    }
    #modellist details summary{
        top: -18px;
    }
}