* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Roboto', sans-serif;
  background: #f7f7f7;
  font-size: 1.1em;
  color: #555;
}

h3 {
  color: #333;
  margin: 20px 10px;
}

li {
  list-style: none;
}

a {
  color: #000;
  font-weight: bold;
  cursor: pointer;
}

input,
button,
select,
textarea {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
  font-family: inherit;
  font-size: small;
  color: inherit;
}

input,
textarea {
  background: #fff;
}

button {
  background: #eee;
  cursor: pointer;
}

button:disabled {
  opacity: 0.6;
  cursor: default;
}

button:hover {
  background: #f7f7f7;
}

button.selected {
  background: #ccc;
}

aside {
  display: flex;
  position: fixed;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  background-color: #fff;
  border-right: 1px solid #ccc;
  padding: 50px 10px 10px;
  width: 200px;
  top: 0;
  left: 0;
  bottom: 0;
}

aside * {
  display: flex;
}

aside .logo img {
  width: 70px;
  height: 70px;
}

aside .menu {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 30px 0;
}

aside .menu-title {
  color: #aaa;
  margin: 10px 0;
}

aside .menu-group {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
}

aside .menu a {
  margin: 5px;
}

aside .user {
  margin-top: 20px;
  color: #777;
}

.main {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  position: fixed;
  padding: 10px;
  top: 0;
  left: 220px;
  right: 0;
  bottom: 0;
}

.content {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  margin: 10px;
  height: 100vh;
}

