/* html, body {background-color: #164C45 !important;} */
html, body {background-image: url(images/bg.png);}

header {background-color: #16232E; height: 72px; display: flex; color: #FFF; justify-content: space-between; padding: 6px 18px;}
header a {    color: #FFF;    font-size: 1.1em;    text-transform: none;}
header img {height: 64px;}

#main-wrapper {  width: 960px;  margin: 0 auto;  background-color: #FFF;  padding: 12px; margin-top: 24px; position: relative; min-height: 80vh; border-radius: 8px; box-shadow: 0px 0px 24px #000000;}

table {margin: 0 auto; width: 100%; margin-top: 18px}
td, th {padding: 6px; margin-bottom: 4px; border: 1px solid #CCC; font-size: 0.8em;}
th {background-color: #DDD;}
h2 {  font-size: 1.4em;  color: #666;  font-weight: 700;  margin-top: 24px;  margin-bottom: 12px; text-align: center;}
h3 {  font-size: 1.2em;  color: #999;  font-weight: 700;  margin-top: 0px;  margin-bottom: 12px; text-align: center;}
h4 {text-align: center; margin-top: 12px; font-size: 1.1em; font-weight: 700;}
html {background-color: #EEE;}
p.links {margin-top: 24px}
a {  font-weight: 700;  font-size: 0.8em;  text-decoration: none;  text-transform: lowercase;  }
textarea {width: 100%; height: 200px;}
a.autofill-items {text-transform: none; color: #666; padding: 4px;}
a.autofill-items.left-align {text-align: left; display: block;}
.center-align {text-align: center;}

.toggle { width: auto; margin: 0 auto;  display: flex;  justify-content: center; margin-bottom: 24px;}
.toggle div {  width: 128px; text-align: center;  padding: 8px 16px;  background-color: #CCC; cursor: pointer; font-weight: 700; text-transform: uppercase; font-size: 0.8em;}
.toggle .active { background-color: #0597F2; color: #FFFFFF;}



.banner {min-height: 400px; background-image: url(images/banner.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; margin-left: -12px;  margin-right: -12px;  padding: 24px;  margin-top: -12px;}
.banner h2 {font-size: 2.75em; margin-bottom: 24px; color: #FFF}
.banner h5 {font-size: 1.5em; text-align: center; color: #FFF}
.banner form {  width: 100%; text-align: center;  margin-top: 36px; }
#searchInput {  width: 60%;  height: 36px;  font-size: 1.1em;  text-align: center;  border-radius: 18px; border: none;}
input[type="submit"], button[type="submit"] {  padding: 8px 16px;  background-color: #9A3FA6;  border-radius: 8px;  border: none;  color: #FFF;  font-weight: 700; margin-top: 6px;}


#searchResults {  border-radius: 6px;  opacity: 0.9;  width: 70%;  margin: 0 auto;    margin-top: 0px;  margin-top: -12px;  padding: 4px;}
#searchResults div {padding: 4px; border-bottom: 1px solid #CCC;   background-color: #FFF;}

#nav-options {  display: flex;  justify-content: center; margin-top: 24px; margin-bottom: 24px;}
#nav-options li {  background-color: #FFC;  padding: 8px 16px; list-style: none;  font-weight: bold; font-size: 0.8em;  cursor: pointer;}
#nav-options li.active {  background-color: #288;  color: #FFF;}
#nav-options a {color: #000000; text-transform: none;}

#form-browse > div { height: 200px;  background-color: #FFF;  padding: 8px;  width: 30%;  overflow-x: scroll; margin-left: 3%; float: left;}
.browse-item {  font-size: 0.8em;  margin-bottom: 4px;  padding-bottom: 2px;  border-bottom: 1px solid #DDD;  font-weight: 700; cursor: pointer;}
.browse-item a {  color: #000;  text-transform: none;}
.browse-item i {font-size: 1.24em;  padding-left: 12px;  display: inline-block;}
#form-browse {clear: both; display: table; width: 100%; }


#columns {display: flex}
#sidebar-left { width: 25%;  background-color: #EEE;  padding: 6px;}
#main {width: 75%; padding: 12px; padding-top: 6px;}


div.usecase a {    color: #333;    text-transform: none;  }
div.usecase {    border-bottom: 1px solid #CCC;    padding: 6px;  }
#usecases .content-home {    background-color: #CCC;    padding: 6px;}
#usecases .content-home a {color: #000; text-transform: none;}
.usecases-heading {font-weight: 400;    margin-top: 24px;    font-size: 0.8em;    margin-left: 6px;}

.generative-config {text-align: left;}
.generative-config input[type=submit] {margin-top: 12px;}
.form-field { margin-top: 8px; margin-bottom: 4px;}
.form-field label { font-weight: 700; color: #333;  }
.form-field input {    border-radius: 8px;    border: none;    background-color: #EEE; width: 100%; }
.field-help {    font-size: 0.8em;    text-align: left;   color: #666; font-weight: 400;  }

h2.generative-title {margin-top: 6px; margin-bottom: 3px;}
h4.generative-title {margin-bottom: 0px;}
div.generative-title {    text-align: center;    font-weight: 700;    font-size: 0.8em;    margin-top: 0px;    color: #999;  }

textarea.editor {    min-height: 400px;    padding: 12px;    border-radius: 12px;    border: 1px solid #CCC;    margin-top: 12px;  }
div.editor {    border: 1px solid #CCC;    padding: 12px;    border-radius: 8px;}
.status-message {    font-weight: 700;    font-size: 1.2em;    margin-top: 6px;    float: right;    color: #66C;  }

.response-data {    display: flex;    justify-content: center;    padding: 6px;    background-color: #EAEAEA;}
.data-key {    margin-left: 24px;    margin-right: 6px;    color: #666;    font-size: 0.9em;}
.data-val {    font-size: 0.9em;    font-weight: 700;    margin-right: 18px;}
.response-data input {border-radius: 8px;    border: none;    margin-left: 8px;    margin-right: 20px;}


.links a, .links-fixed a {    padding: 4px 12px;    background-color: #666;    color: #FFF;    border-radius: 8px;    display: inline-block;    margin-right: 12px; text-transform: none; flex: 1 1 33.33%; min-width: 150px;}
.links {margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px;}
.links-fixed {position: absolute; top: 12px; right: 12px;}

#signed_off {margin-left: 100px; display: inline-block; margin-right: 6px;}
#delete-response {background-color: #962B09; float: right;}


i.bi-check-circle-fill {color: #164C45;}
td i.bi-pencil-fill {    font-size: 1.4em;}
i.bi-file-arrow-up-fill, i.bi-clipboard-check-fill, i.bi-house-fill, i.bi-trash-fill, i.bi-floppy-fill, i.bi-git {font-size: 1.4em;}

#raw-prompt, #prompt {display: none;}

img#generation-progress {display: none; height: 64px;}
.dark-button {background-color: #FFF; color: #999; }

div#help, div#guidelines {    position: fixed;    top: 25vh;    height: 50vh;    background-color: #D9BBA0;    right: 6px;    width: calc((100vw - 960px - 36px) / 2);    padding: 8px;    border-radius: 8px; max-width: 256px;}
#help h2, #guidelines h2 {    font-size: 0.9em;    text-transform: uppercase;    font-weight: 700;    color: #333;    margin-bottom: 18px;}
#help h5, #guidelines h5 {    font-size: 0.9em;    font-weight: 700;    margin-bottom: 0px;    margin-top: 12px;}
#help p, #guidelines p, #guidelines li {    font-size: 0.8em;    margin: 0px;    color: #000;    line-height: 125%;}
#help p.example, #guidelines p.example {    font-size: 0.7em;    color: #333;    margin-top: 3px;    padding: 0px 8px;}
#help .pin, #guidelines .pin {    position: absolute;    top: 4px;    right: 4px;    height: 24px;    width: 24px;}
div#guidelines {left: 6px; height: auto;}
#guidelines li {margin-top: 4px;}
#guidelines .pin {left: 4px;}
.metrics {  background-color: #EFEFEF;  padding: 4px;  border-radius: 16px;  text-align: center;  margin-top: 6px;  font-weight: 700;  font-size: 0.8em;}


.login-container {    width: 25%;    float: right;    margin: 2%;    background-color: #000000;    padding: 12px;    border-radius: 8px;}
.login-container img, .login-container input {max-width: 100%; margin-top: 8px;    text-align: center;    font-size: 0.8em;    font-weight: 700;    padding: 6px; border-radius: 8px;    border: none; margin-top: 12px;    font-size: 0.75em;    font-weight: 700;    text-align: center;    width: 100%;}
.main-banner img {    max-width: 100%;    border-radius: 8px;}
.main-banner {    float: left;    width: 66%;    margin: 2%;}
.login-container .status {    color: #FAA;    font-size: 0.6em;    margin-top: 12px;}


div#admin-section {    display: flex;    justify-content: space-around;    margin-top: 18px;}
.admin-block {    background-color: #EEEEEE;    padding: 8px;    width: 100%;    margin: 0px 12px;}
.admin-block h4 {    margin-top: 0px;    text-align: left;    font-size: 0.9em;    border-bottom: 1px solid #CCC;    padding-bottom: 6px;}
.admin-item:hover {    color: #000; font-weight: 700;}
.admin-item {    font-size: 0.75em;    text-decoration: none;    color: #333333;    margin-top: 3px; font-weight: 400;    text-transform: none;    cursor: pointer;}


form {    width: 50%;    margin: 0 auto;    background-color: #DDD;    padding: 12px;    text-align: center;    border-radius: 12px;    overflow: auto;}
form input, form select {    border-radius: 8px;    border: none;    float: right;}
form label {    float: left;}
.login-container form {width: 100%; background-color: #000;}
form.simple {background-color: inherit; width: 100%}
form.simple input {float: none;}
form.simple label {float: none;}
form.bg {background-color: #DDD;}


.message {    text-align: center;    margin-top: 12px;    font-size: 0.8em;    font-weight: 700;    margin-bottom: 12px;}
.message-success {color: #6E8C03};
.message-failure {color: #BF4417;}
.announcement {  padding: 4px 12px;  background-color: #FF9;  margin-top: 12px;  border-radius: 8px;  text-align: center;  width: 100%;  font-weight: 700;  font-size: 0.8em;}

h3.ui-title {font-size: 1em; font-weight: 700; margin-top: 18px; text-align: center; color: #666; clear: both;}

#content-info {  text-align: center;  font-size: 0.9em;  color: #666; font-style: italic;}
#content-info span {font-weight: 700;}

i.positive, i.negative, i.neutral {margin-top: -6px; display: inline-block;}
i.positive {color: #7ABA78;}
i.negative {color: #EE4E4E;}
i.neutral {color: #FEB941;}

#test-results {  position: absolute;  right: 36px;  top: 12px;}
#test-results i {font-size: 2em;}
#test-results i.bi-patch-check-fill {color: #00AA00;}
#test-results i.bi-exclamation-diamond-fill {color: #AA0000;}

.preview-button a {	text-transform: none;}
.preview-button {margin-bottom: 12px;}