* {
    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: flex;
    cursor: pointer;
    color: #000;
    font-weight: bold;
    font-size: small;
}

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

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

.noaction .action {
    display: none;
}

.noedit input {
    pointer-events: none;
}

.noedit textarea {
    pointer-events: none;
}

.readonly {
    pointer-events: none;
}

.toast {
    display: flex;
    flex-flow: column nowrap;
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 180px;
    font-size: small;
    z-index: 1000;
    gap: 10px;
}

.toast .bubble {
    display: flex;
    flex-flow: row nowrap;
    padding: 10px;
    border-radius: 4px;
}

.toast .bubble.alert {
    background: #ffe3a1;
}

.toast .bubble.notify {
    background: #e2ffa9;
}

.toast .message {
    display: flex;
    flex: 1;
    margin-right: 10px;
}

.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;
    align-items: center;
    flex: 1;
}

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

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

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

.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.provider select {
    padding-left: 70px;
    text-align: right;
}

.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.max-tokens input {
    width: 150px;
    text-align: right;
}

.control.thinking select {
    padding-left: 75px;
    text-align: right;
}

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

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

.control.orgs {
    flex: 1;
    display: flex;
    flex-flow: row nowrap;
    margin: 10px;
    gap: 10px;
    align-items: center;
    justify-content: end;
}

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

.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.history-selector input {
    padding-left: 115px;
    width: 200px;
}

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

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

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

.control.generic input {
    padding-left: 60px;
    display: flex;
    flex: 1;
}

.control.generic input[type="checkbox"] {
    cursor: pointer;
    margin: 0 5px;
    flex: 0;
}

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

.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;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000000cc;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.overlay .overlay-main {
    background: #fff;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    margin: 40px;
}

.overlay.small .overlay-main {
    height: 30vh;
    width: 30vw;
}

.overlay.large .overlay-main {
    height: calc(100vh - 100px);
    width: 70vw;
}

.overlay .overlay-body {
    flex: 1;
    padding: 20px;
    overflow: none;
}

.overlay .overlay-body textarea.json {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
}

.overlay .overlay-body textarea.warn {
    border: 1px solid #b74747;
    background-color: #fae8e8;
}

.overlay .overlay-footer {
    display: flex;
    gap: 10px;
    padding: 15px 20px;
    border-top: 1px solid #ccc;
}

.overlay.small .overlay-footer {
    justify-content: center;
}

.overlay.large .overlay-footer {
    justify-content: flex-end;
}

.overlay .overlay-footer .warn {
    display: flex;
    flex: 1;
    align-items: center;
    color: #b74747;
    font-size: smaller;
}

.overlay .overlay-footer button {
    width: 140px;
    margin: 10px;
}

.overlay .overlay-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
}

.overlay .overlay-body {
    flex: 1;
    display: flex;
    overflow: scroll;
}

.overlay .overlay-body .image {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.overlay .overlay-body .image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 5px;
}

.overlay .overlay-body .nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000000cc;
    color: #fff;
    font-size: 36px;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s;
    user-select: none;
}

.overlay .overlay-body .nav:hover {
    background: #000000dd;
}

.overlay .overlay-body .nav.disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.overlay .overlay-body .nav.prev {
    left: 20px;
}

.overlay .overlay-body .nav.next {
    right: 20px;
}

.overlay .overlay-body .message {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.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 .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: 80px;
}

.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);
    width: calc((100vw - 300px) / 5);
}

.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 .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 .blueprint .header {
    background: #cae0fa;
}

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

.section.tasks .key_frame_set .header {
    background: #6deeb7;
}

.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: #ffa8a8;
}

.section.tasks .email_message .header {
    background: #fff19e;
}

.section.tasks .api_message .header {
    background: #b1fad5;
}

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

.section.tasks .analysis_message .header {
    background: #72e8ff;
}

.section.tasks .trigger_message .header {
    background: #b9f195;
}

.section.tasks .job_profile .header {
    background: #f999c0;
}

.section.tasks .timeline .header {
    background: #ffb8c1;
}

.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.waiting .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 form {
    display: flex;
    flex-flow: column nowrap;
    gap: 30px;
}

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

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

.section.editor .row {
    display: flex;
    flex-flow: row nowrap;
    align-items: start;
    width: calc(100vw - 300px);
    margin: 10px 0;
    gap: 5px;
}

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

.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;
    gap: 10px;
}

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

.section.editor .references .totals {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    font-size: 0.8em;
}

.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.list {
    width: 300px;
    height: calc(100vh - 60px);
    font-size: small;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
}

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

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

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

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

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

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