.horizontal {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

.vertical {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
}

.action {
  display: inline;
  cursor: pointer;
  color: #000;
  font-weight: bold;
}

.action:hover {
  text-decoration: underline;
}

.scrollable {
  height: 100%;
  overflow: scroll;
}

.readonly {
  pointer-events: none;
}

.divided {
  display: flex;
  flex-direction: column;
  margin: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  background: #fff;
}

.divided h3 {
  margin: 10px;
}

.divided form {
  display: flex;
  flex-direction: column;
}

.divided input,
.divided label,
.divided button {
  margin: 5px;
}

.statuses {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  margin: 10px;
}

.controls {
  display: flex;
  flex-flow: row nowrap;
}

.controls .title {
  margin: 12px;
  color: #aaa;
}

.controls .control {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

.controls button {
  margin: 5px;
  box-sizing: border-box;
}

.control input,
.control select,
.control button {
  margin: 5px;
  box-sizing: border-box;
}

.control input[type="number"] {
  margin: 5px;
  box-sizing: border-box;
  padding: 6px;
}

.control.model select {
  padding-left: 50px;
  text-align: right;
}

.control.output select {
  padding-left: 55px;
  text-align: right;
}

.control.tools select {
  padding-left: 50px;
  text-align: right;
}

.control.temperature input {
  width: 100px;
  text-align: right;
}

.control.batch input {
  width: 130px;
  text-align: right;
}

.control.org select {
  padding-left: 40px;
  text-align: right;
}

.control.system select {
  padding-left: 110px;
  text-align: right;
}

.control.system a {
  text-decoration: none;
  font-size: x-small;
  margin-bottom: 10px;
  color: #ccc;
}

.control.search input {
  padding-left: 60px;
}

.control.rename input {
  padding-left: 55px;
}

.control.generic {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  width: 100%;
}

.control.generic input {
  width: 100%;
  padding-left: 60px;
}

.control.generic input:disabled {
  background-color: #f5f5f5;
  color: #999;
  border-color: #ddd;
}

.control.generic.checkbox input {
  width: auto;
}

.control.generic.checkbox input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.control.generic.checkbox label {
  margin-left: 10px;
}

.control.generic select {
  padding-left: 60px;
}

.control label {
  position: absolute;
  pointer-events: none;
  margin-bottom: 1px;
  color: #ccc;
  left: 15px;
  font-size: small;
}

.json {
  padding: 10px;
  white-space: pre-wrap;
  font-size: smaller;
}

.danger {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  gap: 10px;
  margin: 5px;
}

.danger .action {
  color: #b74747 !important;
  border: 1px solid #b74747 !important;
  border-radius: 5px;
  text-decoration: underline;
  padding: 5px;
}

.danger .confirm {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 5px;
}

.step.caution {
  border: 1px solid #b74747 !important;
}

button.caution {
  border: 1px solid #b74747 !important;
  color: #b74747 !important;
}

label.caution {
  color: #b74747;
  font-size: larger;
}

label.notice {
  font-size: larger;
}

.init,
.loading,
.error {
  margin: 10px;
  padding: 10px;
  display: flex;
  flex: 0 0 auto;
  border: 1px solid #ccc;
  background: #fff;
}

.locked {
  opacity: 0.5;
  cursor: not-allowed;
}

.section.tasks {
  flex: 1;
  flex-flow: column nowrap;
  justify-content: flex-start;
  margin: 10px;
}

.section.tasks .controls {
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.section.tasks .controls .action {
  font-size: smaller;
}

.section.tasks .filters {
  display: flex;
  flex-flow: row nowrap;
  justify-content: start;
}

.section.tasks .filters select,
.section.tasks .filters button,
.section.tasks .filters input {
  margin: 0 5px;
  font-size: small;
}

.section.tasks .item,
.section.tasks .files,
.section.tasks .json {
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
  margin: 10px 0;
}

.section.tasks .files {
  display: flex;
  flex-flow: column nowrap;
  padding: 10px;
  font-size: small;
}

.section.tasks .files .selection {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: end;
}

.section.tasks .files .controls {
  padding: 0;
  border: none;
}

.section.tasks .files .control select {
  padding-left: 10px;
}

.section.tasks .groups {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  height: calc(100vh - 115px);
  margin-top: 10px;
  gap: 10px;
}

.section.tasks .group {
  flex: 1 1 0;
  height: calc(100vh - 155px);
  max-width: 20vw;
}

.section.tasks .group .counts {
  font-size: smaller;
  padding: 5px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.section.tasks .group .counts span {
  margin-right: 5px;
}

.section.tasks .group .counts .action {
  float: right;
  margin-right: 10px;
}

.section.tasks .item * {
  font-size: small;
  color: #aaa;
  text-align: center;
}

.section.tasks .item .id {
  display: block;
}

.section.tasks .item .header {
  border-bottom: 1px solid #ccc;
  background: #f7f7f7;
  margin-bottom: 5px;
  padding: 5px;
}

.section.tasks .app_log .header {
  background: #b4ffa6;
}

.section.tasks .screenshot_metadata .header {
  background: #acfdff;
}

.section.tasks .user_actions .header {
  background: #ffe3a1;
}

.section.tasks .key_frame .header {
  background: #e2ffa9;
}

.section.tasks .sub_processes .header {
  background: #ffbba1;
}

.section.tasks .activities .header {
  background: #ffbef3;
}

.section.tasks .customers .header {
  background: #dbbeff;
}

.section.tasks .experiments .header {
  background: #b9c4ff;
}

.section.tasks .video .header {
  background: #feffa5;
}

.section.tasks .item .header * {
  margin: 0 5px;
  color: #000;
}

.section.tasks .item .meta * {
  margin: 0 5px;
}

.section.tasks .item .footer {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  padding: 5px 10px;
}

.section.tasks .item .footer .actions {
  display: flex;
  flex-flow: row nowrap;
  gap: 5px;
}

.section.tasks .item .footer * {
  color: #000;
}

.section.tasks .item.done .message,
.section.tasks .item.pending .message,
.section.tasks .item.running .message {
  display: none;
}

.section.tasks .item pre.message {
  white-space: pre-wrap;
  word-wrap: break-word;
}

.section.tasks .item .message {
  color: #b74747;
  overflow: hidden;
  margin: 5px 15px 10px;
}

.section.editor {
  display: flex;
  flex-flow: column nowrap;
  height: 95vh;
  margin: 10px;
}

.section.editor .header.controls,
.section.editor .footer.controls {
  margin-left: 35px;
}

.section.editor form {
  display: flex;
  flex-flow: column nowrap;
  gap: 10px;
}

.section.editor form button {
  width: 150px;
}

.section.editor .row {
  display: flex;
  flex-flow: row nowrap;
  width: calc(100vw - 300px);
  gap: 5px;
}

.section.editor .add {
  width: calc(100vw - 300px);
}

.section.editor .add,
.section.editor .action {
  font-size: small;
}

.section.editor .body {
  display: flex;
  flex-flow: column nowrap;
  flex: 1;
}

.section.editor .body.hide {
  display: none;
}

.section.editor .config {
  display: flex;
  flex-flow: column nowrap;
  flex: 1;
  font-size: 0.8em;
  margin-right: 5px;
}

.section.editor .config textarea {
  display: flex;
  height: calc(95vh - 270px);
  padding: 20px;
  margin: 0 5px;
}

.section.editor .records {
  display: flex;
  flex-flow: column nowrap;
  gap: 10px;
}

.section.editor .records .batch {
  width: 120px;
  font-size: small;
}

.section.editor .filters textarea {
  display: flex;
  height: 200px;
  width: 395px;
  padding: 15px;
}

.section.editor .filters button {
  display: none;
}

.section.editor .references {
  display: flex;
  flex-flow: column nowrap;
  font-size: 0.8em;
  background: #fff;
  border: 1px solid #ccc;
  width: 395px;
  padding: 15px;
  height: calc(95vh - 500px);
  border-radius: 5px;
}

.section.editor .references a {
  font-size: 1em;
  margin: 5px;
}

.section.editor .references .totals {
  font-weight: bold;
  font-size: 0.8em;
  text-align: end;
}

.section.editor .references .reference {
  font-size: 0.8em;
  border-bottom: 1px solid #eee;
  padding: 5px;
}

.section.editor .history {
  display: flex;
  flex-flow: column nowrap;
  margin: 10px 50px;
  font-size: smaller;
}

.section.editor .history .turn {
  display: flex;
  flex-flow: column nowrap;
  margin: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.section.editor .history .turn.tool_use,
.section.editor .history .turn.assistant {
  border: 1px solid #aaa;
}


.section.editor .history .role {
  position: -webkit-sticky;
  position: sticky;
  display: flex;
  top: 0;
  z-index: 1;
  color: #fff;
  padding: 5px;
  border-radius: 4px 4px 0 0
}

.section.editor .history .tool_result,
.section.editor .history .user {
  margin-right: 40px;
}

.section.editor .history .system .role,
.section.editor .history .tool_result .role,
.section.editor .history .user .role {
  background: #ccc;
}

.section.editor .history .tool_use,
.section.editor .history .assistant {
  background: #fff;
  margin-left: 40px;
}

.section.editor .history .tool_use .role,
.section.editor .history .assistant .role {
  background: #aaa;
}

.section.editor .history .context .reference {
  margin: 5px;
}

.section.editor .history .context .reference.json,
.section.editor .history .context .reference.text {
  padding: 10px;
  margin: 5px;
  flex-flow: row nowrap;
  white-space: pre-wrap;
  font-size: smaller;
}

.section.chats {
  width: 300px;
  height: calc(100vh - 60px);
  font-size: small;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
}

.section.chats .controls {
  justify-content: space-between;
  margin: 0 10px 20px 0;
  align-items: center;
}

.section.chats .controls a {
  margin: 5px;
}

.section.chats .items {
  height: calc(100vh - 125px);
}

.section.chats .item {
  display: flex;
  flex-flow: row nowrap;
  border: 1px solid #ccc;
  margin: 5px;
  padding: 10px;
  border-radius: 5px;
  gap: 10px;
}

.section.chats .item.selected {
  background: #fff;
}

.section.chats .item .name {
  display: flex;
  flex: 1;
}

.section.chat {
  display: flex;
  flex-flow: column nowrap;
  height: calc(100vh - 40px);
  width: calc(100vw - 650px);
  margin-left: 50px;
}

.section.chat .details {
  display: flex;
  flex-flow: row nowrap;
  height: 60px;
  gap: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.section.chat .details form {
  display: flex;
  flex-flow: row nowrap;
  margin: 10px;
  gap: 10px;
  align-items: center;
}


.section.chat .details .orgs {
  flex: 1;
  display: flex;
  flex-flow: row nowrap;
  margin: 10px;
  gap: 10px;
  align-items: center;
}

.section.chat .details .orgs .items {
  display: flex;
  flex: 1;
  flex-flow: row nowrap;
  justify-content: end;
  gap: 5px;
}

.section.chat .details .orgs .item {
  display: flex;
  flex-flow: row nowrap;
  border: 1px solid #ccc;
  align-items: center;
  border-radius: 5px;
  padding: 2px 5px;
  margin: 4px;
  gap: 5px;
  font-size: small;
  color: #aaa;
}

.section.chat .details .action {
  display: flex;
  font-size: small;
}

.section.chat .area button {
  display: none;
}

.section.chat .input {
  display: flex;
  flex-flow: column nowrap;
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 5px;
}

.section.chat .input .tokens,
.section.chat .input .import {
  font-size: small;
  align-self: center;
  margin: 0 10px;
}

.section.chat .input .tokens {
  color: #ccc;
  margin-left: auto;
}

.section.chat .text {
  display: flex;
  padding: 10px;
  margin: 5px;
  font-family: inherit;
  color: inherit;
}

.section.chat .status {
  flex: 1;
  display: flex;
  font-size: small;
  align-items: center;
  margin: 5px;
  gap: 10px;
}

.section.chat .locked * {
  cursor: not-allowed;
  pointer-events: none;
}

.section.chat .locked .status a {
  cursor: pointer;
  pointer-events: auto;
}

.section.chat .status.failed {
  color: #9a0000;
  font-size: x-small;
  margin: 5px;
}

.section.chat .messages {
  display: flex;
  flex-flow: column nowrap;
  margin: 10px;
}

.section.chat .messages .message {
  display: flex;
  flex-flow: column nowrap;
  margin: 10px;
}

.section.chat .messages .header {
  background: #f7f7f7;
  position: -webkit-sticky;
  position: sticky;
  z-index: 1;
  top: 0;
}

.section.chat .messages .header .role {
  display: flex;
  justify-content: space-between;
  border-radius: 5px 5px 0 0;
  font-size: smaller;
  background: #ccc;
  padding: 5px;
}

.section.chat .messages .header * {
  color: #fff;
}

.section.chat .messages .system,
.section.chat .messages .tool_result,
.section.chat .messages .user {
  margin-left: 40px;
}

.section.chat .messages .tool_use,
.section.chat .messages .assistant {
  background: #fff;
  margin-right: 40px;
}

.section.chat .messages .tool_use .header .role,
.section.chat .messages .assistant .header .role {
  background: #777;
}

.section.chat .messages .body {
  border: 1px solid #ccc;
  border-radius: 0 0 5px 5px;
  overflow: hidden;
}

.section.chat .messages .tool_use .body,
.section.chat .messages .assistant .body {
  border: 1px solid #777;
}

.section.chat .messages .context .reference {
  margin: 5px;
}

.section.chat .messages .context .reference.uri,
.section.chat .messages .context .reference.json,
.section.chat .messages .context .reference.text {
  padding: 10px;
  margin: 5px;
  flex-flow: row nowrap;
  white-space: pre-wrap;
  font-size: smaller;
}

.section.chat .messages .context .reference.uri,
.section.chat .messages .context .reference.json {
  font-size: small;
}

.section.chat .messages .footer {
  display: flex;
  flex-flow: row nowrap;
  margin: 10px;
  font-size: small;
  color: #ccc;
  align-items: center;
  justify-content: space-between;
}

.section.chat .messages .quality {
  display: flex;
}

.section.chat .messages .quality .action {
  color: #ccc;
  text-decoration: none;
}

.section.threads {
  width: 300px;
  height: calc(100vh - 60px);
  font-size: small;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
}

.section.threads .controls {
  justify-content: space-between;
  margin: 0 10px 20px 0;
  align-items: center;
}

.section.threads .controls a {
  margin: 5px;
}

.section.threads .items {
  height: calc(100vh - 125px);
}

.section.threads .item {
  display: flex;
  flex-flow: row nowrap;
  border: 1px solid #ccc;
  margin: 5px;
  padding: 10px;
  border-radius: 5px;
  gap: 10px;
}

.section.threads .item.selected {
  background: #fff;
}

.section.threads .item .name {
  display: flex;
  flex: 1;
}

.section.thread {
  display: flex;
  flex-flow: column nowrap;
  height: calc(100vh - 50px);
  width: calc(100vw - 650px);
  margin-left: 50px;
}

.section.thread .header {
  display: flex;
  flex-flow: row nowrap;
  height: 60px;
  gap: 10px;
}

.section.thread .header form {
  display: flex;
  flex-flow: row nowrap;
  margin: 10px;
  gap: 10px;
}

.section.thread .header .orgs {
  flex: 1;
  display: flex;
  flex-flow: row nowrap;
  margin: 10px;
  gap: 10px;
  align-items: center;
}

.section.thread .header .orgs .items {
  display: flex;
  flex: 1;
  flex-flow: row nowrap;
  justify-content: end;
  gap: 5px;
}

.section.thread .header .orgs .item {
  display: flex;
  flex-flow: row nowrap;
  border: 1px solid #ccc;
  align-items: center;
  border-radius: 5px;
  padding: 2px 5px;
  margin: 4px;
  gap: 5px;
  font-size: small;
  color: #aaa;
}

.section.thread .header .action {
  display: flex;
  font-size: small;
}

.section.thread .messages {
  display: flex;
  flex-flow: column nowrap;
  margin: 10px;
}

.section.thread .messages .message {
  display: flex;
  flex-flow: column nowrap;
  margin: 10px;
}

.section.thread .messages .message.mine {
  margin-left: 40px;
}

.section.thread .messages .message.user {
  margin-right: 40px;
}

.section.thread .messages .sticky {
  background: #f7f7f7;
  position: -webkit-sticky;
  position: sticky;
  z-index: 1;
  top: 0;
}

.section.thread .messages .sticky .role {
  display: flex;
  justify-content: space-between;
  border-radius: 5px 5px 0 0;
  font-size: smaller;
  background: #777;
  padding: 5px;
}

.section.thread .messages .mine .sticky .role {
  background: #ccc;
}

.section.thread .messages .sticky * {
  color: #fff;
}

.section.thread .messages .body {
  border: 1px solid #777;
  border-radius: 0 0 5px 5px;
  overflow: hidden;
  padding: 10px;
}

.section.thread .messages .mine .body {
  border: 1px solid #ccc;
}

.section.thread .messages .body .text {
  white-space: pre-wrap;
  font-size: smaller;
  padding: 10px;
}

.section.thread .messages .footer {
  display: flex;
  flex-flow: row nowrap;
  font-size: small;
  color: #ccc;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
}

.section.thread .footer form {
  display: flex;
  flex-flow: column nowrap;
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 5px;
  width: 100%;
  box-sizing: border-box;
}

.section.thread .footer form textarea {
  display: flex;
  padding: 10px;
  margin: 5px;
  font-family: inherit;
  color: inherit;
  height: 180px;
}

.section.thread .footer form button {
  display: none;
}

.section.prompts {
  width: 300px;
  height: calc(100vh - 60px);
  font-size: small;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
}

.section.prompts .controls {
  justify-content: space-between;
  margin: 0 10px 20px 0;
  align-items: center;
}

.section.prompts .controls a {
  margin: 5px;
}

.section.prompts .items {
  height: calc(100vh - 125px);
}

.section.prompt .header {
  display: flex;
  flex-flow: row nowrap;
  height: 60px;
  gap: 10px;
}

.section.prompt .header form {
  display: flex;
  flex-flow: row nowrap;
  margin: 10px;
  gap: 10px;
}


.section.prompt .header .orgs {
  flex: 1;
  display: flex;
  flex-flow: row nowrap;
  margin: 10px;
  gap: 10px;
  align-items: center;
}

.section.prompt .header .orgs .items {
  display: flex;
  flex: 1;
  flex-flow: row nowrap;
  justify-content: end;
  gap: 5px;
}

.section.prompt .header .orgs .item {
  display: flex;
  flex-flow: row nowrap;
  border: 1px solid #ccc;
  align-items: center;
  border-radius: 5px;
  padding: 2px 5px;
  margin: 4px;
  gap: 5px;
  font-size: small;
  color: #aaa;
}

.section.prompt .header .action {
  display: flex;
  font-size: small;
}

.section.prompts .item {
  display: flex;
  flex-flow: row nowrap;
  border: 1px solid #ccc;
  margin: 5px;
  padding: 10px;
  border-radius: 5px;
  gap: 10px;
}

.section.prompts .item.selected {
  background: #fff;
}

.section.prompts .item .name {
  display: flex;
  flex: 1;
}

.section.prompt {
  margin-left: 30px;
  height: calc(100vh - 60px);
  width: calc(100vw - 650px);
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
}

.section.prompt form {
  display: flex;
  flex-flow: column nowrap;
  gap: 20px;
}

.section.prompt form button {
  display: none;
}

.section.prompt .preview {
  display: flex;
  flex-flow: row nowrap;
  align-self: flex-end;
  z-index: 100;
  width: 70px;
  margin: 5px;
  font-size: small;
}

.section.prompt .preview label {
  margin: 2px;
  color: #ccc;
}

.section.prompt textarea {
  height: calc(100vh - 170px);
  margin: -50px 5px 5px;
  padding: 15px;
}


.section.orgs {
  width: 300px;
  height: calc(100vh - 60px);
  font-size: small;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
}

.section.orgs .controls {
  justify-content: space-between;
  margin: 0 10px 20px 0;
  align-items: center;
}

.section.orgs .controls a {
  margin: 5px;
}

.section.orgs .items {
  height: calc(100vh - 125px);
}

.section.orgs .item {
  display: flex;
  flex-flow: row nowrap;
  border: 1px solid #ccc;
  margin: 5px;
  padding: 10px;
  border-radius: 5px;
  gap: 10px;
}

.section.orgs .item.selected {
  background: #fff;
}

.section.orgs .item .name {
  display: flex;
  flex: 1;
}

.section.org {
  display: flex;
  flex-flow: column nowrap;
  height: calc(100vh - 60px);
  width: calc(100vw - 650px);
  font-size: small;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin-left: 30px;
  gap: 20px;
}

.section.org .details {
  display: flex;
  flex-flow: row nowrap;
}

.section.org .header {
  display: flex;
  flex-flow: column nowrap;
  gap: 10px;
}

.section.org .body {
  display: flex;
  flex-flow: column nowrap;
  min-height: 0;
  flex: 1;
}

.section.org .body .horizontal:first-child {
  flex: 6;
  min-height: 0;
}

.section.org .body .horizontal:last-child {
  flex: 4;
  min-height: 0;
}

.section.org .scrollable {
  border: 1px solid #ccc;
  border-radius: 5px;
  background: #fff;
  margin: 5px;
}

.section.org .processes {
  flex: 1;
  margin: 10px;
}

.section.org .scrollable {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.section.org .processes .item {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  gap: 2px;
}

.section.org .processes .info {
  width: 300px;
  padding: 10px;
}

.section.org .processes .item .name {
  font-weight: bold;
}

.section.org .processes .item .description {
  font-size: x-small;
  color: #aaa;
}

.section.org .sub_processes {
  flex-flow: column nowrap;
  gap: 5px;
}

.section.org .activity_groups {
  flex-flow: column nowrap;
  gap: 5px;
}

.section.org .activities {
  flex-flow: column nowrap;
  gap: 5px;
}

.section.org .applications {
  display: flex;
  flex-flow: column nowrap;
  width: 350px;
}

.section.org .members {
  display: flex;
  flex-flow: column nowrap;
  flex: 1;
}

.section.org .items {
  display: flex;
  flex-flow: column nowrap;
  gap: 10px;
  padding: 10px;
  margin: 5px;
}

.section.org .results {
  display: flex;
  flex-flow: column nowrap;
  gap: 5px;
  padding: 10px;
  margin: 5px;
}

.section.org .item {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 15px;
}

.section.org .item .info {
  flex: 1;
}

.section.org .item .meta {
  color: #aaa;
  font-size: x-small;
}

.section.org .item select {
  font-size: x-small;
}

.section.org .control,
.section.org .control input {
  flex: 1;
}

.section.org .controls .rename {
  width: 250px;
}

.section.org .roles {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
}

.section.org .roles * {
  border-radius: 5px;
  font-size: x-small;
  padding: 5px 7px;
  font-weight: bold;
  cursor: pointer;
}

.section.org .roles .selected {
  border: 1px solid #777;
  background: #fff;
  color: #555;
}

.section.org .roles .deselected {
  border: 1px dotted #ccc;
  background: none;
  color: #aaa;
}

.section.users {
  width: 300px;
  height: calc(100vh - 60px);
  font-size: small;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
}

.section.users .controls {
  justify-content: space-between;
  margin: 0 10px 20px 0;
  align-items: center;
}

.section.users .controls a {
  margin: 5px;
}

.section.users .items {
  height: calc(100vh - 125px);
}

.section.users .item {
  display: flex;
  flex-flow: column nowrap;
  border: 1px solid #ccc;
  margin: 5px;
  padding: 10px;
  border-radius: 5px;
  gap: 10px;
}

.section.users .item.selected {
  background: #fff;
}

.section.users .item .name {
  display: flex;
  flex: 1;
}

.section.user {
  display: flex;
  flex-flow: column nowrap;
  height: calc(100vh - 60px);
  width: calc(100vw - 650px);
  font-size: small;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin-left: 30px;
  gap: 20px;
}

.section.user form {
  display: flex;
  flex-flow: column nowrap;
  gap: 20px;
}

.section.user .steps {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  flex: 1;
  gap: 20px;
  width: 100%;
}

.section.user .step {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 20px;
  width: 100%;
  max-width: 600px;
}

.section.user .controls {
  flex-flow: column nowrap;
  width: 100%;
}

.section.user .control {
  width: 100%;
  margin-bottom: 15px;
}

.section.user .submit {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 10px;
}

.section.templates {
  width: 300px;
  height: calc(100vh - 60px);
  font-size: small;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
}

.section.templates .controls {
  justify-content: space-between;
  margin: 0 10px 20px 0;
  align-items: center;
}

.section.templates .controls a {
  margin: 5px;
}

.section.templates .items {
  height: calc(100vh - 125px);
}

.section.templates .item {
  display: flex;
  flex-flow: row nowrap;
  border: 1px solid #ccc;
  margin: 5px;
  padding: 10px;
  border-radius: 5px;
  gap: 10px;
}

.section.templates .item.selected {
  background: #fff;
}

.section.templates .item .name {
  display: flex;
  flex: 1;
}

.section.template {
  margin-left: 30px;
  height: calc(100vh - 120px);
  width: calc(100vw - 650px);
}

.section.template .header {
  display: flex;
  flex-flow: row nowrap;
  height: 60px;
  gap: 10px;
}

.section.template .header form {
  display: flex;
  flex-flow: row nowrap;
  margin: 10px;
  gap: 10px;
}


.section.template .header .orgs {
  flex: 1;
  display: flex;
  flex-flow: row nowrap;
  margin: 10px;
  gap: 10px;
  align-items: center;
}

.section.template .header .orgs .items {
  display: flex;
  flex: 1;
  flex-flow: row nowrap;
  justify-content: end;
  gap: 5px;
}

.section.template .header .orgs .item {
  display: flex;
  flex-flow: row nowrap;
  border: 1px solid #ccc;
  align-items: center;
  border-radius: 5px;
  padding: 2px 5px;
  margin: 4px;
  gap: 5px;
  font-size: small;
  color: #aaa;
}

.section.template .header .action {
  display: flex;
  font-size: small;
}

.section.template .requests .item {
  display: flex;
  flex-flow: row nowrap;
}

.section.template .requests .metadata {
  margin-left: 5px;
}

.section.template .configuration {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
}

.section.template .category select {
  padding-left: 80px;
}

.section.template .url {
  flex: 1;
}

.section.template .url input {
  padding-left: 50px;
}

.section.template .auth .client_id input,
.section.template .auth .client_secret input,
.section.template .auth .token_url input {
  padding-left: 100px;
}

.section.template .auth .scopes input {
  padding-left: 60px;
}

.section.template .auth textarea {
  height: 150px;
}

.section.template .title {
  display: flex;
  margin: 25px 10px 10px;
  align-items: center;
}

.section.template form .action {
  display: flex;
  font-size: small;
  margin: 10px;
}

.section.template form {
  display: flex;
  flex-flow: column nowrap;
  gap: 20px;
}

.section.template .config {
  flex: 1;
}

.section.template textarea {
  flex: 1;
  width: 98%;
  box-sizing: border-box;
  height: calc(100vh - 400px);
  padding: 10px 10px 10px;
}

.section.template .prompt textarea {
  margin: 0 0 5px;
}

.section.template .body textarea {
  margin: 0 10px 0;
}

.section.template .static textarea {
  margin: 0 10px 0;
}

.section.template .prompt .dials {
  margin-left: 27px;
  margin-bottom: 10px;
}

.section.template .submit button {
  width: 100px;
  margin: 10px;
}


.section.metrics .groups {
  display: flex;
  flex-flow: column nowrap;
  height: 95vh;
  margin: 10px;
}

.section.metrics .group .segment {
  display: flex;
  margin: 10px;
  gap: 10px;
}

.section.metrics .tasks.items {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  width: calc(100vw - 300px);
}

.section.metrics .users.items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: calc(100vw - 300px);
}

.section.metrics .item {
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
  margin: 10px;
  padding: 10px;
  font-size: smaller;
}

.section.metrics .item.good {
  /* background: #00ff0015; */
  background: #e2ffa933;
}

.section.metrics .item.warn {
  /* background: #ffaa0015; */
  background: #ffe3a133;
}

.section.metrics .item.alert {
  /* background: #ff000015; */
  background: #ffbba133;
}

.section.metrics .item .header {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

.section.metrics .item .header .category {
  flex: 1;
  font-size: smaller;
  font-weight: bold;
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px;
}

.section.metrics .item .user {
  font-weight: bold;
}

.section.metrics .item .identifier {
  font-size: small;
  color: #aaa;
}

.section.metrics .item .sync {
  font-size: small;
  color: #aaa;
}

.section.metrics .item .metrics {
  margin: 10px 0 0;
  font-size: smaller;
}

.section.metrics .item .metric {
  display: flex;
  flex-flow: row nowrap;
  justify-content: end;
  font-size: small;
  border-bottom: 1px solid #eee;
  padding: 2px 0;
  color: #aaa;
  gap: 15px;
}

.section.metrics .item .metric .category {
  flex: 1;
}

.section.metrics .item .metric .count {
  width: 40px;
  text-align: right;
}

.section.metrics .item .metric .sync,
.section.metrics .item .metric .duration {
  width: 30px;
  text-align: right;
}


.section.jobs {
  display: flex;
  flex-flow: column nowrap;
  height: 95vh;
  margin: 10px;
}

.section.jobs .groups {
  display: flex;
  flex-flow: row nowrap;
  height: 95vh;
  width: calc(100vw - 300px);
}

.section.jobs .group {
  display: flex;
  flex-flow: column nowrap;
  height: 95vh;
}

.section.jobs .category {
  margin: 0 15px;
}

.section.jobs .items {
  display: flex;
  flex-flow: column nowrap;
  height: 95vh;
  margin: 10px;
}

.section.jobs .item {
  display: flex;
  flex-flow: row nowrap;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 5px;
  font-size: smaller;
}

.section.jobs .item .details {
  display: flex;
  flex-flow: column nowrap;
  padding: 10px;
  flex: 1;
}

.section.jobs .item .color {
  width: 20px;
  background: #ccc;
  border-radius: 4px 0 0 4px;
  border-right: 1px solid #ccc;
}

.section.jobs .item.user_last_active .color {
  background: #e2ffa9;
}

.section.jobs .item.user_aggregate_sessions .color {
  background: #acfdff;
}

.section.jobs .item.application_analysis .color {
  background: #b4ffa6;
}

.section.jobs .item .details .header,
.section.jobs .item .details .footer {
  color: #aaa;
  font-size: small;
}

.section.jobs .item .details .body {
  display: flex;
  flex-flow: row nowrap;
  gap: 5px;
}

.section.approvals .item {
  display: flex;
  flex-flow: row nowrap;
  gap: 5px;
}

.section.approvals .item .data {
  display: flex;
  flex-flow: row nowrap;
  gap: 15px;
}

.section.approvals .item .data * {
  width: 250px;
}

.section.approvals .item .data .org {
  text-align: right;
}

.section.approvals .item .data .customer {
  text-align: left;
}

.section.applications .item {
  display: flex;
  flex-flow: row nowrap;
  gap: 5px;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
}

.section.applications .item .id {
  width: 50px;
}

.section.applications .item .control {
  width: 400px;
}

.section.applications .item input {
  flex: 1;
}

.section.applications .item .process {
  flex: 1;
}

.section.applications .item .metadata {
  flex: 1;
}

.section.analyses {
  width: 300px;
  height: calc(100vh - 60px);
  font-size: small;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
}

.section.analyses .items {
  height: calc(100vh - 70px);
}

.section.analyses .item {
  display: flex;
  flex-flow: column nowrap;
  border: 1px solid #ccc;
  margin: 5px;
  padding: 10px;
  border-radius: 5px;
  gap: 10px;
}

.section.analyses .item a {
  font-size: x-small;
}

.section.analyses .item .metadata {
  font-size: x-small;
}

.section.analysis {
  margin-left: 30px;
  height: calc(100vh - 60px);
  width: calc(100vw - 650px);
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
}

.section.analysis .action {
  display: flex;
  font-size: small;
  margin: 10px;
}

.section.analysis form {
  display: flex;
  flex-flow: column nowrap;
  height: calc(100vh - 100px);
  margin: 10px;
  gap: 20px;
}

.section.analysis textarea {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  height: calc(100vh - 100px);
}

.section.reports {
  width: 300px;
  height: calc(100vh - 60px);
  font-size: small;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
}

.section.reports .controls {
  justify-content: space-between;
  margin: 0 10px 20px 0;
  align-items: center;
}

.section.reports .controls a {
  margin: 5px;
}

.section.reports .items {
  height: calc(100vh - 70px);
}

.section.reports .item {
  display: flex;
  flex-flow: row nowrap;
  border: 1px solid #ccc;
  margin: 5px;
  padding: 10px;
  border-radius: 5px;
  gap: 10px;
}

.section.reports .item.selected {
  background: #fff;
}

.section.reports .item .name {
  display: flex;
  flex: 1;
}


.section.report {
  margin-left: 30px;
  height: calc(100vh - 60px);
  width: calc(100vw - 650px);
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
}

.section.report .header {
  display: flex;
  flex-flow: row nowrap;
  height: 60px;
  gap: 10px;
}

.section.report .header form {
  display: flex;
  flex-flow: row nowrap;
  margin: 10px;
  gap: 10px;
}

.section.report .header .orgs {
  flex: 1;
  display: flex;
  flex-flow: row nowrap;
  margin: 10px;
  gap: 10px;
  align-items: center;
}

.section.report .header .orgs .items {
  display: flex;
  flex: 1;
  flex-flow: row nowrap;
  justify-content: end;
  gap: 5px;
}

.section.report .header .orgs .item {
  display: flex;
  flex-flow: row nowrap;
  border: 1px solid #ccc;
  align-items: center;
  border-radius: 5px;
  padding: 2px 5px;
  margin: 4px;
  gap: 5px;
  font-size: small;
  color: #aaa;
}

.section.report .header .action {
  display: flex;
  font-size: small;
}

.section.report .parts {
  display: flex;
  flex-flow: column nowrap;
  height: calc(100vh - 400px);
  margin: 10px;
  gap: 20px;
}

.section.report .parts .item {
  display: flex;
  flex-flow: column nowrap;
  margin: 10px;
}

.section.report .parts .sticky {
  background: #f7f7f7;
  position: -webkit-sticky;
  position: sticky;
  z-index: 1;
  top: 0;
}

.section.report .parts .sticky .details {
  display: flex;
  justify-content: space-between;
  flex-flow: row nowrap;
  border-radius: 5px 5px 0 0;
  font-size: smaller;
  background: #777;
  padding: 5px;
  gap: 10px;
}

.section.report .parts .sticky * {
  color: #fff;
}

.section.report .parts .body {
  border: 1px solid #777;
  border-radius: 0 0 5px 5px;
  overflow: hidden;
  padding: 10px;
}

.section.report .parts .body .text {
  white-space: pre-wrap;
  font-size: smaller;
  padding: 10px;
}

.section.report .footer {
  display: flex;
}

.section.report .footer form {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  box-sizing: border-box;
  height: 250px;
  margin: 10px;
  gap: 20px;
}

.section.report .footer textarea {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  height: calc(100vh - 100px);
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Light-webfont.eot');
  src: url('../fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Roboto-Light-webfont.woff') format('woff'),
    url('../fonts/Roboto-Light-webfont.ttf') format('truetype'),
    url('../fonts/Roboto-Light-webfont.svg#robotolight') format('svg');
  font-weight: normal;
  font-style: normal;
}