.section.list .item .details {
    flex: 1;
    display: flex;
    flex-flow: row nowrap;
    gap: 10px;
    padding: 10px;
}

.section.list .item .name {
    width: 185px;
    overflow: hidden;
}

.section.chats .item.favourite .color {
    background: #feffa5;
}

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

.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 .area {
    display: flex;
    flex-flow: column nowrap;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
}

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

.section.chat .system-prompts {
    display: flex;
    flex-flow: row nowrap;
    font-size: small;
    margin-left: 5px;
    margin-right: 5px;
}

.section.chat .system-prompts .system {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    margin-left: 5px;
}

.section.chat .system-prompts .items {
    display: flex;
    flex-flow: row wrap;
    flex: 1;
    gap: 5px;
}

.section.chat .input {
    display: flex;
    flex-flow: column nowrap;
}

.section.chat .tokens {
    font-size: small;
    align-self: center;
    color: #ccc;
    margin-left: auto;
}

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

.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 .actions {
    display: flex;
    flex-flow: row nowrap;
    gap: 20px;
}

.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.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;
    border: 1px solid #ccc;
    border-radius: 5px;
}

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

.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.prompt {
    margin-left: 30px;
    height: calc(100% - 25px);
    width: calc(100vw - 650px);
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
}

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

.section.prompt .header form {
    flex-flow: row nowrap;
    align-items: center;
    margin: 15px 0;
    gap: 10px;
}

.section.prompt form {
    display: flex;
    flex-flow: column nowrap;
    height: calc(100% - 70px);
    gap: 20px;
}

.section.prompt textarea {
    height: 100%;
    margin: 0 5px 5px;
    padding: 15px;
}

.section.org {
    display: flex;
    flex-flow: column nowrap;
    height: calc(100vh - 40px);
    width: calc(100vw - 650px);
    font-size: small;
    margin-left: 30px;
    gap: 10px;
}

.section.org .tabs {
    display: flex;
    flex-flow: row nowrap;
    margin-left: 20px;
    gap: 5px;
}

.section.org .tabs .tab {
    display: flex;
    flex-flow: row nowrap;
    border: 1px solid #ccc;
    border-radius: 5px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
    cursor: pointer;
    padding: 10px;
    margin-bottom: -1px;
}

.section.org .tabs .tab.active {
    background: #fff;
}

.section.org .tab-content {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
}

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

.section.org .details .controls {
    margin: 5px;
}

.section.org .header {
    display: flex;
    flex-flow: column nowrap;
    padding: 10px;
    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 {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 5px;
}

.section.org .config .controls {
    flex-flow: column nowrap;
    align-items: stretch;
    gap: 10px;
}

.section.org .config .columns {
    display: grid;
    grid-template-columns: 2.5fr 1.5fr;
    gap: 20px;
    margin: 20px;
    flex: 1;
}

.section.org .config .column {
    display: flex;
    flex-flow: column nowrap;
    gap: 10px;
    background: #fff;
    border-left: 5px solid #eee;
}

.section.org .config .group {
    display: flex;
    flex-flow: column nowrap;
    padding: 10px 20px;
}

.section.org .config .group.general input,
.section.org .config .group.variants input,
.section.org .config .group.blueprints input,
.section.org .config .group.skip-size input {
    width: 250px;
    padding-left: 80px;
}

.section.org .config .group.skip-titles input {
    width: 250px;
    padding-left: 50px;
}

.section.org .config .blueprint .controls,
.section.org .config .variant-entry .controls,
.section.org .config .skip-title .controls {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    width: 260px;
}

.section.org .config button {
    width: 300px;
    margin: 30px;
}

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

.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 .members .controls,
.section.org .applications .controls {
    flex: 0;
}

.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 .search.control,
.section.org .search.control input {
    flex: 1;
}

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

.section.org .controls .rename input {
    width: 100%;
}

.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 .item {
    flex-flow: column nowrap;
    padding: 10px;
    gap: 5px;
}

.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 .item.analyze .color {
    background: #e2ffa9;
}

.section.templates .item.webhook .color {
    background: #acfdff;
}

.section.templates .item.static .color {
    background: #feffa5;
}

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

.section.template .items {
    display: flex;
    flex-flow: column nowrap;
    align-items: start;
    margin: 10px;
}

.section.template .items .item {
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
}

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

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

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

.section.template .mid .items {
    flex-flow: row nowrap;
    overflow: scroll;
}

.section.template .mid .item {
    display: flex;
    align-items: center;
    font-size: small;
    border: 1px solid #f7f7f7;
    border-radius: 5px;
    margin: 0 5px;
}

.section.template .mid .item a {
    padding: 5px 10px;
}

.section.template .mid .item.active {
    border: 1px solid #ccc;
    background: #ccc;
}

.section.template .mid .item.selected {
    border: 1px solid #ccc;
    background: #fff;
}

.section.template .add {
    margin: 12px 0;
}

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

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

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

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

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

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

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

.section.template .requests .request {
    margin-bottom: 20px;
}

.section.template .requests .request .side {
    margin-top: 10px;
    margin-right: 10px;
}

.section.template .auth .grouped {
    flex: 1;
    width: calc(100% - 55px);
    border-left: 5px solid #eee;
    padding-left: 10px;
    margin-left: 30px;
}

.section.template .requests .request .grouped {
    flex: 1;
    width: 100%;
    border-left: 5px solid #eee;
    padding-left: 10px;
}

.section.template .auth .details {
    display: flex;
    flex-flow: column nowrap;
}

.section.template .auth .details .strategy {
    margin-left: 5px;
    width: 100%;
}

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

.section.template .auth .url,
.section.template .requests .url {
    flex: 1;
}

.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 .requests .url input {
    padding-left: 50px;
}

.section.template .response .selector input {
    padding-left: 65px;
}

.section.template .response .multipart,
.section.template .response .jsonpath {
    display: flex;
    flex: 1;
    margin-left: 5px;
}

.section.template .response .multipart input {
    padding-left: 65px;
}

.section.template .response .jsonpath input {
    padding-left: 120px;
}

.section.template .triggers {
    margin-bottom: 20px;
}

.section.template .triggers .trigger {
    display: flex;
    flex-flow: row nowrap;
    margin-bottom: 10px;
    width: 100%;
}

.section.template .triggers .trigger .side {
    margin-top: 10px;
    margin-right: 10px;
}

.section.template .triggers .trigger .grouped {
    display: flex;
    flex-flow: column nowrap;
    flex: 1;
    border-left: 5px solid #eee;
    padding-left: 10px;
}

.section.template .triggers .template {
    display: flex;
}

.section.template .triggers .template .name {
    flex: 0;
}

.section.template .triggers .template .name select {
    padding-left: 75px;
    min-width: 250px;
}

.section.template .triggers .template .interval {
    flex: 0;
}

.section.template .triggers .template .interval input {
    padding-left: 70px;
    min-width: 150px;
}

.section.template .triggers .template .run_as {
    flex: 0;
}

.section.template .triggers .template .run_as select {
    padding-left: 70px;
    min-width: 220px;
}

.section.template .triggers .variables .cateogry select {
    padding-left: 75px;
    width: 185px;
}

.section.template .triggers .variables .selector {
    flex: 1.5;
}

.section.template .triggers .variables .selector input {
    padding-left: 65px;
}

.section.template .triggers .variables .name {
    flex: 1;
}

.section.template .prompt {
    display: flex;
    flex-flow: row nowrap;
    align-items: start;
    margin-bottom: 20px;
}

.section.template .prompt .side {
    margin-top: 22px;
    margin-right: 10px;
}

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

.section.template .prompt .grouped {
    flex: 1;
    display: flex;
    flex-flow: column nowrap;
    border-left: 5px solid #eee;
    padding-left: 10px;
}

.section.template .prompt .split {
    flex: 1;
    display: flex;
    flex-flow: row nowrap;
    gap: 10px;
    margin: 0 10px;
}

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

.section.template .prompt .conditionals,
.section.template .prompt .variables {
    margin-right: 5px;
}

.section.template .triggers .variables .subtitle,
.section.template .prompt .conditionals .subtitle,
.section.template .prompt .variables .subtitle {
    font-size: small;
    text-align: center;
    align-content: center;
    width: 65px;
}

.section.template .prompt .variables .warn select,
.section.template .prompt .variables .warn input {
    background-color: #fae8e8 !important;
}

.section.template .prompt .conditionals select,
.section.template .prompt .variables select {
    padding-left: 65px;
    width: 185px;
}

.section.template .prompt .selector input {
    padding-left: 65px;
}

.section.template .prompt .conditionals .selector,
.section.template .prompt .variables .selector {
    flex: 1.5;
}

.section.template .prompt .conditionals .equals,
.section.template .prompt .variables .name {
    flex: 1;
}

.section.template .submit button {
    width: 140px;
    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: flex;
    flex-flow: column nowrap;
    width: calc(100vw - 300px);
}

.section.metrics .org-group {
    margin: 10px 0;
}

.section.metrics .org-header {
    font-weight: bold;
    padding: 10px;
    color: #aaa;
}

.section.metrics .org-users {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.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 {
    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 .item .color {
    width: 20px;
    border-radius: 4px 0 0 4px;
    border-right: 1px solid #ccc;
    background: #eee;
}

.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.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 {
    display: flex;
    flex-flow: column nowrap;
    width: calc(100vw - 300px);
}

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

.section.applications .item {
    display: grid;
    grid-template-columns: 50px 400px 1fr 1fr 1fr 65px;
    flex-flow: row nowrap;
    gap: 5px;
}

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

.section.charts .details {
    display: flex;
    flex-flow: column nowrap;
    gap: 10px;
    margin: 10px;
    height: calc(100vh - 80px);
}

.section.charts .container h3 {
    margin: 5px 0;
    font-size: large;
    font-weight: bold;
    color: #ccc;
    padding: 5px;
    text-align: center;
}

.section.charts .items {
    display: flex;
    flex-flow: column nowrap;
    gap: 15px;
}

.section.charts .ranges {
    display: flex;
    flex-flow: row nowrap;
    gap: 10px;
}

.section.charts .container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-top: 20px;
    gap: 20px;
}

.section.charts svg {
    border: 1px solid #ccc;
    background: white;
}

.section.charts .legend {
    display: flex;
    flex-direction: column;
    margin-top: 50px;
    gap: 8px;
}

.section.charts .legend .item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.section.charts .legend .item:hover {
    background-color: #f5f5f5;
}

.section.charts .legend .item.hidden {
    opacity: 0.3;
}

.section.charts .legend .item.hidden:hover {
    opacity: 0.5;
}

.section.charts .legend .item .bar {
    width: 30px;
    height: 3px;
    flex-shrink: 0;
}

.section.charts .legend .item span {
    font-size: 14px;
    white-space: nowrap;
}

.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 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.report {
    margin-left: 30px;
    height: calc(100vh - 60px);
    width: calc(100vw - 650px);
}

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

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

.section.report .parts {
    display: flex;
    flex-flow: column nowrap;
    height: calc(100vh - 395px);
    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 .details .actions {
    display: flex;
    flex-flow: row nowrap;
    gap: 20px;
}

.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;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.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);
}

.section.diagnostics .header {
    margin-bottom: 20px;
}

.section.diagnostics .header h3 {
    margin: 10px;
}

.section.diagnostics .description {
    color: #999;
    font-size: small;
    margin: 0 10px 10px;
}

.section.diagnostics .controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 5px;
    background: #f7f7f7;
}

.section.diagnostics .controls .selection {
    display: flex;
    align-items: center;
    gap: 10px;
}

.section.diagnostics .controls .selection input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin: 0 5px;
}

.section.diagnostics .controls .count {
    color: #999;
    font-size: small;
}

.section.diagnostics .items {
    height: calc(100vh - 280px);
}

.section.diagnostics .item {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    border: 1px solid #ccc;
    margin: 5px;
    border-radius: 5px;
}

.section.diagnostics .item.passed .color {
    background: #e2ffa9;
}

.section.diagnostics .item.failed .color {
    background: #fff19e;
}

.section.diagnostics .item.running .color {
    background: #ffe3a1;
}

.section.diagnostics .item .color {
    align-self: stretch;
}

.section.diagnostics .item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin: 10px;
}

.section.diagnostics .item .details {
    flex: 1;
    padding: 10px;
}

.section.diagnostics .item .name {
    font-weight: bold;
    color: #333;
    font-size: small;
}

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

.section.test-output .placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: #999;
    font-style: italic;
}

.section.test-output .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
}

.section.test-output .header h3 {
    margin: 0;
    flex: 1;
}

.section.test-output .clear-action {
    margin-left: 15px;
}

.section.test-output .output-content {
    flex: 1;
    padding: 10px;
    height: calc(100vh - 140px);
    overflow-y: auto;
}

.section.test-output .test-section {
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
}

.section.test-output .test-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: #f7f7f7;
    border-bottom: 1px solid #ccc;
}

.section.test-output .test-section-name {
    font-weight: bold;
    flex: 1;
}

.section.test-output .test-section-logs {
    padding: 10px;
    background: #fff;
    font-family: "Courier New", monospace;
    font-size: small;
    max-height: 400px;
    overflow-y: auto;
}

.section.test-output .test-section-logs .no-logs {
    color: #999;
    font-style: italic;
    padding: 10px;
}

.section.test-output .log-entry {
    padding: 3px 5px;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
}

.section.test-output .log-entry:last-child {
    border-bottom: none;
}

@keyframes pulse {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

@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;
}