diff --git a/src/cmdinput.less b/src/cmdinput.less
new file mode 100644
index 000000000..fd6ce8efa
--- /dev/null
+++ b/src/cmdinput.less
@@ -0,0 +1,419 @@
+.cmd-input-info, .cmd-history {
+    &::-webkit-scrollbar {
+        background-color: #777;
+        width: 5px;
+        height: 5px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: white;
+    }
+}
+
+.info-message {
+    position: relative;
+    font-weight: normal;
+    font-size: 12px;
+    color: @term-white;
+    
+    .message-content {
+        position: absolute;
+        display: none;
+        flex-direction: row;
+        align-items: flex-start;
+        top: -6px;
+        left: -6px;
+        padding: 5px;
+        border: 1px solid #777;
+        background-color: #444;
+        border-radius: 5px;
+        z-index: 5;
+        overflow: hidden;
+
+        .info-icon {
+            margin-right: 5px;
+            width: 12px;
+            flex-shrink: 0;
+        }
+
+        .info-children {
+            flex: 1 0 0;
+            overflow: hidden;
+        }
+    }
+    
+    &:hover {
+        .message-content {
+            display: flex;
+        }
+    }
+}
+
+.cmd-input {
+    border-radius: 0;
+    border-top: 4px solid #ccc;
+    border-right: 1px solid #ccc;
+    border-bottom: 1px solid #ccc;
+    border-bottom-right-radius: 10px;
+    max-height: max(300px, 40%);
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    padding: 20px 25px 20px 20px;
+    z-index: 100;
+
+    &.has-info {
+        padding-top: 10px;
+    }
+
+    .focus-indicator {
+        height: 90%;
+        top: 5%;
+        left: 4px;
+    }
+
+    &.has-history {
+        padding-top: 5px;
+        height: max(300px, 40%);
+    }
+
+    &.has-remote {
+        max-height: max(300px, 70%);
+    }
+
+    .remote-status-warning {
+        display: flex;
+        flex-direction: row;
+        color: @term-yellow;
+        align-items: center;
+        font-size: 14px;
+
+        .button {
+            margin-left: 10px;
+        }
+
+        .remote-name {
+            .mono-font(14px)
+        }
+    }
+
+    .input-minmax-control {
+        position: absolute;
+        top: 5px;
+        right: 5px;
+        color: @term-white;
+        font-size: 12px;
+        padding: 5px;
+        cursor: pointer;
+    }
+
+    .cmd-input-grow-spacer {
+        flex-grow: 1;
+    }
+
+    .cmd-input-context {
+        .mono-font();
+        color: #fff;
+        white-space: nowrap;
+    }
+
+    .cmd-input-field {
+        position: relative;
+        
+        .cmd-input-control {
+            line-height: 0;
+        }
+
+        .cmd-hints {
+            position: absolute;
+            bottom: -14px;
+            right: 0px;
+        }
+
+        textarea {
+            color: white;
+            background-color: black;
+            .mono-font();
+            padding-bottom: calc(0.5em - 1px);
+            padding-top: calc(0.5em - 1px);
+            resize: none;
+            overflow-wrap: anywhere;
+
+            &:active, &:focus {
+                border-color: white !important;
+            }
+
+            &.display-disabled {
+                background-color: #444;
+            }
+        }
+
+        input.history-input {
+            border: 0;
+            padding: 0;
+            height: 0;
+        }
+
+        .cmd-quick-context .button {
+            .mono-font();
+            background-color: #000 !important;
+            color: white;
+        }
+
+        &.inputmode-global .cmd-quick-context .button {
+            color: black;
+            background-color: @tab-green !important;
+        }
+
+        &.inputmode-comment .cmd-quick-context .button {
+            color: black;
+            background-color: @tab-blue !important;
+        }
+
+        .cmd-exec .button {
+            background-color: #000 !important;
+            color: #d3d7cf;
+        }
+    }
+
+    .cmd-history {
+        color: @term-white;
+        margin-bottom: 5px;
+        overflow: auto;
+        flex-shrink: 1;
+
+        .history-title {
+            position: absolute;
+            z-index: 102;
+            top: 5px;
+            left: 20px;
+            background-color: black;
+            .mono-font(12px, 700);
+            color: @soft-blue;
+            padding-bottom: 4px;
+            display: flex;
+            flex-direction: row;
+            width: calc(100% - 40px);
+            overflow-x: auto;
+
+            .history-opt {
+                white-space: nowrap;
+            }
+
+            .history-clickable-opt {
+                white-space: nowrap;
+                cursor: pointer;
+            }
+
+            .grow-spacer {
+                flex: 1 0 10px;
+            }
+
+            .spacer {
+                flex: 0 0 10px;
+            }
+        }
+
+        .history-items {
+            margin-top: 24px;
+            color: @term-white;
+            .mono-font(12px);
+            padding-bottom: 6px;
+
+            .history-line {
+                white-space: pre;
+            }
+
+            .history-item.history-haderror {
+                color: mix(@term-red, @term-white, 50%);
+            }
+
+            .history-line:first-child {
+                margin-left: 0 !important;
+            }
+
+            .history-item {
+                padding-left: 5px;
+                cursor: pointer;
+
+                &:hover {
+                    background-color: #222;
+                }
+            }
+
+            .history-item.is-selected {
+                font-weight: bold;
+                color: @term-bright-white;
+                background-color: #444;
+            }
+
+            .history-item.is-selected.history-haderror {
+                color: mix(@term-bright-red, @term-bright-white, 50%);
+            }
+        }
+    }
+
+    .cmd-input-info {
+        flex-shrink: 1;
+        overflow-y: auto;
+        margin-bottom: 5px;
+        
+        .info-msg {
+            .mono-font(14px, 400);
+            color: @soft-blue;
+            padding-bottom: 2px;
+
+            a {
+                color: @term-blue;
+            }
+        }
+
+        .info-title {
+            .mono-font(14px, 700);
+            color: @soft-blue;
+            padding-bottom: 2px;
+        }
+
+        .info-lines {
+            .mono-font(12px);
+            color: @term-white;
+            white-space: pre;
+            padding-bottom: 6px;
+        }
+
+        .info-comps {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            padding-bottom: 5px;
+            .mono-font(14px, 400);
+            
+            .info-comp {
+                min-width: 200px;
+                color: @term-white;
+                margin-right: 10px;
+
+                &.has-space {
+                    text-decoration: underline dotted #777;
+                }
+            }
+
+            .metacmd-comp {
+                color: @term-bright-green;
+            }
+        }
+
+        .info-error {
+            .mono-font(14px, 700);
+            color: @term-red;
+            padding-bottom: 2px;
+        }
+
+        .info-remote-showall {
+            table.remotes-table {
+                th {
+                    color: white;
+                    font-weight: bold;
+                }
+                
+                th, td {
+                    padding: 3px 8px 3px 8px;
+                }
+
+                td {
+                    cursor: pointer;
+                }
+
+                tr:hover td {
+                    background-color: #333;
+                }
+            }
+        }
+
+        .info-remote {
+            color: #d3d7cf;
+            .mono-font(12px);
+
+            .info-remote-title {
+                font-weight: bold;
+                color: @term-cyan;
+            }
+
+            .info-error, .info-msg {
+                margin-top: 5px;
+                padding: 5px;
+            }
+
+            .remote-field {
+                display: flex;
+                flex-direction: row;
+
+                .remote-field-def {
+                    white-space: pre;
+                    width: 120px;
+                }
+                
+                .remote-field-val {
+                    white-space: pre;
+                    display: flex;
+                    flex-direction: row;
+                }
+            }
+
+            .remote-input-field {
+                display: flex;
+                flex-direction: row;
+                height: 25px;
+                align-items: center;
+
+                .remote-field-label {
+                    white-space: pre;
+                    width: 140px;
+                    font-weight: bold;
+                    color: @term-bright-white;
+                }
+
+                .undo-icon {
+                    margin-left: 4px;
+                    cursor: pointer;
+                    padding: 2px;
+                }
+
+                .remote-field-control {
+                    &.text-control {
+                    }
+
+                    &.text-input {
+                        input[type=text], input[type=number], input[type=password] {
+                            background-color: black;
+                            color: white;
+                            width: 200px;
+                        }
+                    }
+
+                    &.checkbox-input {
+                        input[type=checkbox] {
+                            position: relative;
+                            top: 3px;
+                        }
+                    }
+
+                    &.select-input {
+                        select {
+                            width: 200px;
+                            background-color: black;
+                            color: white;
+                        }
+                    }
+                }
+            }
+        }
+
+        .info-remote-showall {
+            color: #d3d7cf;
+            .mono-font(12px);
+        }
+    }
+}
diff --git a/src/comps.less b/src/comps.less
new file mode 100644
index 000000000..6cecbfcdd
--- /dev/null
+++ b/src/comps.less
@@ -0,0 +1,623 @@
+.cmdstr-code {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    padding: 0px 10px 0px 0;
+
+    &.is-large {
+        .use-button {
+            height: 28px;
+            width: 28px;
+        }
+
+        .code-div code {
+            .mono-font(14px);
+        }
+    }
+
+    &.limit-height .code-div {
+        max-height: 58px;
+    }
+
+    &.limit-height.is-large .code-div {
+        max-height: 68px;
+    }
+
+    .use-button {
+        flex-grow: 0;
+        padding: 3px;
+        border-radius: 3px 0 0 3px;
+        font-size: 12px;
+        height: 22px;
+        width: 22px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        align-self: flex-start;
+        cursor: pointer;
+        background-color: black;
+
+        &:hover {
+            background-color: #777;
+        }
+    }
+
+    .code-div {
+        background-color: black;
+        display: flex;
+        flex-direction: row;
+        min-width: 100px;
+        overflow: auto;
+        border-left: 1px solid #777;
+        
+        code {
+            flex-shrink: 0;
+            min-width: 100px;
+            color: white;
+            .mono-font(12px);
+            white-space: pre;
+            padding: 2px 8px 2px 8px;
+            background-color: black;
+        }
+    }
+
+    .copy-control {
+        width: 0;
+        position: relative;
+        display: block;
+        visibility: hidden;
+        
+        .inner-copy {
+            position: absolute;
+            bottom: -1px;
+            right: -20px;
+            font-size: 9px;
+            padding: 2px;
+            padding-left: 4px;
+            cursor: pointer;
+            width: 20px;
+            background-color: black;
+            border: 1px solid #333;
+            color: #777;
+            &:hover {
+                color: white;
+            }
+        }
+    }
+
+    &:hover .copy-control {
+        visibility: visible !important;
+    }
+}
+
+.terminal-wrapper {
+    position: relative;
+    
+    .term-block {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: transparent;
+        z-index: 10;
+    }
+
+    .xterm-screen {
+        &::-webkit-scrollbar {
+            display: none;
+        }
+    }
+
+    &.focus .xterm {
+        .xterm-screen {
+            overflow-y: scroll;
+            overscroll-behavior: contain;
+        }
+
+        .xterm-viewport {
+            overscroll-behavior: contain;
+        }
+    }
+
+    &.focus .xterm-viewport {
+        &::-webkit-scrollbar {
+            background-color: #777;
+            width: 5px;
+            height: 5px;
+        }
+        
+        &::-webkit-scrollbar-thumb {
+            background: white;
+        }
+    }
+
+    .xterm-viewport {
+        &::-webkit-scrollbar {
+            background-color: #222;
+            width: 5px;
+            height: 5px;
+        }
+        
+        &::-webkit-scrollbar-thumb {
+            background: #555;
+        }
+    }
+}
+
+body .xterm .xterm-viewport {
+    overflow-y: auto;
+    width: calc(100% + 5px);
+}
+
+.checkbox-toggle {
+    position: relative;
+    display: inline-block;
+    width: 40px;
+    height: 23px;
+
+    input {
+        opacity: 0;
+        width: 0;
+        height: 0;
+    }
+
+    .slider {
+        position: absolute;
+        content: "";
+        cursor: pointer;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background-color: #333;
+        transition: 0.5s;
+        border-radius: 33px;
+    }
+
+    .slider:before {
+        position: absolute;
+        content: "";
+        height: 18px;
+        width: 18px;
+        left: 3px;
+        bottom: 3px;
+        background-color: white;
+        transition: 0.5s;
+        border-radius: 50%;
+    }
+
+    input:checked + .slider {
+        background-color: @term-green;
+    }
+
+    input:checked + .slider:before {
+        transform: translateX(18px);
+    }
+}
+
+.button.is-prompt-green {
+    background-color: #222;
+    color: @term-white;
+
+    &:hover {
+        background-color: @term-green;
+        color: @term-bright-white;
+    }
+}
+
+.button.is-plain, .button.is-prompt-cancel {
+    background-color: #222;
+    color: @term-white;
+
+    &:hover {
+        background-color: #666;
+        color: @term-bright-white;
+    }
+}
+
+.button.is-prompt-danger {
+    background-color: #222;
+    color: @term-white;
+
+    &:hover {
+        background-color: @tab-red;
+        color: @term-bright-white;
+    }
+}
+
+.button.is-inline-height {
+    height: 22px;
+}
+
+.button input.confirm-checkbox {
+    margin-right: 5px;
+}
+
+.cmd-hints {
+    .mono-font(10px);
+    display: flex;
+    flex-direction: row;
+    
+    .hint-item {
+        padding: 0px 5px 0px 5px;
+        border-radius: 0 0 3px 3px;
+        cursor: pointer;
+    }
+
+    .hint-item:not(:last-child) {
+        margin-right: 8px;
+    }
+
+    .hint-item.color-green {
+        color: black;
+        background-color: @tab-green;
+        
+        &:hover {
+            color: white;
+        }
+    }
+
+    .hint-item.color-nohover-green {
+        color: black;
+        background-color: @tab-green;
+        cursor: default;
+    }
+    
+    .hint-item.color-white {
+        color: black;
+        background-color: @term-white;
+        
+        &:hover {
+            background-color: @term-bright-white;
+        }
+    }
+
+    .hint-item.color-nohover-white {
+        color: black;
+        background-color: @term-white;
+        cursor: default;
+    }
+
+    .hint-item.color-blue {
+        color: black;
+        background-color: @tab-blue;
+        
+        &:hover {
+            color: white;
+        }
+    }
+
+    .hint-item.color-nohover-blue {
+        color: black;
+        background-color: @tab-blue;
+        cursor: default;
+    }
+}
+
+.markdown {
+    color: @term-white;
+    margin-bottom: 10px;
+
+    code {
+        background-color: black;
+        color: white;
+        .mono-font();
+        padding: 5px;
+    }
+
+    code.inline {
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+
+    .title {
+        color: white;
+        margin-top: 16px;
+        line-height: 1.25;
+        margin-bottom: 8px;
+    }
+
+    strong {
+        color: white;
+    }
+
+    a {
+        color: #32afff;
+    }
+
+    ul {
+        list-style-type: disc;
+        list-style-position: outside;
+        margin-left: 16px;
+    }
+
+    ol {
+        list-style-position: outside;
+        margin-left: 19px;
+    }
+
+    blockquote {
+        margin: 4px 10px 4px 10px;
+        border-radius: 3px;
+        background-color: #444;
+        padding: 2px 4px 2px 6px;
+    }
+
+    pre {
+        background-color: inherit;
+        margin: 4px 10px 4px 10px;
+        padding: 2px 4px 2px 6px;
+    }
+
+    .title.is-1 {
+        font-size: 32px;
+        border-bottom: 1px solid #777;
+        padding-bottom: 6px;
+    }
+    .title.is-2 {
+        font-size: 24px;
+        border-bottom: 1px solid #777;
+        padding-bottom: 6px;
+    }
+    .title.is-3 {
+        font-size: 20px;
+    }
+    .title.is-4 {
+        font-size: 16px;
+    }
+    .title.is-5 {
+        font-size: 14px;
+    }
+    .title.is-6 {
+        font-size: 14px;
+    }
+}
+
+.markdown > *:first-child {
+    margin-top: 0 !important;
+}
+
+.copied-indicator {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: white;
+    opacity: 0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    .mono-font(12px);
+    animation-name: fade-in-out;
+    animation-duration: 0.3s;
+}
+
+.loading-spinner {
+    display: inline-block;
+    position: absolute;
+    top: calc(40% - 8px);
+    left: 30px;
+    width: 20px;
+    height: 20px;
+
+    div {
+        box-sizing: border-box;
+        display: block;
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        margin: 2px;
+        border: 2px solid #777;
+        border-radius: 50%;
+        animation: loader-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+        border-color: #777 transparent transparent transparent;
+    }
+
+    div:nth-child(1) {
+        animation-delay: -0.45s;
+    }
+    
+    div:nth-child(2) {
+        animation-delay: -0.3s;
+    }
+    
+    div:nth-child(3) {
+        animation-delay: -0.15s;
+    }
+}
+
+#measure {
+    position: absolute;
+    z-index: -1;
+    top: -5000px;
+
+    .mono {
+        .mono-font();
+    }
+
+    .pre {
+        white-space: pre;
+    }
+}
+
+.text-button {
+    .mono-font(12px, 700);
+    color: @term-white;
+    cursor: pointer;
+    background-color: #171717;
+    outline: 2px solid #171717;
+
+    &:hover, &:focus {
+        color: @term-white;
+        background-color: #333;
+        outline: 2px solid #333;
+    }
+    
+    &.connect-button {
+        color: @term-green;
+        &:hover {
+            color: @term-green;
+        }
+    }
+    
+    &.disconnect-button {
+        color: @term-red;
+        &:hover {
+            color: @term-red;
+        }
+    }
+
+    &.success-button {
+        color: @term-green;
+        &:hover {
+            color: @term-green;
+        }
+    }
+
+    &.error-button {
+        color: @term-red;
+        &:hover {
+            color: @term-red;
+        }
+    }
+
+    &.grey-button {
+        color: #666;
+        &:hover {
+            color: #666;
+        }
+    }
+
+    &.disabled-button {
+        &:hover, &:focus {
+            outline: none;
+            background-color: #171717;
+        }
+        cursor: default;
+    }
+}
+
+.focus-indicator {
+    position: absolute;
+    display: none;
+    width: 5px;
+    border-radius: 3px;
+    height: calc(100% - 20px);
+    top: 10px;
+    left: 0;
+    z-index: 8;
+
+    &.selected {
+        display: block;
+        background-color: #666 !important;
+    }
+    
+    &.active, &.active.selected {
+        display: block;
+        background-color: @tab-blue !important;
+    }
+    
+    &.active.selected.fg-focus {
+        display: block;
+        background-color: @tab-green !important;
+    }
+}
+
+.focus-parent:hover .focus-indicator {
+    display: block;
+    background-color: #222;
+}
+
+#main .term-prompt {
+    font-size: 14px;
+    
+    i {
+        margin-right: 3px;
+    }
+
+    .term-prompt-branch {
+        color: @term-white;
+    }
+
+    .term-prompt-python {
+        color: @term-bright-magenta;
+    }
+
+    .term-prompt-remote {
+        i {
+            margin-right: 0;
+        }
+    }
+
+    .term-prompt-remote {
+        color: @term-bright-green;
+        
+        &.color-green {
+            color: @term-bright-green;
+        }
+
+        &.color-red {
+            color: @term-bright-red;
+        }
+
+        &.color-blue {
+            color: @term-bright-blue;
+        }
+
+        &.color-yellow {
+            color: @term-bright-yellow;
+        }
+
+        &.color-magenta {
+            color: @term-bright-magenta;
+        }
+
+        &.color-cyan {
+            color: @term-bright-cyan;
+        }
+
+        &.color-white {
+            color: @term-bright-white;
+        }
+
+        &.color-orange {
+            color: @tab-orange;
+        }
+    }
+
+    .term-prompt-cwd {
+        color: @term-bright-green;
+    }
+
+    .term-prompt-end {
+        color: @term-bright-green;
+    }
+}
+
+.remote-status {
+    font-size: 8px;
+    margin-right: 5px;
+    position: relative;
+    top: -3px;
+    color: #c4a000;
+
+    &.status-init, &.status-disconnected {
+        color: #c4a000;
+    }
+
+    &.status-connecting {
+        color: #c4a000;
+    }
+    
+    &.status-connected {
+        color: #4e9a06;
+    }
+    
+    &.status-error {
+        color: #cc0000;
+    }
+}
diff --git a/src/keyframes.less b/src/keyframes.less
new file mode 100644
index 000000000..7f237ea96
--- /dev/null
+++ b/src/keyframes.less
@@ -0,0 +1,36 @@
+@keyframes loader-ring {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes fade-in {
+    0% {
+        opacity: 0;
+    }
+
+    80% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes fade-in-out {
+    0% {
+        opacity: 0;
+    }
+
+    50% {
+        opacity: 0.5;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
diff --git a/src/lines.less b/src/lines.less
new file mode 100644
index 000000000..8ae3eb9b4
--- /dev/null
+++ b/src/lines.less
@@ -0,0 +1,532 @@
+.line.line-text {
+    flex-direction: row;
+    padding-top: 5px;
+
+    .line-content {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        margin-left: 10px;
+
+        .text {
+            font-size: 1rem;
+            color: #ddd;
+        }
+    }
+
+    &.collapsed {
+        .meta {
+            display: none;
+        }
+
+        min-height: 20px;
+    }
+
+    &.collapsed.top-border {
+        min-height: 26px;
+    }
+}
+
+.line.line-selected {
+    &.line-focused {
+        outline-left: 3px solid blue;
+    }
+}
+
+.line.line-cmd {
+    flex-direction: column;
+    scroll-margin-bottom: 20px;
+    position: relative;
+
+    .avatar {
+        cursor: pointer;
+        height: 36px;
+    }
+
+    .line-header {
+        display: flex;
+        flex-direction: row;
+        height: 36px;
+        width: 100%;
+
+        &.is-expanded {
+            height: auto;
+        }
+
+        &.is-collapsed {
+            height: 24px;
+        }
+
+        &.is-expanded.is-collapsed {
+            height: auto;
+        }
+        
+        .meta-wrap {
+            flex: 1 1 0px;
+            min-width: 0;
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+            margin-left: 10px;
+        }
+
+        .collapsed-indicator + .meta-wrap {
+            margin-left: 0;
+        }
+
+        .line-icon {
+            display: block;
+            visibility: hidden;
+            cursor: pointer;
+            padding: 3px;
+            font-size: 1.5rem;
+        }
+
+        .line-bookmark:hover {
+            color: white;
+        }
+        
+        .line-icon + .line-icon {
+            margin-left: 5px;
+        }
+        
+        .line-icon.active {
+            visibility: visible;
+            display: block;
+            
+            i.fa-star, i.fa-thumb-tack {
+                color: @term-bright-yellow;
+            }
+            
+            i.fa-bookmark {
+                color: @term-bright-blue;
+            }
+        }
+
+        &:hover .line-icon {
+            visibility: visible;
+            display: block;
+        }
+    }
+
+    .meta.meta-line1 {
+        margin-left: 2px;
+    }
+
+    &.has-rtnstate .terminal-wrapper {
+        padding-bottom: 0;
+        margin-bottom: -5px;
+    }
+
+    .image-wrapper {
+        padding: 2px 10px 5px 4px;
+        margin: 4px 8px 0 -4px;
+
+        .loading-div {
+            height: 20px;
+            margin-left: 50px;
+            .mono-font();
+        }
+
+        &.collapsed {
+            height: 0;
+            padding: 0;
+            margin: 0;
+            overflow: hidden;
+        }
+    }
+
+    .terminal-wrapper {
+        background-color: #000;
+        padding: 2px 10px 5px 4px;
+        margin: 4px 8px 0 -4px;
+        align-self: flex-start;
+
+        &.zero-height {
+            padding: 0;
+            margin: 0;
+        }
+
+        &.collapsed {
+            height: 0;
+            padding: 0;
+            margin: 0;
+            overflow: hidden;
+        }
+
+        .terminal-connectelem {
+            overflow-y: hidden;
+            overflow-x: hidden;
+        }
+
+        .terminal {
+            margin-right: 8px; /* needed to show scrollbar */
+        }
+
+        &.cmd-done .terminal .xterm-cursor {
+            display: none;
+        }
+
+        .terminal-loading-message {
+            position: absolute;
+            top: calc(40% - 8px);
+            left: 50px;
+            height: 20px;
+            .mono-font();
+        }
+    }
+
+    .cmd-rtnstate {
+        position: relative;
+
+        .cmd-rtnstate-label {
+            position: relative;
+            z-index: 2;
+            .mono-font(9px);
+            margin-left: 10px;
+            padding: 2px 5px 2px 5px;
+            color: #666;
+            background-color: black;
+            display: inline-block;
+        }
+
+        .cmd-rtnstate-sep {
+            height: 1px;
+            border-bottom: 1px solid #222;
+            position: relative;
+            top: -8px;
+            width: min(300px, 50%);
+            margin-bottom: -3px;
+        }
+
+        .cmd-rtnstate-diff {
+            color: @term-white;
+            .mono-font(12px);
+            white-space: pre;
+            margin-left: 15px;
+        }
+    }
+}
+
+.line {
+    margin: 0px 5px 0px 5px;
+    padding: 10px 5px 0px 12px;
+    display: flex;
+    line-height: 1.25;
+    overflow: hidden;
+    flex-shrink: 0;
+    position: relative;
+
+    &.collapsed {
+        margin: 2px 5px 0px 5px;
+        padding: 0px 5px 0px 12px;
+
+        .avatar {
+            height: 20px;
+            width: 38px;
+            
+            &.num-4 {
+                font-size: 13px;
+            }
+            
+            &.num-5 {
+                font-size: 11px;
+            }
+            
+            &.num-6 {
+                font-size: 9px;
+            }
+        }
+
+        .meta-wrap .meta.meta-line1 {
+            display: none;
+        }
+
+        .focus-indicator {
+            height: calc(100% - 8px);
+            top: 4px;
+        }
+
+        .line-icon {
+            padding-top: 0;
+            padding-bottom: 0;
+            font-size: 20px;
+            margin-top: -4px;
+            margin-bottom: -2px;
+        }
+    }
+
+    &.top-border, &.collapsed.top-border {
+        border-top: 1px solid #777;
+        padding-top: 5px;
+        margin-top: 5px;
+    }
+
+    &:nth-child(2) {
+        margin: 0px 5px 5px 5px;
+        padding: 0px 5px 5px 12px;
+        border-top: none;
+    }
+
+    &:hover .meta .termopts {
+        display: block;
+    }
+
+    &:hover .meta .settings {
+        display: block;
+    }
+
+    .avatar {
+        max-height: 38px;
+        width: 38px;
+        background-color: #555;
+        display: flex;
+        flex-shrink: 0;
+        align-items: center;
+        justify-content: center;
+        font-weight: bold;
+        color: white;
+        font-size: 16px;
+        border-radius: 5px;
+        position: relative;
+
+        &.rtnstate {
+            border: 1px solid white;
+        }
+        
+        .status-icon {
+            font-size: 8px;
+            position: absolute;
+            top: 2px;
+            right: 2px;
+        }
+
+        .comment-icon {
+            font-size: 10px;
+            position: absolute;
+            top: 0px;
+            right: -4px;
+        }
+
+        &.num-4 {
+            font-size: 13px;
+        }
+
+        &.num-5 {
+            font-size: 11px;
+        }
+
+        &.num-6 {
+            font-size: 9px;
+        }
+
+        &.status-done {
+            background-color: #555;
+        }
+
+        &.ephemeral {
+            opacity: 0.5;
+            outline: 1px solid white;
+        }
+
+        &.status-error {
+            .status-icon {
+                color: #cc0000;
+            }
+        }
+
+        &.status-hangup {
+            .status-icon {
+                color: @term-yellow;
+            }
+        }
+
+        &.status-running {
+            background-color: @soft-blue;
+        }
+
+        &.status-waiting {
+            background-color: @term-yellow;
+        }
+
+        &.status-detached {
+            background-color: @soft-blue;
+            .status-icon {
+                top: 3px;
+                right: 3px;
+                color: white;
+            }
+        }
+    }
+
+    .collapsed-indicator {
+        width: 20px;
+        font-size: 20px;
+        color: white;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        margin-left: 2px;
+        margin-right: 2px;
+        position: relative;
+        top: -2px;
+    }
+
+    .meta {
+        display: flex;
+        flex-direction: row;
+        font-size: 1rem;
+        margin-top: -4px;
+
+        .user {
+            color: lighten(@soft-blue, 10%);
+            font-weight: bold;
+            margin-top: 1px;
+            margin-right: 10px;
+        }
+        
+        .ts, .termopts, .renderer {
+            display: flex;
+            color: #aaa;
+            margin-top: 5px;
+            .mono-font(11px);
+        }
+
+        .renderer {
+            color: #aaa;
+            margin-left: 3px;
+            margin-top: 5px;
+            .mono-font(11px);
+            i {
+                display: inline-block;
+                font-size: 9px;
+                margin-right: 2px;
+                margin-top: 2px;
+            }
+        }
+
+        .settings {
+            display: none;
+            color: #aaa;
+            font-size: 11px;
+            margin-left: 5px;
+            margin-top: 5px;
+            cursor: pointer;
+        }
+
+        .termopts {
+            color: #aaa;
+            margin-top: 5px;
+            .mono-font(11px);
+            display: none;
+
+            .resize-button {
+                cursor: pointer;
+                padding-left: 3px;
+                padding-right: 3px;
+            }
+        }
+        
+        .metapart-mono {
+            color: #ddd;
+            margin-left: 8px;
+            margin-top: 4px;
+            white-space: nowrap;
+            .mono-font(14px);
+        }
+        
+        .cmdtext {
+            color: #fff;
+            font-size: 16px;
+            font-weight: bold;
+            overflow: hidden;
+            margin-left: 0;
+        }
+
+        .cmdtext-overflow {
+            flex-shrink: 0;
+            padding-right: 2px;
+            color: white;
+            cursor: pointer;
+            .mono-font(16px);
+            margin-top: 4px;
+        }
+    }
+
+    .cmdtext-expanded-wrapper {
+        margin-top: 2px;
+        padding-left: 6px;
+        overflow-y: auto;
+        max-height: 54px;
+        border-left: 2px solid #333;
+        margin-left: 3px;
+
+        .cmdtext-expanded {
+            white-space: pre;
+            .mono-font(14px);
+            color: white;
+            padding-bottom: 5px;
+        }
+    }
+
+    .cmd-hints {
+        position: absolute;
+        bottom: 0px;
+        right: 0px;
+        display: none;
+
+        .hint-item {
+            border-radius: 3px;
+        }
+    }
+
+    &:hover .cmd-hints {
+        display: flex;
+    }
+}
+
+.line.line-invalid {
+    color: @term-white;
+    margin-left: 5px;
+}
+
+.lines {
+    display: flex;
+    flex-direction: column;
+    height: 80vh;
+    overflow-y: scroll;
+    padding: 10px 0 10px 0;
+    flex-grow: 1;
+    position: relative;
+
+    .line:nth-child(2) {
+        padding-top: 1px;
+    }
+
+    .lines-spacer {
+        flex-grow: 1;
+    }
+
+    .line-sep {
+        display: flex;
+        align-items: center;
+        .mono-font(11px);
+        color: #aaa;
+    }
+
+    .line-sep::before, .line-sep::after {
+        content: '';
+        height: 2px;
+        background-color: #ccc;
+        flex-grow: 1;
+    }
+
+    .line-sep::before {
+        margin-right: 1rem;
+    }
+
+    .line-sep::after {
+        margin-left: 1rem;
+    }
+}
diff --git a/src/modals.less b/src/modals.less
new file mode 100644
index 000000000..2b41f068a
--- /dev/null
+++ b/src/modals.less
@@ -0,0 +1,605 @@
+// modal css (also includes settings-field)
+
+.modal {
+    z-index: 105;
+
+    .modal-background {
+        background-color: rgba(10,10,10,.6);
+    }
+}
+
+.tos-modal {
+    a:hover {
+        text-decoration: underline;
+    }
+
+    .content {
+        .mono-font(13px);
+    }
+}
+
+.disconnected-modal {
+    .modal-content {
+        footer {
+            .footer-text-link {
+                .mono-font(12px);
+                color: @term-white;
+                cursor: pointer;
+            }
+        }
+    }
+
+    .inner-content {
+        .ws-log {
+            padding: 5px;
+            background-color: black;
+            height: 250px;
+            overflow: auto;
+            
+            .ws-logline {
+                .mono-font(12px);
+                color: @term-white;
+            }
+        }
+    }
+}
+
+.modal.prompt-modal.client-stop-modal {
+    footer {
+        justify-content: center;
+    }
+
+    .inner-content {
+        display: flex;
+        flex-direction: column;
+        padding: 20px;
+        .progress-container {
+            margin-top: 20px;
+        }
+        .progress-text {
+            color: @term-white;
+            align-self: center;
+            font-size: 12px;
+        }
+    }
+}
+
+.modal.alert-modal {
+    z-index: 205;
+    
+    footer {
+        justify-content: center;
+
+        .button {
+            margin-left: 20px;
+        }
+
+        .button:first-child {
+            margin-left: 0;
+        }
+    }
+}
+
+.modal.settings-modal {
+    footer {
+        justify-content: center;
+
+        .button {
+            margin-left: 20px;
+        }
+
+        .button:first-child {
+            margin-left: 0;
+        }
+    }
+
+    .dropdown {
+        .dropdown-menu .dropdown-content {
+            .dropdown-item {
+                color: white;
+                cursor: pointer;
+                &:hover {
+                    background-color: #333;
+                }
+            }
+        }
+
+        .dropdown-menu {
+            max-height: 120px;
+            overflow: auto;
+        }
+    }
+}
+
+.modal.prompt-modal {
+    .modal-content {
+        border-radius: 5px;
+        border: 5px solid #333;
+    }
+
+    header {
+        background-color: #000;
+        display: flex;
+        flex-direction: row;
+        padding: 10px;
+        position: relative;
+
+        .modal-title {
+            color: @prompt-green;
+            .mono-font(24px);
+        }
+
+        .close-icon {
+            position: absolute;
+            right: 10px;
+            top: 6px;
+            cursor: pointer;
+            padding: 3px;
+            color: #aaa;
+            font-size: 20px;
+
+            &:hover {
+                color: #fff;
+            }
+        }
+    }
+
+    .inner-content {
+        background-color: #222;
+        padding: 15px 10px 15px 10px;
+        color: @term-white;
+
+        margin: 0;
+
+        &.is-hidden {
+            display: none;
+        }
+    }
+
+    footer {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        color: @term-white;
+        background-color: #222;
+        padding: 15px 10px 10px 10px;
+        border-top: 1px solid #666;
+    }
+}
+
+.modal.prompt-modal.remotes-modal {
+    .modal-content {
+        min-width: 850px;
+    }
+    
+    .inner-content {
+        display: flex;
+        flex-direction: row;
+        align-items: stretch;
+        padding: 0;
+        max-height: 80vh;
+
+        .remotes-menu {
+            flex: 0 0 200px;
+            min-height: 450px;
+            border-right: 1px solid #666;
+            overflow-y: auto;
+            height: 100px;
+
+            .remote-menu-item {
+                border-top: 1px solid #666;
+                padding: 5px;
+                display: flex;
+                flex-direction: row;
+                cursor: pointer;
+
+                &.add-remote {
+                    font-size: 13px;
+                    padding: 10px 5px 10px 5px;
+                }
+
+                &:hover {
+                    background-color: #333;
+                }
+
+                &.is-selected {
+                    background-color: @active-menu-color;
+
+                    .remote-name .remote-name-secondary {
+                        color: white;
+                    }
+                }
+                
+                &:first-child {
+                    border-top: 0;
+                }
+
+                .remote-status-light {
+                    width: 15px;
+                    margin-top: -2px;
+                }
+
+                .remote-name {
+                    flex-grow: 1;
+
+                    .remote-name-primary {
+                        font-size: 12px;
+                        font-weight: bold;
+                    }
+
+                    .remote-name-secondary {
+                        font-size: 11px;
+                        color: #777;
+                    }
+                }
+            }
+        }
+
+        .remote-detail {
+            padding: 10px;
+            flex-grow: 1;
+            font-size: 12px;
+            display: flex;
+            flex-direction: column;
+
+            .settings-field {
+                margin-top: 5px;
+            }
+
+            * {
+                flex-shrink: 0;
+            }
+
+            .detail-subtitle {
+                font-size: 18px;
+                margin-bottom: 10px;
+                margin-top: 10px;
+            }
+
+            .title {
+                color: white;
+                padding-bottom: 8px;
+                margin-bottom: 0;
+                border-bottom: 1px solid #777;
+            }
+
+            .terminal-wrapper {
+                margin-left: 0;
+                margin-bottom: 0;
+
+                &.has-message {
+                    margin-top: 0;
+                }
+
+                box-shadow: none;
+                border: 1px solid #777;
+            }
+
+            .action-buttons {
+                display: flex;
+                flex-direction: row;
+                gap: 10px;
+                margin-top: 2px;
+            }
+
+            .remote-message {
+                margin-top: 5px;
+                padding: 8px;
+                border-radius: 5px 5px 0 0;
+                background-color: #333;
+
+                i.fa-check {
+                    color: @term-green;
+                }
+                
+                &.is-ok {
+                    
+                }
+
+                .message-row {
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                }
+
+                .remote-status {
+                    position: relative;
+                    top: -1px;
+                }
+
+                .button {
+                    height: 22px;
+                }
+            }
+
+            .settings-field {
+                .update-auth-button {
+                    visibility: hidden;
+                }
+                
+                &:hover {
+                    .update-auth-button {
+                        visibility: visible;
+                    }
+
+                    .hide-hover {
+                        display: none;
+                    }
+                }
+            }
+
+            &.auth-editing, &.create-remote {
+                .settings-field.align-top {
+                    align-items: flex-start;
+
+                    .settings-label {
+                        margin-top: 8px;
+                    }
+
+                    .settings-input {
+                        align-items: flex-start;
+                    }
+                }
+
+                .settings-label {
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                }
+
+                .settings-field .settings-input .undo-icon {
+                    cursor: pointer;
+                    font-size: 18px;
+                    margin-left: 5px;
+                }
+
+                .editremote-dropdown .dropdown-trigger button {
+                    width: 120px;
+                    justify-content: flex-start;
+                }
+
+                .settings-field .raw-input {
+                    width: 120px;
+                }
+
+                .settings-input input {
+                    width: 250px;
+                }
+                
+                .dropdown .dropdown-trigger button {
+                    font-size: 12px;
+                }
+                
+                .dropdown .dropdown-item {
+                    font-size: 12px;
+                    padding: 5px 5px 5px 12px;
+                }
+
+                .settings-input {
+                    .info-message {
+                        margin-left: 22px;
+                    }
+                }
+
+                .settings-label {
+                    .info-message {
+                        margin-right: 15px;
+                    }
+                }
+            }
+        }
+    }
+
+    .terminal-wrapper {
+        position: relative;
+        background-color: #000;
+        padding: 2px 10px 5px 4px;
+        margin: 5px 5px 10px 5px;
+        box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.3);
+        &.focus {
+            box-shadow: 0 0 3px 3px rgba(255, 255, 255, 0.3);
+        }
+
+        .term-tag {
+            position: absolute;
+            top: 0;
+            right: 0;
+            background-color: @term-red;
+            color: white;
+            z-index: 110;
+            padding: 4px;
+            .mono-font(10px);
+        }
+    }
+}
+
+.modal.welcome-modal {
+    footer {
+        .prev-button {
+            margin-left: 15px;
+            width: 100px;
+        }
+
+        .prev-spacer {
+            margin-left: 15px;
+            width: 100px;
+        }
+
+        .next-button {
+            margin-right: 15px;
+            width: 100px;
+        }
+
+        .dots {
+            font-size: 10px;
+
+            i {
+                margin-left: 5px;
+            }
+        }
+    }
+}
+
+.client-settings-modal {
+    .settings-field {
+        .settings-label {
+            width: 150px;
+        }
+    }
+}
+
+.settings-field {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    font-size: 14px;
+
+    &.settings-field.sub-field {
+        .settings-label {
+            font-weight: normal;
+            font-size: 13px;
+            text-align: right;
+            padding-right: 20px;
+        }
+    }
+
+    &.settings-error {
+        font-size: 14px;
+        color: @term-red;
+        margin-top: 20px;
+        padding: 10px;
+        border-radius: 5px;
+        background-color: #200707;
+        border: 1px solid @term-red;
+        font-weight: bold;
+
+        .error-dismiss {
+            padding: 2px;
+            cursor: pointer;
+        }
+    }
+
+    .settings-label {
+        font-weight: bold;
+        color: #fff;
+        width: 120px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        .info-message {
+            margin-left: 5px;
+        }
+    }
+
+    .settings-input {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        &.inline-edit.edit-not-active {
+            cursor: pointer;
+
+            i.fa-pen {
+                margin-left: 5px;
+            }
+
+            &:hover {
+                text-decoration: underline;
+                text-decoration-style: dotted;
+            }
+        }
+
+        &.settings-clickable {
+            cursor: pointer;
+        }
+
+        &.inline-edit.edit-active {
+            input.input {
+                padding: 0;
+                height: 20px;
+                font-size: 12px;
+            }
+
+            .button {
+                height: 20px;
+            }
+        }
+        
+        input {
+            padding: 4px;
+            border-radius: 3px;
+        }
+
+        .control {
+            font-size: 12px;
+        }
+        
+        .tab-color-icon.color-green {
+            color: desaturate(@tab-green, 30%);
+        }
+        .tab-color-icon.color-orange {
+            color: desaturate(@tab-orange, 30%);
+        }
+        .tab-color-icon.color-red {
+            color: desaturate(@tab-red, 20%);
+        }
+        .tab-color-icon.color-yellow {
+            color: desaturate(@tab-yellow, 30%);
+        }
+        .tab-color-icon.color-blue {
+            color: desaturate(@tab-blue, 20%);
+        }
+        .tab-color-icon.color-magenta {
+            color: desaturate(@tab-magenta, 20%);
+        }
+        .tab-color-icon.color-cyan {
+            color: desaturate(@tab-cyan, 20%);
+        }
+        .tab-color-icon.color-white {
+            color: @term-white;
+        }
+        .tab-color-icon.color-black {
+            color: lighten(@tab-black, 20%);
+        }
+
+        .tab-colors {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+
+            .tab-color-sep {
+                padding-left: 10px;
+                padding-right: 10px;
+                font-weight: bold;
+            }
+
+            .tab-color-cur {
+                font-size: 12px;
+                width: 100px;
+            }
+
+            .tab-color-select {
+                cursor: pointer;
+                margin: 5px;
+                line-height: 1;
+                &:hover {
+                    outline: 2px solid white;
+                }
+            }
+        }
+
+        .action-text {
+            margin-left: 20px;
+            font-size: 12px;
+            color: @term-red;
+        }
+
+        .settings-share-link {
+            width: 160px;
+        }
+    }
+
+    &:not(:first-child) {
+        margin-top: 10px;
+    }
+}
diff --git a/src/sh2.less b/src/sh2.less
index 9d38ada80..a8db8723f 100644
--- a/src/sh2.less
+++ b/src/sh2.less
@@ -34,20 +34,21 @@
 
 @active-menu-color: rgb(0, 71, 171);
 
+@import "utils.less";
+@import "webshare.less";
+@import "views.less";
+@import "sidebar.less";
+@import "modals.less"; // includes settings
+@import "comps.less";  // includes terminal
+@import "tabs.less";
+@import "cmd.less";
+
+// global settings / overrides
+
 :root {
     --fa-style-family: "Font Awesome 6 Sharp";
 }
 
-.display-none {
-    display: none;
-}
-
-.mono-font(@size: inherit, @weight: inherit) {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: @size;
-    font-weight: @weight;
-}
-
 html, body, #app, #main {
     background-color: #000;
     height: 100vh;
@@ -77,6 +78,12 @@ body::-webkit-scrollbar {
     background: white;
 }
 
+input[type=checkbox] {
+    cursor: pointer;
+}
+
+
+// main layout
 #main {
     height: 100vh;
     display: flex;
@@ -202,3408 +209,10 @@ body::-webkit-scrollbar {
     }
 }
 
-.alt-view {
-    background-color: #111;
-    overflow-y: auto;
-    flex-grow: 1;
-    
-    .alt-title {
-        margin: 20px 10px 0px 5px;
-        padding-left: 10px;
-        padding-bottom: 12px;
-        .mono-font(1.5rem);
-        color: @term-bright-white;
-        border-bottom: 1px solid white;
-    }
-
-    .alt-list {
-        color: white;
-        margin: 4px 10px 5px 5px;
-        border-bottom: 1px solid white;
-    }
-
-    .no-content {
-        color: @term-white;
-        padding: 30px 10px 35px 10px;
-        border-bottom: 1px solid white;
-    }
-
-    .close-button {
-        position: absolute;
-        padding: 4px;
-        font-size: 24px;
-        color: #aaa;
-        right: 15px;
-        top: 18px;
-        cursor: pointer;
-
-        &:hover {
-            color: #fff;
-        }
-    }
-
-    .alt-help {
-        color: @term-white;
-        margin-top: 20px;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        font-size: 12px;
-        margin-bottom: 10px;
-
-        .help-entry {
-            margin-left: 20px;
-        }
-    }
-}
-
-.history-view {
-    color: #ccc;
-
-    .close-div {
-        padding-top: 10px;
-        font-size: 24px;
-
-        i {
-            padding: 5px 5px 5px 10px;
-            cursor: pointer;
-        }
-
-        i:hover {
-            color: #fff;
-        }
-    }
-
-    .header {
-        display: flex;
-        flex-direction: row;
-        margin: 10px;
-        align-items: flex-start;
-
-        .history-title {
-            margin-top: 5px;
-            .mono-font(1.5rem);
-            font-weight: bold;
-            color: white;
-        }
-
-        input {
-            background-color: #333;
-            color: white;
-
-            i {
-                color: white;
-            }
-        }
-    }
-
-    .history-search {
-        flex-grow: 1;
-        margin-top: 5px;
-        margin-left: 15px;
-
-        .main-search {
-            .field {
-                width: 80%;
-            }
-
-            input::placeholder {
-                color: #777;
-            }
-        }
-
-        .advanced-search {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            
-            .session-dropdown, .remote-dropdown {
-                .dropdown-item {
-                    color: white;
-                    cursor: pointer;
-                    &:hover {
-                        background-color: #666;
-                    }
-                }
-
-                .dropdown-content {
-                    border: 1px solid #333;
-                    border-radius: 3px;
-                }
-            }
-
-            .remote-dropdown {
-                margin-left: 15px;
-            }
-
-            .search-checkbox {
-                margin-left: 15px;
-                border: 1px solid #777;
-                padding: 5px 10px 5px 10px;
-                font-size: 12px;
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-
-                &.is-active {
-                    background-color: #666;
-                }
-
-                .checkbox-container {
-                    position: relative;
-                    top: 2px;
-                }
-
-                .checkbox-text {
-                    padding-left: 8px;
-                    cursor: pointer;
-                }
-            }
-
-            .fromts {
-                font-size: 12px;
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-                margin-left: 15px;
-                
-                .fromts-text {
-                }
-            }
-
-            .reset-button {
-                cursor: pointer;
-                margin-left: 15px;
-                font-size: 12px;
-                border: 1px solid #777;
-                padding: 5px 10px 5px 10px;
-                
-                &:hover {
-                    background-color: #666;
-                }
-            }
-        }
-    }
-
-    .control-bar {
-        display: flex;
-        flex-direction: row;
-        margin-bottom: 5px;
-        margin-right: 10px;
-        margin-top: 10px;
-        margin-left: 10px;
-        align-items: center;
-
-        .is-hidden {
-            display: none;
-        }
-
-        &.is-top {
-            border-top: 1px solid #333;
-            padding-top: 4px;
-        }
-
-        .control-checkbox {
-            cursor: pointer;
-            color: #777;
-            font-size: 18px;
-            width: 24px;
-            margin-left: 14px;
-
-            &:hover {
-                color: white;
-            }
-        }
-
-        .control-button {
-            cursor: pointer;
-            color: #aaa;
-            margin-left: 10px;
-            font-size: 14px;
-
-            &.is-disabled {
-                cursor: default;
-                i, span {
-                    display: none;
-                }
-            }
-
-            &:hover {
-                color: white;
-            }
-
-            &.delete-button.is-active {
-                color: @term-bright-red !important;
-            }
-        }
-
-        .spacer {
-            flex-grow: 1;
-        }
-
-        .showing-text {
-            font-size: 16px;
-            margin-right: 10px;
-        }
-
-        .showing-btn {
-            padding: 0 5px 0 5px;
-            cursor: pointer;
-            font-size: 16px;
-            font-weight: bold;
-
-            &.is-disabled {
-                cursor: default;
-                color: #777;
-                font-weight: normal;
-            }
-        }
-
-        .btn-spacer {
-            width: 10px;
-        }
-    }
-
-    .no-items {
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-        .mono-font(14px);
-        padding: 30px 0 30px 0;
-        border: 1px solid white;
-        border-radius: 3px;
-        margin: 20px 50px 20px 20px;
-    }
-    
-    .history-table {
-        margin: 0px 10px 10px 10px;
-        table-layout: fixed;
-        border-top: 2px solid #ccc;
-
-        tr.active-history-item {
-            td {
-                padding-right: 10px;
-                
-                .line-container {
-                    padding: 0px 10px 10px 10px;
-                    overflow-x: auto;
-                    background-color: black;
-                }
-
-                .line-context {
-                    .mono-font(12px);
-                    margin-left: 20px;
-                    margin-bottom: 10px;
-                    margin-top: 10px;
-                    display: flex;
-                    flex-direction: row;
-
-                    .vic-btn {
-                        cursor: pointer;
-                        color: #ccc;
-
-                        &:hover {
-                            color: white;
-                        }
-                    }
-                }
-
-                .no-line-context {
-                    height: 10px;
-                }
-
-                .line-container.no-line {
-                    .mono-font(12px);
-                    display: flex;
-                    flex-direction: row;
-                    align-items: center;
-                    justify-content: center;
-                    padding: 20px;
-                }
-            }
-        }
-
-        tr.history-item {
-            padding: 0 10px 0 10px;
-            display: flex;
-            border-top: 1px solid #333;
-            align-items: center;
-
-            &.is-selected {
-                background-color: #003;
-            }
-
-            &.is-selected:hover {
-                background-color: #336;
-            }
-
-            &:hover {
-                background-color: #333;
-
-                td.bookmark i {
-                    display: block;
-                }
-            }
-
-            td {
-                padding-top: 5px;
-                padding-bottom: 5px;
-                padding-left: 5px;
-            }
-
-            td.selectbox {
-                flex: 0 0 auto;
-                flex-basis: 24px;
-                font-size: 14px;
-                cursor: pointer;
-            }
-
-            td.bookmark {
-                flex: 0 0 auto;
-                flex-basis: 20px;
-                font-size: 14px;
-                cursor: pointer;
-
-                i {
-                    position: relative;
-                    top: 1px;
-                    display: none;
-                }
-            }
-
-            td.ts {
-                font-size: 12px;
-                flex: 0 0 auto;
-                flex-basis: 65px;
-                font-weight: bold;
-            }
-
-            td.session {
-                font-size: 12px;
-                flex: 0 0 auto;
-                flex-basis: 120px;
-                text-overflow: ellipsis;
-            }
-
-            td.remote {
-                .mono-font(12px);
-                flex: 0 0 auto;
-                flex-basis: 150px;
-                text-overflow: ellipsis;
-                padding-right: 5px;
-                max-width: 150px;
-                overflow: hidden;
-            }
-
-            td.cmdstr {
-                .mono-font(12px);
-                color: white;
-                flex: 1 0 0;
-                padding-left: 20px;
-                border-radius: 3px;
-                white-space: pre;
-                max-height: 70px;
-                cursor: pointer;
-                min-width: 300px;
-                padding-top: 4px;
-                padding-bottom: 4px;
-                overflow: hidden;
-
-                .use-button {
-                    visibility: hidden;
-                }
-
-                &:hover .use-button {
-                    visibility: visible;
-                }
-            }
-        }
-    }
-}
-
-.cmdstr-code {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    padding: 0px 10px 0px 0;
-
-    &.is-large {
-        .use-button {
-            height: 28px;
-            width: 28px;
-        }
-
-        .code-div code {
-            .mono-font(14px);
-        }
-    }
-
-    &.limit-height .code-div {
-        max-height: 58px;
-    }
-
-    &.limit-height.is-large .code-div {
-        max-height: 68px;
-    }
-
-    .use-button {
-        flex-grow: 0;
-        padding: 3px;
-        border-radius: 3px 0 0 3px;
-        font-size: 12px;
-        height: 22px;
-        width: 22px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        align-self: flex-start;
-        cursor: pointer;
-        background-color: black;
-
-        &:hover {
-            background-color: #777;
-        }
-    }
-
-    .code-div {
-        background-color: black;
-        display: flex;
-        flex-direction: row;
-        min-width: 100px;
-        overflow: auto;
-        border-left: 1px solid #777;
-        
-        code {
-            flex-shrink: 0;
-            min-width: 100px;
-            color: white;
-            .mono-font(12px);
-            white-space: pre;
-            padding: 2px 8px 2px 8px;
-            background-color: black;
-        }
-    }
-
-    .copy-control {
-        width: 0;
-        position: relative;
-        display: block;
-        visibility: hidden;
-        
-        .inner-copy {
-            position: absolute;
-            bottom: -1px;
-            right: -20px;
-            font-size: 9px;
-            padding: 2px;
-            padding-left: 4px;
-            cursor: pointer;
-            width: 20px;
-            background-color: black;
-            border: 1px solid #333;
-            color: #777;
-            &:hover {
-                color: white;
-            }
-        }
-    }
-
-    &:hover .copy-control {
-        visibility: visible !important;
-    }
-}
-
-.webshare-view {
-    .webshare-item {
-        padding: 4px 5px 8px 15px;
-        margin-bottom: 4px;
-        border-top: 1px solid white;
-        display: flex;
-        flex-direction: row;
-        position: relative;
-        min-height: 55px;
-        align-items: center;
-
-        &:first-child {
-            border-top: 0;
-        }
-
-        .webshare-vic {
-            width: 200px;
-
-            .webshare-vic-link {
-                cursor: pointer;
-                
-                &:hover {
-                    text-decoration: underline;
-                }
-            }
-        }
-
-        .actions {
-            display: flex;
-            flex-direction: row;
-            gap: 10px;
-        }
-
-        &:hover {
-            background-color: #222;
-        }
-    }
-}
-
-.bookmarks-view {
-    .bookmarks-list {
-        color: white;
-        margin: 4px 10px 5px 5px;
-
-        .no-bookmarks {
-            color: @term-white;
-            padding: 30px 10px 35px 10px;
-            border-bottom: 1px solid white;
-        }
-    }
-
-    .bookmark {
-        border-bottom: 1px solid #777;
-        padding: 4px 5px 8px 15px;
-        margin-bottom: 4px;
-        position: relative;
-        display: flex;
-        flex-direction: row;
-        max-width: 100%;
-
-        .focus-indicator {
-            top: 0;
-            height: calc(100% - 4px);
-        }
-
-        &.is-editing {
-            padding-top: 8px;
-            padding-bottom: 12px;
-        }
-
-        &.pending-delete {
-            background-color: #522;
-        }
-        
-        .bookmark-content, .bookmark-edit {
-            flex-grow: 1;
-            max-width: calc(100% - 50px);
-        }
-
-        label {
-            color: white;
-            margin-bottom: 4px;
-        }
-
-        textarea {
-            width: 80%;
-            min-width: 50%;
-            color: white;
-            background-color: black;
-
-            &.mono-font {
-                .mono-font(12px);
-            }
-        }
-
-        .bookmark-id-div {
-            display: none;
-            position: absolute;
-            color: #666;
-            right: 5px;
-            bottom: 2px;
-            .mono-font(8px);
-        }
-
-        &:hover .bookmark-id-div {
-            display: block;
-        }
-
-        .bookmark-controls {
-            display: flex;
-            flex-direction: row;
-            font-size: 16px;
-            visibility: hidden;
-            color: @term-white;
-
-            .bookmark-control:first-child {
-                margin-left: 0;
-            }
-
-            .bookmark-control {
-                margin-left: 10px;
-                cursor: pointer;
-                padding: 2px;
-
-                &:hover {
-                    color: @term-bright-white;
-                }
-            }
-        }
-
-        &:hover .bookmark-controls {
-            visibility: visible;
-        }
-    }
-}
-
-.screen-tabs-container {
-    position: relative;
-    
-    &:hover {
-        z-index: 200;
-    }
-
-    &:hover .cmd-hints {
-        display: flex;
-    }
-
-    .cmd-hints {
-        position: absolute;
-        bottom: -18px;
-        left: 0px;
-        display: flex;
-    }
-}
-
-.screen-tabs {
-    height: 30px;
-    display: flex;
-    flex-direction: row;
-    border-top: 1px solid #666;
-    border-right: 1px solid #eee;
-    overflow-x: overlay;
-    overflow-y: visible;
-    align-items: center;
-
-    &::-webkit-scrollbar {
-        display: none;
-        z-index: 5;
-        background-color: #fff;
-        height: 4px;
-        width: 0;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background: #777;
-    }
-
-    &.scrolling::-webkit-scrollbar {
-        display: block;
-    }
-
-    .screen-tab {
-        height: 30px;
-        min-width: 80px;
-        width: 150px;
-        line-height: 1.0;
-        flex-shrink: 1;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-size: 12px;
-        font-weight: 500;
-        padding-left: 0;
-        padding-right: 0;
-        cursor: pointer;
-        position: relative;
-        border-right: 1px solid #777;
-
-        .tab-name {
-            flex-grow: 1;
-            flex-basis: 50px;
-            padding-left: 2px;
-            padding-right: 2px;
-            text-align: center;
-        }
-
-        &.is-active {
-            box-shadow: 0 3px 0 #fff inset;
-            border-top: none;
-            opacity: 1.0;
-        }
-
-        &.is-archived {
-            .fa.fa-archive {
-                margin-right: 4px;
-            }
-        }
-
-        .tab-index {
-            font-size: 11px;
-            position: absolute;
-            right: 2px;
-            top: 4px;
-            bottom: 0;
-            font-weight: normal;
-            display: none;
-            padding-left: 4px;
-            padding-top: 6px;
-            background-color: inherit;
-        }
-
-        .tab-gear {
-            position: absolute;
-            right: 5px;
-            top: 4px;
-            bottom: 0;
-            font-weight: normal;
-            display: none;
-            padding-left: 5px;
-            padding-top: 5px;
-            background-color: inherit;
-        }
-
-        &:hover {
-            .tab-gear {
-                display: block;
-
-                &:hover {
-                    display: block;
-                    top: 4px;
-                    padding-top: 4px;
-                    right: 3px;
-                    padding-left: 4px;
-                    i {
-                        font-size: 15px;
-                    }
-                }
-            }
-        }
-    }
-
-    &:hover .screen-tab .tab-index {
-        display: block;
-    }
-
-    &:hover .screen-tab:hover .tab-index {
-        display: none;
-    }
-
-    .screen-tab.new-screen {
-        width: 30px;
-        min-width: 30px;
-        background-color: black;
-        border-right: none;
-        color: #ccc;
-        cursor: pointer;
-
-        &:hover {
-            background-color: #666;
-            border-right: 1px solid #ccc;
-        }
-    }
-}
-
-.main-sidebar .logo-header {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    border-bottom: 2px solid #ddd;
-    margin-left: -4px;
-    margin-right: -5px;
-    
-    .title.prompt-logo-small {
-        padding-left: 5px;
-        padding-top: 8px;
-        padding-bottom: 8px;
-        margin-bottom: 0;
-        .mono-font(1.5rem);
-        background-color: darken(rgb(0, 177, 10), 30%);
-        color: rgb(0, 177, 10);
-        position: relative;
-        white-space: nowrap;
-        overflow: hidden;
-        flex-shrink: 0;
-        
-        &.is-dev {
-            background-color: darken(rgb(177, 0, 10), 30%);
-        }
-        
-        &.collapsed {
-            padding-left: 1px;
-        }
-        
-        .title-cursor {
-            position: relative;
-            bottom: 3px;
-            left: 3px;
-            .mono-font(1.2rem);
-        }
-    }
-}
-
-.main-sidebar {
-    border-right: 1px solid #aaa;
-    padding: 0 5px 5px 5px;
-    width: 200px;
-    overflow-x: hidden;
-    display: flex;
-    flex-direction: column;
-    color: #ddd;
-    position: relative;
-    background-color: darken(rgb(0, 177, 10), 30%);
-    flex-shrink: 0;
-
-    &.is-dev {
-        background-color: darken(rgb(177, 0, 10), 30%);
-    }
-
-    .menu {
-        padding-top: 10px;
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-
-        .spacer {
-            flex-grow: 1;
-        }
-
-        .bottom-spacer {
-            height: 10px;
-        }
-
-        a:hover {
-            color: white;
-        }
-    }
-
-    .menu-label {
-        color: #bbb;
-
-        a {
-            color: #bbb;
-        }
-    }
-
-    p.menu-label {
-        margin-bottom: 0px;
-    }
-
-    .menu-list {
-        li.new-session, li.add-remote {
-            a {
-                color: #666;
-                font-size: 13px;
-            }
-            
-            .fa {
-                font-size: 10px;
-            }
-        }
-
-        li {
-            .mono-font();
-        }
-
-        li.menu-loading-message {
-            .mono-font();
-        }
-
-        li.menu-history, li.menu-bookmarks, li.menu-settings, li.menu-websharing {
-            margin-left: -10px;
-        }
-
-        li.menu-bookmarks {
-            margin-left: -10px;
-        }
-
-        li {
-            .hotkey {
-                visibility: hidden;
-            }
-
-            &:hover .hotkey {
-                visibility: visible;
-            }
-        }
-    }
-
-    .menu-list.session-menu-list {
-        li a {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-
-            .session-num {
-                width: 24px;
-                margin-left: -12px;
-            }
-
-            .session-gear {
-                visibility: hidden;
-            }
-
-            &:hover .session-gear {
-                color: #ccc;
-                visibility: visible;
-
-                &:hover {
-                    color: white;
-                }
-            }
-        }
-    }
-
-    .menu-list.remotes-menu-list {
-        max-height: 35%;
-        overflow-y: auto;
-    }
-
-    .menu-list li.remote-menu-item {
-        a {
-            .mono-font(11px);
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-    }
-
-    .menu-list li a {
-        color: #bbb;
-        white-space: nowrap;
-        padding: 3px 5px 3px 12px;
-        vertical-align: middle;
-        position: relative;
-        font-size: 13px;
-
-        .user-status {
-            position: absolute !important;
-            top: 24px !important;
-            left: 32px !important;
-        }
-
-        .avatar {
-            width: 24px;
-            height: 24px;
-            margin-right: 5px;
-            vertical-align: middle;
-        }
-
-        .session-num {
-            color: #777;
-            font-size: 10px;
-        }
-
-        &.is-active .small-text {
-            color: white;
-        }
-
-        .small-text {
-            color: #777;
-            font-size: 10px;
-        }
-
-        &.is-active {
-            color: #ddd;
-            font-weight: bold;
-            background-color: @active-menu-color;
-
-            .session-num {
-                color: #aaa;
-                font-weight: normal;
-            }
-        }
-
-        .sub-label {
-            font-size: 12px;
-            font-style: italic;
-        }
-
-        &.activity {
-            font-weight: bold;
-            color: #ddd;
-
-            .tag {
-                margin-left: 4px;
-                padding: 0 5px 0 5px;
-                position: relative;
-                top: -1px;
-            }
-        }
-
-        &.is-active:hover {
-            background-color: #3273dc;
-        }
-
-        &:hover {
-            background-color: #444;
-            color: #ddd;
-        }
-
-        .status {
-            font-size: 8px;
-            margin-right: 5px;
-            position: relative;
-            top: -3px;
-            color: #4e9a06;
-
-            &.offline {
-                color: #cc0000;
-            }
-        }
-    }
-
-    &.collapsed {
-        width: 55px;
-
-        .collapse-container {
-            right: 17px;
-        }
-
-        .menu {
-            display: none;
-        }
-    }
-
-    .collapse-container {
-        position: absolute;
-        right: 3px;
-        top: 42px;
-
-        .arrow-container {
-            color: #777;
-            padding: 5px;
-            cursor: pointer;
-
-            &:hover {
-                color: #ddd;
-            }
-        }
-    }
-}
-
-.line.line-text {
-    flex-direction: row;
-    padding-top: 5px;
-
-    .line-content {
-        display: flex;
-        flex-direction: column;
-        flex-grow: 1;
-        margin-left: 10px;
-
-        .text {
-            font-size: 1rem;
-            color: #ddd;
-        }
-    }
-
-    &.collapsed {
-        .meta {
-            display: none;
-        }
-
-        min-height: 20px;
-    }
-
-    &.collapsed.top-border {
-        min-height: 26px;
-    }
-}
-
-.line.line-selected {
-    &.line-focused {
-        outline-left: 3px solid blue;
-    }
-}
-
-.line.line-cmd {
-    flex-direction: column;
-    scroll-margin-bottom: 20px;
-    position: relative;
-
-    .avatar {
-        cursor: pointer;
-        height: 36px;
-    }
-
-    .line-header {
-        display: flex;
-        flex-direction: row;
-        height: 36px;
-        width: 100%;
-
-        &.is-expanded {
-            height: auto;
-        }
-
-        &.is-collapsed {
-            height: 24px;
-        }
-
-        &.is-expanded.is-collapsed {
-            height: auto;
-        }
-        
-        .meta-wrap {
-            flex: 1 1 0px;
-            min-width: 0;
-            display: flex;
-            flex-direction: column;
-            justify-content: flex-start;
-            margin-left: 10px;
-        }
-
-        .collapsed-indicator + .meta-wrap {
-            margin-left: 0;
-        }
-
-        .line-icon {
-            display: block;
-            visibility: hidden;
-            cursor: pointer;
-            padding: 3px;
-            font-size: 1.5rem;
-        }
-
-        .line-bookmark:hover {
-            color: white;
-        }
-        
-        .line-icon + .line-icon {
-            margin-left: 5px;
-        }
-        
-        .line-icon.active {
-            visibility: visible;
-            display: block;
-            
-            i.fa-star, i.fa-thumb-tack {
-                color: @term-bright-yellow;
-            }
-            
-            i.fa-bookmark {
-                color: @term-bright-blue;
-            }
-        }
-
-        &:hover .line-icon {
-            visibility: visible;
-            display: block;
-        }
-    }
-
-    .meta.meta-line1 {
-        margin-left: 2px;
-    }
-
-    &.has-rtnstate .terminal-wrapper {
-        padding-bottom: 0;
-        margin-bottom: -5px;
-    }
-
-    .image-wrapper {
-        padding: 2px 10px 5px 4px;
-        margin: 4px 8px 0 -4px;
-
-        .loading-div {
-            height: 20px;
-            margin-left: 50px;
-            .mono-font();
-        }
-
-        &.collapsed {
-            height: 0;
-            padding: 0;
-            margin: 0;
-            overflow: hidden;
-        }
-    }
-
-    .terminal-wrapper {
-        background-color: #000;
-        padding: 2px 10px 5px 4px;
-        margin: 4px 8px 0 -4px;
-        align-self: flex-start;
-
-        &.zero-height {
-            padding: 0;
-            margin: 0;
-        }
-
-        &.collapsed {
-            height: 0;
-            padding: 0;
-            margin: 0;
-            overflow: hidden;
-        }
-
-        .terminal-connectelem {
-            overflow-y: hidden;
-            overflow-x: hidden;
-        }
-
-        .terminal {
-            margin-right: 8px; /* needed to show scrollbar */
-        }
-
-        &.cmd-done .terminal .xterm-cursor {
-            display: none;
-        }
-
-        .terminal-loading-message {
-            position: absolute;
-            top: calc(40% - 8px);
-            left: 50px;
-            height: 20px;
-            .mono-font();
-        }
-    }
-
-    .cmd-rtnstate {
-        position: relative;
-
-        .cmd-rtnstate-label {
-            position: relative;
-            z-index: 2;
-            .mono-font(9px);
-            margin-left: 10px;
-            padding: 2px 5px 2px 5px;
-            color: #666;
-            background-color: black;
-            display: inline-block;
-        }
-
-        .cmd-rtnstate-sep {
-            height: 1px;
-            border-bottom: 1px solid #222;
-            position: relative;
-            top: -8px;
-            width: min(300px, 50%);
-            margin-bottom: -3px;
-        }
-
-        .cmd-rtnstate-diff {
-            color: @term-white;
-            .mono-font(12px);
-            white-space: pre;
-            margin-left: 15px;
-        }
-    }
-}
-
-.cmd-input-info, .remotes-modal {
-    .terminal-wrapper {
-        position: relative;
-        background-color: #000;
-        padding: 2px 10px 5px 4px;
-        margin: 5px 5px 10px 5px;
-        box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.3);
-        &.focus {
-            box-shadow: 0 0 3px 3px rgba(255, 255, 255, 0.3);
-        }
-
-        .term-tag {
-            position: absolute;
-            top: 0;
-            right: 0;
-            background-color: @term-red;
-            color: white;
-            z-index: 110;
-            padding: 4px;
-            .mono-font(10px);
-        }
-    }
-}
-
-.line {
-    margin: 0px 5px 0px 5px;
-    padding: 10px 5px 0px 12px;
-    display: flex;
-    line-height: 1.25;
-    overflow: hidden;
-    flex-shrink: 0;
-    position: relative;
-
-    &.collapsed {
-        margin: 2px 5px 0px 5px;
-        padding: 0px 5px 0px 12px;
-
-        .avatar {
-            height: 20px;
-            width: 38px;
-            
-            &.num-4 {
-                font-size: 13px;
-            }
-            
-            &.num-5 {
-                font-size: 11px;
-            }
-            
-            &.num-6 {
-                font-size: 9px;
-            }
-        }
-
-        .meta-wrap .meta.meta-line1 {
-            display: none;
-        }
-
-        .focus-indicator {
-            height: calc(100% - 8px);
-            top: 4px;
-        }
-
-        .line-icon {
-            padding-top: 0;
-            padding-bottom: 0;
-            font-size: 20px;
-            margin-top: -4px;
-            margin-bottom: -2px;
-        }
-    }
-
-    &.top-border, &.collapsed.top-border {
-        border-top: 1px solid #777;
-        padding-top: 5px;
-        margin-top: 5px;
-    }
-
-    &:nth-child(2) {
-        margin: 0px 5px 5px 5px;
-        padding: 0px 5px 5px 12px;
-        border-top: none;
-    }
-
-    &:hover .meta .termopts {
-        display: block;
-    }
-
-    &:hover .meta .settings {
-        display: block;
-    }
-
-    .avatar {
-        max-height: 38px;
-        width: 38px;
-        background-color: #555;
-        display: flex;
-        flex-shrink: 0;
-        align-items: center;
-        justify-content: center;
-        font-weight: bold;
-        color: white;
-        font-size: 16px;
-        border-radius: 5px;
-        position: relative;
-
-        &.rtnstate {
-            border: 1px solid white;
-        }
-        
-        .status-icon {
-            font-size: 8px;
-            position: absolute;
-            top: 2px;
-            right: 2px;
-        }
-
-        .comment-icon {
-            font-size: 10px;
-            position: absolute;
-            top: 0px;
-            right: -4px;
-        }
-
-        &.num-4 {
-            font-size: 13px;
-        }
-
-        &.num-5 {
-            font-size: 11px;
-        }
-
-        &.num-6 {
-            font-size: 9px;
-        }
-
-        &.status-done {
-            background-color: #555;
-        }
-
-        &.ephemeral {
-            opacity: 0.5;
-            outline: 1px solid white;
-        }
-
-        &.status-error {
-            .status-icon {
-                color: #cc0000;
-            }
-        }
-
-        &.status-hangup {
-            .status-icon {
-                color: @term-yellow;
-            }
-        }
-
-        &.status-running {
-            background-color: @soft-blue;
-        }
-
-        &.status-waiting {
-            background-color: @term-yellow;
-        }
-
-        &.status-detached {
-            background-color: @soft-blue;
-            .status-icon {
-                top: 3px;
-                right: 3px;
-                color: white;
-            }
-        }
-    }
-
-    .collapsed-indicator {
-        width: 20px;
-        font-size: 20px;
-        color: white;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        margin-left: 2px;
-        margin-right: 2px;
-        position: relative;
-        top: -2px;
-    }
-
-    .meta {
-        display: flex;
-        flex-direction: row;
-        font-size: 1rem;
-        margin-top: -4px;
-
-        .user {
-            color: lighten(@soft-blue, 10%);
-            font-weight: bold;
-            margin-top: 1px;
-            margin-right: 10px;
-        }
-        
-        .ts, .termopts, .renderer {
-            display: flex;
-            color: #aaa;
-            margin-top: 5px;
-            .mono-font(11px);
-        }
-
-        .renderer {
-            color: #aaa;
-            margin-left: 3px;
-            margin-top: 5px;
-            .mono-font(11px);
-            i {
-                display: inline-block;
-                font-size: 9px;
-                margin-right: 2px;
-                margin-top: 2px;
-            }
-        }
-
-        .settings {
-            display: none;
-            color: #aaa;
-            font-size: 11px;
-            margin-left: 5px;
-            margin-top: 5px;
-            cursor: pointer;
-        }
-
-        .termopts {
-            color: #aaa;
-            margin-top: 5px;
-            .mono-font(11px);
-            display: none;
-
-            .resize-button {
-                cursor: pointer;
-                padding-left: 3px;
-                padding-right: 3px;
-            }
-        }
-        
-        .metapart-mono {
-            color: #ddd;
-            margin-left: 8px;
-            margin-top: 4px;
-            white-space: nowrap;
-            .mono-font(14px);
-        }
-        
-        .cmdtext {
-            color: #fff;
-            font-size: 16px;
-            font-weight: bold;
-            overflow: hidden;
-            margin-left: 0;
-        }
-
-        .cmdtext-overflow {
-            flex-shrink: 0;
-            padding-right: 2px;
-            color: white;
-            cursor: pointer;
-            .mono-font(16px);
-            margin-top: 4px;
-        }
-    }
-
-    .cmdtext-expanded-wrapper {
-        margin-top: 2px;
-        padding-left: 6px;
-        overflow-y: auto;
-        max-height: 54px;
-        border-left: 2px solid #333;
-        margin-left: 3px;
-
-        .cmdtext-expanded {
-            white-space: pre;
-            .mono-font(14px);
-            color: white;
-            padding-bottom: 5px;
-        }
-    }
-
-    .cmd-hints {
-        position: absolute;
-        bottom: 0px;
-        right: 0px;
-        display: none;
-
-        .hint-item {
-            border-radius: 3px;
-        }
-    }
-
-    &:hover .cmd-hints {
-        display: flex;
-    }
-}
-
-body .xterm .xterm-viewport {
-    overflow-y: auto;
-    width: calc(100% + 5px);
-}
-
-.terminal-wrapper {
-    position: relative;
-    
-    .term-block {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: transparent;
-        z-index: 10;
-    }
-
-    .xterm-screen {
-        &::-webkit-scrollbar {
-            display: none;
-        }
-    }
-}
-
-.terminal-wrapper.focus .xterm {
-    .xterm-screen {
-        overflow-y: scroll;
-        overscroll-behavior: contain;
-    }
-
-    .xterm-viewport {
-        overscroll-behavior: contain;
-    }
-}
-
-.cmd-input-info, .cmd-history {
-    &::-webkit-scrollbar {
-        background-color: #777;
-        width: 5px;
-        height: 5px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background: white;
-    }
-}
-
-.terminal-wrapper.focus .xterm-viewport {
-    &::-webkit-scrollbar {
-        background-color: #777;
-        width: 5px;
-        height: 5px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background: white;
-    }
-}
-
-.terminal-wrapper .xterm-viewport {
-    &::-webkit-scrollbar {
-        background-color: #222;
-        width: 5px;
-        height: 5px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background: #555;
-    }
-}
-
-.line.line-invalid {
-    color: @term-white;
-    margin-left: 5px;
-}
-
-.lines {
-    display: flex;
-    flex-direction: column;
-    height: 80vh;
-    overflow-y: scroll;
-    padding: 10px 0 10px 0;
-    flex-grow: 1;
-    position: relative;
-
-    .line:nth-child(2) {
-        padding-top: 1px;
-    }
-
-    .lines-spacer {
-        flex-grow: 1;
-    }
-
-    .line-sep {
-        display: flex;
-        align-items: center;
-        .mono-font(11px);
-        color: #aaa;
-    }
-
-    .line-sep::before, .line-sep::after {
-        content: '';
-        height: 2px;
-        background-color: #ccc;
-        flex-grow: 1;
-    }
-
-    .line-sep::before {
-        margin-right: 1rem;
-    }
-
-    .line-sep::after {
-        margin-left: 1rem;
-    }
-}
-
-.cmd-input {
-    border-radius: 0;
-    border-top: 4px solid #ccc;
-    border-right: 1px solid #ccc;
-    border-bottom: 1px solid #ccc;
-    border-bottom-right-radius: 10px;
-    max-height: max(300px, 40%);
-    display: flex;
-    flex-direction: column;
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    padding: 20px 25px 20px 20px;
-    z-index: 100;
-
-    &.has-info {
-        padding-top: 10px;
-    }
-
-    .focus-indicator {
-        height: 90%;
-        top: 5%;
-        left: 4px;
-    }
-
-    &.has-history {
-        padding-top: 5px;
-        height: max(300px, 40%);
-    }
-
-    &.has-remote {
-        max-height: max(300px, 70%);
-    }
-
-    .remote-status-warning {
-        display: flex;
-        flex-direction: row;
-        color: @term-yellow;
-        align-items: center;
-        font-size: 14px;
-
-        .button {
-            margin-left: 10px;
-        }
-
-        .remote-name {
-            .mono-font(14px)
-        }
-    }
-
-    .input-minmax-control {
-        position: absolute;
-        top: 5px;
-        right: 5px;
-        color: @term-white;
-        font-size: 12px;
-        padding: 5px;
-        cursor: pointer;
-    }
-
-    .cmd-input-grow-spacer {
-        flex-grow: 1;
-    }
-
-    .cmd-input-context {
-        .mono-font();
-        color: #fff;
-        white-space: nowrap;
-    }
-
-    .cmd-input-field {
-        position: relative;
-        
-        .cmd-input-control {
-            line-height: 0;
-        }
-
-        .cmd-hints {
-            position: absolute;
-            bottom: -14px;
-            right: 0px;
-        }
-
-        textarea {
-            color: white;
-            background-color: black;
-            .mono-font();
-            padding-bottom: calc(0.5em - 1px);
-            padding-top: calc(0.5em - 1px);
-            resize: none;
-            overflow-wrap: anywhere;
-
-            &:active, &:focus {
-                border-color: white !important;
-            }
-
-            &.display-disabled {
-                background-color: #444;
-            }
-        }
-
-        input.history-input {
-            border: 0;
-            padding: 0;
-            height: 0;
-        }
-
-        .cmd-quick-context .button {
-            .mono-font();
-            background-color: #000 !important;
-            color: white;
-        }
-
-        &.inputmode-global .cmd-quick-context .button {
-            color: black;
-            background-color: @tab-green !important;
-        }
-
-        &.inputmode-comment .cmd-quick-context .button {
-            color: black;
-            background-color: @tab-blue !important;
-        }
-
-        .cmd-exec .button {
-            background-color: #000 !important;
-            color: #d3d7cf;
-        }
-    }
-
-    .cmd-history {
-        color: @term-white;
-        margin-bottom: 5px;
-        overflow: auto;
-        flex-shrink: 1;
-
-        .history-title {
-            position: absolute;
-            z-index: 102;
-            top: 5px;
-            left: 20px;
-            background-color: black;
-            .mono-font(12px, 700);
-            color: @soft-blue;
-            padding-bottom: 4px;
-            display: flex;
-            flex-direction: row;
-            width: calc(100% - 40px);
-            overflow-x: auto;
-
-            .history-opt {
-                white-space: nowrap;
-            }
-
-            .history-clickable-opt {
-                white-space: nowrap;
-                cursor: pointer;
-            }
-
-            .grow-spacer {
-                flex: 1 0 10px;
-            }
-
-            .spacer {
-                flex: 0 0 10px;
-            }
-        }
-
-        .history-items {
-            margin-top: 24px;
-            color: @term-white;
-            .mono-font(12px);
-            padding-bottom: 6px;
-
-            .history-line {
-                white-space: pre;
-            }
-
-            .history-item.history-haderror {
-                color: mix(@term-red, @term-white, 50%);
-            }
-
-            .history-line:first-child {
-                margin-left: 0 !important;
-            }
-
-            .history-item {
-                padding-left: 5px;
-                cursor: pointer;
-
-                &:hover {
-                    background-color: #222;
-                }
-            }
-
-            .history-item.is-selected {
-                font-weight: bold;
-                color: @term-bright-white;
-                background-color: #444;
-            }
-
-            .history-item.is-selected.history-haderror {
-                color: mix(@term-bright-red, @term-bright-white, 50%);
-            }
-        }
-    }
-
-    .cmd-input-info {
-        flex-shrink: 1;
-        overflow-y: auto;
-        margin-bottom: 5px;
-        
-        .info-msg {
-            .mono-font(14px, 400);
-            color: @soft-blue;
-            padding-bottom: 2px;
-
-            a {
-                color: @term-blue;
-            }
-        }
-
-        .info-title {
-            .mono-font(14px, 700);
-            color: @soft-blue;
-            padding-bottom: 2px;
-        }
-
-        .info-lines {
-            .mono-font(12px);
-            color: @term-white;
-            white-space: pre;
-            padding-bottom: 6px;
-        }
-
-        .info-comps {
-            display: flex;
-            flex-direction: row;
-            flex-wrap: wrap;
-            padding-bottom: 5px;
-            .mono-font(14px, 400);
-            
-            .info-comp {
-                min-width: 200px;
-                color: @term-white;
-                margin-right: 10px;
-
-                &.has-space {
-                    text-decoration: underline dotted #777;
-                }
-            }
-
-            .metacmd-comp {
-                color: @term-bright-green;
-            }
-        }
-
-        .info-error {
-            .mono-font(14px, 700);
-            color: @term-red;
-            padding-bottom: 2px;
-        }
-
-        .info-remote-showall {
-            table.remotes-table {
-                th {
-                    color: white;
-                    font-weight: bold;
-                }
-                
-                th, td {
-                    padding: 3px 8px 3px 8px;
-                }
-
-                td {
-                    cursor: pointer;
-                }
-
-                tr:hover td {
-                    background-color: #333;
-                }
-            }
-        }
-
-        .info-remote {
-            color: #d3d7cf;
-            .mono-font(12px);
-
-            .info-remote-title {
-                font-weight: bold;
-                color: @term-cyan;
-            }
-
-            .info-error, .info-msg {
-                margin-top: 5px;
-                padding: 5px;
-            }
-
-            .remote-field {
-                display: flex;
-                flex-direction: row;
-
-                .remote-field-def {
-                    white-space: pre;
-                    width: 120px;
-                }
-                
-                .remote-field-val {
-                    white-space: pre;
-                    display: flex;
-                    flex-direction: row;
-                }
-            }
-
-            .remote-input-field {
-                display: flex;
-                flex-direction: row;
-                height: 25px;
-                align-items: center;
-
-                .remote-field-label {
-                    white-space: pre;
-                    width: 140px;
-                    font-weight: bold;
-                    color: @term-bright-white;
-                }
-
-                .undo-icon {
-                    margin-left: 4px;
-                    cursor: pointer;
-                    padding: 2px;
-                }
-
-                .remote-field-control {
-                    &.text-control {
-                    }
-
-                    &.text-input {
-                        input[type=text], input[type=number], input[type=password] {
-                            background-color: black;
-                            color: white;
-                            width: 200px;
-                        }
-                    }
-
-                    &.checkbox-input {
-                        input[type=checkbox] {
-                            position: relative;
-                            top: 3px;
-                        }
-                    }
-
-                    &.select-input {
-                        select {
-                            width: 200px;
-                            background-color: black;
-                            color: white;
-                        }
-                    }
-                }
-            }
-        }
-
-        .info-remote-showall {
-            color: #d3d7cf;
-            .mono-font(12px);
-        }
-    }
-}
-
-input[type=checkbox] {
-    cursor: pointer;
-}
-
-.text-button {
-    .mono-font(12px, 700);
-    color: @term-white;
-    cursor: pointer;
-    background-color: #171717;
-    outline: 2px solid #171717;
-
-    &:hover, &:focus {
-        color: @term-white;
-        background-color: #333;
-        outline: 2px solid #333;
-    }
-    
-    &.connect-button {
-        color: @term-green;
-        &:hover {
-            color: @term-green;
-        }
-    }
-    
-    &.disconnect-button {
-        color: @term-red;
-        &:hover {
-            color: @term-red;
-        }
-    }
-
-    &.success-button {
-        color: @term-green;
-        &:hover {
-            color: @term-green;
-        }
-    }
-
-    &.error-button {
-        color: @term-red;
-        &:hover {
-            color: @term-red;
-        }
-    }
-
-    &.grey-button {
-        color: #666;
-        &:hover {
-            color: #666;
-        }
-    }
-
-    &.disabled-button {
-        &:hover, &:focus {
-            outline: none;
-            background-color: #171717;
-        }
-        cursor: default;
-    }
-}
-
-.bold {
-    font-weight: bold;
-}
-
-.term-black {
-    color: @term-black;
-}
-
-.term-red {
-    color: @term-red;
-}
-
-.term-green {
-    color: @term-green;
-}
-
-.term-yellow {
-    color: @term-yellow;
-}
-
-.term-blue {
-    color: @term-blue;
-}
-
-.term-magenta {
-    color: @term-magenta;
-}
-
-.term-cyan {
-    color: @term-cyan;
-}
-
-.term-white {
-    color: @term-white;
-}
-
-.term-bright-white {
-    color: @term-bright-white;
-}
-
-.term-bright-green {
-    color: @term-bright-green;
-}
-
-.term-bright-red {
-    color: @term-bright-red;
-}
-
-#main .term-prompt {
-    font-size: 14px;
-    
-    i {
-        margin-right: 3px;
-    }
-
-    .term-prompt-branch {
-        color: @term-white;
-    }
-
-    .term-prompt-python {
-        color: @term-bright-magenta;
-    }
-
-    .term-prompt-remote {
-        i {
-            margin-right: 0;
-        }
-    }
-
-    .term-prompt-remote {
-        color: @term-bright-green;
-        
-        &.color-green {
-            color: @term-bright-green;
-        }
-
-        &.color-red {
-            color: @term-bright-red;
-        }
-
-        &.color-blue {
-            color: @term-bright-blue;
-        }
-
-        &.color-yellow {
-            color: @term-bright-yellow;
-        }
-
-        &.color-magenta {
-            color: @term-bright-magenta;
-        }
-
-        &.color-cyan {
-            color: @term-bright-cyan;
-        }
-
-        &.color-white {
-            color: @term-bright-white;
-        }
-
-        &.color-orange {
-            color: @tab-orange;
-        }
-    }
-
-    .term-prompt-cwd {
-        color: @term-bright-green;
-    }
-
-    .term-prompt-end {
-        color: @term-bright-green;
-    }
-}
-
-#main .screen-tabs .screen-tab {
-    &.color-green {
-        color: @tab-white-text;
-        background-color: desaturate(@tab-green, 50%);
-        &:hover {
-            background-color: @tab-green;
-        }
-        &.is-active {
-            color: white;
-            background-color: @tab-green;
-        }
-    }
-
-    &.color-orange {
-        color: @tab-black-text;
-        background-color: desaturate(@tab-orange, 30%);
-        &:hover {
-            background-color: @tab-orange;
-        }
-        &.is-active {
-            color: black;
-            background-color: @tab-orange;
-        }
-    }
-
-    &.color-red {
-        color: @tab-white-text;
-        background-color: desaturate(@tab-red, 40%);
-        &:hover {
-            background-color: @tab-red;
-        }
-        &.is-active {
-            color: white;
-            background-color: @tab-red;
-        }
-    }
-
-    &.color-yellow {
-        color: @tab-black-text;
-        background-color: desaturate(@tab-yellow, 40%);
-        &:hover {
-            background-color: @tab-yellow;
-        }
-        &.is-active {
-            background-color: @tab-yellow;
-            color: black;
-            box-shadow:
-                0 3px 0 #fff inset,
-                0 4px 0 #000 inset;
-        }
-    }
-
-    &.color-blue {
-        color: @tab-white-text;
-        background-color: desaturate(@tab-blue, 50%);
-        &:hover {
-            background-color: @tab-blue;
-        }
-        &.is-active {
-            color: white;
-            background-color: @tab-blue;
-        }
-    }
-
-    &.color-magenta {
-        color: @tab-white-text;
-        background-color: desaturate(@tab-magenta, 20%);
-        &:hover {
-            background-color: @tab-magenta;
-        }
-        &.is-active {
-            color: white;
-            background-color: @tab-magenta;
-        }
-    }
-
-    &.color-cyan {
-        color: @tab-black-text;
-        background-color: desaturate(@tab-cyan, 20%);
-        &:hover {
-            background-color: @tab-cyan;
-        }
-        &.is-active {
-            color: black;
-            background-color: @tab-cyan;
-        }
-    }
-
-    &.color-white {
-        color: @tab-black-text;
-        background-color: @term-white;
-        &:hover {
-            background-color: @tab-white;
-        }
-        &.is-active {
-            color: black;
-            background-color: @tab-white;
-            box-shadow:
-                0 3px 0 #fff inset,
-                0 4px 0 #000 inset;
-        }
-    }
-
-    &.color-black {
-        color: @tab-white-text;
-        background-color: lighten(@tab-black, 20%);
-        &:hover {
-            background-color: @tab-black;
-        }
-        &.is-active {
-            color: white;
-            background-color: @tab-black;
-        }
-    }
-
-    .web-share-icon {
-        position: relative;
-        top: 1px;
-        margin-right: 3px;
-    }
-}
-
-.monofont-thin {
-    .mono-font(inherit, 200);
-}
-
-.monofont-normal {
-    .mono-font(inherit, 400);
-}
-
-.monofont-bold {
-    .mono-font(inherit, 700);
-}
-
-.tos-modal {
-    a:hover {
-        text-decoration: underline;
-    }
-
-    .content {
-        .mono-font(13px);
-    }
-}
-
-.disconnected-modal {
-    .modal-content {
-        footer {
-            .footer-text-link {
-                .mono-font(12px);
-                color: @term-white;
-                cursor: pointer;
-            }
-        }
-    }
-
-    .inner-content {
-        .ws-log {
-            padding: 5px;
-            background-color: black;
-            height: 250px;
-            overflow: auto;
-            
-            .ws-logline {
-                .mono-font(12px);
-                color: @term-white;
-            }
-        }
-    }
-}
-
-.modal.prompt-modal.client-stop-modal {
-    footer {
-        justify-content: center;
-    }
-
-    .inner-content {
-        display: flex;
-        flex-direction: column;
-        padding: 20px;
-        .progress-container {
-            margin-top: 20px;
-        }
-        .progress-text {
-            color: @term-white;
-            align-self: center;
-            font-size: 12px;
-        }
-    }
-}
-
-.remote-status {
-    font-size: 8px;
-    margin-right: 5px;
-    position: relative;
-    top: -3px;
-    color: #c4a000;
-
-    &.status-init, &.status-disconnected {
-        color: #c4a000;
-    }
-
-    &.status-connecting {
-        color: #c4a000;
-    }
-    
-    &.status-connected {
-        color: #4e9a06;
-    }
-    
-    &.status-error {
-        color: #cc0000;
-    }
-}
-
 .remote-field .remote-status {
     top: 4px;
 }
 
-.menu-list .remote-status.status-connecting {
-    position: relative;
-    top: 0px;
-    font-size: 12px;
-    margin-left: -3px;
-}
-
-.flex-spacer {
-    flex-grow: 1;
-}
-
-.flex-centered-row {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-}
-
-.flex-centered-col {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-}
-
-.loading-spinner {
-    display: inline-block;
-    position: absolute;
-    top: calc(40% - 8px);
-    left: 30px;
-    width: 20px;
-    height: 20px;
-
-    div {
-        box-sizing: border-box;
-        display: block;
-        position: absolute;
-        width: 16px;
-        height: 16px;
-        margin: 2px;
-        border: 2px solid #777;
-        border-radius: 50%;
-        animation: loader-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-        border-color: #777 transparent transparent transparent;
-    }
-
-    div:nth-child(1) {
-        animation-delay: -0.45s;
-    }
-    
-    div:nth-child(2) {
-        animation-delay: -0.3s;
-    }
-    
-    div:nth-child(3) {
-        animation-delay: -0.15s;
-    }
-}
-
-.focus-parent:hover .focus-indicator {
-    display: block;
-    background-color: #222;
-}
-
-.focus-indicator {
-    position: absolute;
-    display: none;
-    width: 5px;
-    border-radius: 3px;
-    height: calc(100% - 20px);
-    top: 10px;
-    left: 0;
-    z-index: 8;
-
-    &.selected {
-        display: block;
-        background-color: #666 !important;
-    }
-    
-    &.active, &.active.selected {
-        display: block;
-        background-color: @tab-blue !important;
-    }
-    
-    &.active.selected.fg-focus {
-        display: block;
-        background-color: @tab-green !important;
-    }
-}
-
-@keyframes loader-ring {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-@keyframes fade-in {
-    0% {
-        opacity: 0;
-    }
-
-    80% {
-        opacity: 0;
-    }
-
-    100% {
-        opacity: 1;
-    }
-}
-
-@keyframes fade-in-out {
-    0% {
-        opacity: 0;
-    }
-
-    50% {
-        opacity: 0.5;
-    }
-
-    100% {
-        opacity: 0;
-    }
-}
-
-#measure {
-    position: absolute;
-    z-index: -1;
-    top: -5000px;
-
-    .mono {
-        .mono-font();
-    }
-
-    .pre {
-        white-space: pre;
-    }
-}
-
-.modal.alert-modal {
-    z-index: 205;
-    
-    footer {
-        justify-content: center;
-
-        .button {
-            margin-left: 20px;
-        }
-
-        .button:first-child {
-            margin-left: 0;
-        }
-    }
-}
-
-.modal.settings-modal {
-    footer {
-        justify-content: center;
-
-        .button {
-            margin-left: 20px;
-        }
-
-        .button:first-child {
-            margin-left: 0;
-        }
-    }
-
-    .dropdown {
-        .dropdown-menu .dropdown-content {
-            .dropdown-item {
-                color: white;
-                cursor: pointer;
-                &:hover {
-                    background-color: #333;
-                }
-            }
-        }
-
-        .dropdown-menu {
-            max-height: 120px;
-            overflow: auto;
-        }
-    }
-}
-
-.modal.prompt-modal {
-    .modal-content {
-        border-radius: 5px;
-        border: 5px solid #333;
-    }
-
-    header {
-        background-color: #000;
-        display: flex;
-        flex-direction: row;
-        padding: 10px;
-        position: relative;
-
-        .modal-title {
-            color: @prompt-green;
-            .mono-font(24px);
-        }
-
-        .close-icon {
-            position: absolute;
-            right: 10px;
-            top: 6px;
-            cursor: pointer;
-            padding: 3px;
-            color: #aaa;
-            font-size: 20px;
-
-            &:hover {
-                color: #fff;
-            }
-        }
-    }
-
-    .inner-content {
-        background-color: #222;
-        padding: 15px 10px 15px 10px;
-        color: @term-white;
-
-        margin: 0;
-
-        &.is-hidden {
-            display: none;
-        }
-    }
-
-    footer {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        color: @term-white;
-        background-color: #222;
-        padding: 15px 10px 10px 10px;
-        border-top: 1px solid #666;
-    }
-}
-
-.modal.prompt-modal.remotes-modal {
-    .modal-content {
-        min-width: 850px;
-    }
-    
-    .inner-content {
-        display: flex;
-        flex-direction: row;
-        align-items: stretch;
-        padding: 0;
-        max-height: 80vh;
-
-        .remotes-menu {
-            flex: 0 0 200px;
-            min-height: 450px;
-            border-right: 1px solid #666;
-            overflow-y: auto;
-            height: 100px;
-
-            .remote-menu-item {
-                border-top: 1px solid #666;
-                padding: 5px;
-                display: flex;
-                flex-direction: row;
-                cursor: pointer;
-
-                &.add-remote {
-                    font-size: 13px;
-                    padding: 10px 5px 10px 5px;
-                }
-
-                &:hover {
-                    background-color: #333;
-                }
-
-                &.is-selected {
-                    background-color: @active-menu-color;
-
-                    .remote-name .remote-name-secondary {
-                        color: white;
-                    }
-                }
-                
-                &:first-child {
-                    border-top: 0;
-                }
-
-                .remote-status-light {
-                    width: 15px;
-                    margin-top: -2px;
-                }
-
-                .remote-name {
-                    flex-grow: 1;
-
-                    .remote-name-primary {
-                        font-size: 12px;
-                        font-weight: bold;
-                    }
-
-                    .remote-name-secondary {
-                        font-size: 11px;
-                        color: #777;
-                    }
-                }
-            }
-        }
-
-        .remote-detail {
-            padding: 10px;
-            flex-grow: 1;
-            font-size: 12px;
-            display: flex;
-            flex-direction: column;
-
-            .settings-field {
-                margin-top: 5px;
-            }
-
-            * {
-                flex-shrink: 0;
-            }
-
-            .detail-subtitle {
-                font-size: 18px;
-                margin-bottom: 10px;
-                margin-top: 10px;
-            }
-
-            .title {
-                color: white;
-                padding-bottom: 8px;
-                margin-bottom: 0;
-                border-bottom: 1px solid #777;
-            }
-
-            .terminal-wrapper {
-                margin-left: 0;
-                margin-bottom: 0;
-
-                &.has-message {
-                    margin-top: 0;
-                }
-
-                box-shadow: none;
-                border: 1px solid #777;
-            }
-
-            .action-buttons {
-                display: flex;
-                flex-direction: row;
-                gap: 10px;
-                margin-top: 2px;
-            }
-
-            .remote-message {
-                margin-top: 5px;
-                padding: 8px;
-                border-radius: 5px 5px 0 0;
-                background-color: #333;
-
-                i.fa-check {
-                    color: @term-green;
-                }
-                
-                &.is-ok {
-                    
-                }
-
-                .message-row {
-                    display: flex;
-                    flex-direction: row;
-                    align-items: center;
-                }
-
-                .remote-status {
-                    position: relative;
-                    top: -1px;
-                }
-
-                .button {
-                    height: 22px;
-                }
-            }
-
-            .settings-field {
-                .update-auth-button {
-                    visibility: hidden;
-                }
-                
-                &:hover {
-                    .update-auth-button {
-                        visibility: visible;
-                    }
-
-                    .hide-hover {
-                        display: none;
-                    }
-                }
-            }
-
-            &.auth-editing, &.create-remote {
-                .settings-field.align-top {
-                    align-items: flex-start;
-
-                    .settings-label {
-                        margin-top: 8px;
-                    }
-
-                    .settings-input {
-                        align-items: flex-start;
-                    }
-                }
-
-                .settings-label {
-                    display: flex;
-                    flex-direction: row;
-                    align-items: center;
-                }
-
-                .settings-field .settings-input .undo-icon {
-                    cursor: pointer;
-                    font-size: 18px;
-                    margin-left: 5px;
-                }
-
-                .editremote-dropdown .dropdown-trigger button {
-                    width: 120px;
-                    justify-content: flex-start;
-                }
-
-                .settings-field .raw-input {
-                    width: 120px;
-                }
-
-                .settings-input input {
-                    width: 250px;
-                }
-                
-                .dropdown .dropdown-trigger button {
-                    font-size: 12px;
-                }
-                
-                .dropdown .dropdown-item {
-                    font-size: 12px;
-                    padding: 5px 5px 5px 12px;
-                }
-
-                .settings-input {
-                    .info-message {
-                        margin-left: 22px;
-                    }
-                }
-
-                .settings-label {
-                    .info-message {
-                        margin-right: 15px;
-                    }
-                }
-            }
-        }
-    }
-}
-
-.info-message {
-    position: relative;
-    font-weight: normal;
-    font-size: 12px;
-    color: @term-white;
-    
-    .message-content {
-        position: absolute;
-        display: none;
-        flex-direction: row;
-        align-items: flex-start;
-        top: -6px;
-        left: -6px;
-        padding: 5px;
-        border: 1px solid #777;
-        background-color: #444;
-        border-radius: 5px;
-        z-index: 5;
-        overflow: hidden;
-
-        .info-icon {
-            margin-right: 5px;
-            width: 12px;
-            flex-shrink: 0;
-        }
-
-        .info-children {
-            flex: 1 0 0;
-            overflow: hidden;
-        }
-    }
-    
-    &:hover {
-        .message-content {
-            display: flex;
-        }
-    }
-}
-
-.modal.welcome-modal {
-    footer {
-        .prev-button {
-            margin-left: 15px;
-            width: 100px;
-        }
-
-        .prev-spacer {
-            margin-left: 15px;
-            width: 100px;
-        }
-
-        .next-button {
-            margin-right: 15px;
-            width: 100px;
-        }
-
-        .dots {
-            font-size: 10px;
-
-            i {
-                margin-left: 5px;
-            }
-        }
-    }
-}
-
-.modal {
-    z-index: 105;
-
-    .modal-background {
-        background-color: rgba(10,10,10,.6);
-    }
-}
-
-.flex-spacer {
-    flex-grow: 1;
-}
-
-.cmd-hints {
-    .mono-font(10px);
-    display: flex;
-    flex-direction: row;
-    
-    .hint-item {
-        padding: 0px 5px 0px 5px;
-        border-radius: 0 0 3px 3px;
-        cursor: pointer;
-    }
-
-    .hint-item:not(:last-child) {
-        margin-right: 8px;
-    }
-
-    .hint-item.color-green {
-        color: black;
-        background-color: @tab-green;
-        
-        &:hover {
-            color: white;
-        }
-    }
-
-    .hint-item.color-nohover-green {
-        color: black;
-        background-color: @tab-green;
-        cursor: default;
-    }
-    
-    .hint-item.color-white {
-        color: black;
-        background-color: @term-white;
-        
-        &:hover {
-            background-color: @term-bright-white;
-        }
-    }
-
-    .hint-item.color-nohover-white {
-        color: black;
-        background-color: @term-white;
-        cursor: default;
-    }
-
-    .hint-item.color-blue {
-        color: black;
-        background-color: @tab-blue;
-        
-        &:hover {
-            color: white;
-        }
-    }
-
-    .hint-item.color-nohover-blue {
-        color: black;
-        background-color: @tab-blue;
-        cursor: default;
-    }
-}
-
-.client-settings-modal {
-    .settings-field {
-        .settings-label {
-            width: 150px;
-        }
-    }
-}
-
-.settings-field {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    font-size: 14px;
-
-    &.settings-field.sub-field {
-        .settings-label {
-            font-weight: normal;
-            font-size: 13px;
-            text-align: right;
-            padding-right: 20px;
-        }
-    }
-
-    &.settings-error {
-        font-size: 14px;
-        color: @term-red;
-        margin-top: 20px;
-        padding: 10px;
-        border-radius: 5px;
-        background-color: #200707;
-        border: 1px solid @term-red;
-        font-weight: bold;
-
-        .error-dismiss {
-            padding: 2px;
-            cursor: pointer;
-        }
-    }
-
-    .settings-label {
-        font-weight: bold;
-        color: #fff;
-        width: 120px;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        .info-message {
-            margin-left: 5px;
-        }
-    }
-
-    .settings-input {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-
-        &.inline-edit.edit-not-active {
-            cursor: pointer;
-
-            i.fa-pen {
-                margin-left: 5px;
-            }
-
-            &:hover {
-                text-decoration: underline;
-                text-decoration-style: dotted;
-            }
-        }
-
-        &.settings-clickable {
-            cursor: pointer;
-        }
-
-        &.inline-edit.edit-active {
-            input.input {
-                padding: 0;
-                height: 20px;
-                font-size: 12px;
-            }
-
-            .button {
-                height: 20px;
-            }
-        }
-        
-        input {
-            padding: 4px;
-            border-radius: 3px;
-        }
-
-        .control {
-            font-size: 12px;
-        }
-        
-        .tab-color-icon.color-green {
-            color: desaturate(@tab-green, 30%);
-        }
-        .tab-color-icon.color-orange {
-            color: desaturate(@tab-orange, 30%);
-        }
-        .tab-color-icon.color-red {
-            color: desaturate(@tab-red, 20%);
-        }
-        .tab-color-icon.color-yellow {
-            color: desaturate(@tab-yellow, 30%);
-        }
-        .tab-color-icon.color-blue {
-            color: desaturate(@tab-blue, 20%);
-        }
-        .tab-color-icon.color-magenta {
-            color: desaturate(@tab-magenta, 20%);
-        }
-        .tab-color-icon.color-cyan {
-            color: desaturate(@tab-cyan, 20%);
-        }
-        .tab-color-icon.color-white {
-            color: @term-white;
-        }
-        .tab-color-icon.color-black {
-            color: lighten(@tab-black, 20%);
-        }
-
-        .tab-colors {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-
-            .tab-color-sep {
-                padding-left: 10px;
-                padding-right: 10px;
-                font-weight: bold;
-            }
-
-            .tab-color-cur {
-                font-size: 12px;
-                width: 100px;
-            }
-
-            .tab-color-select {
-                cursor: pointer;
-                margin: 5px;
-                line-height: 1;
-                &:hover {
-                    outline: 2px solid white;
-                }
-            }
-        }
-
-        .action-text {
-            margin-left: 20px;
-            font-size: 12px;
-            color: @term-red;
-        }
-
-        .settings-share-link {
-            width: 160px;
-        }
-    }
-
-    &:not(:first-child) {
-        margin-top: 10px;
-    }
-}
-
-.checkbox-toggle {
-    position: relative;
-    display: inline-block;
-    width: 40px;
-    height: 23px;
-
-    input {
-        opacity: 0;
-        width: 0;
-        height: 0;
-    }
-
-    .slider {
-        position: absolute;
-        content: "";
-        cursor: pointer;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        background-color: #333;
-        transition: 0.5s;
-        border-radius: 33px;
-    }
-
-    .slider:before {
-        position: absolute;
-        content: "";
-        height: 18px;
-        width: 18px;
-        left: 3px;
-        bottom: 3px;
-        background-color: white;
-        transition: 0.5s;
-        border-radius: 50%;
-    }
-
-    input:checked + .slider {
-        background-color: @term-green;
-    }
-
-    input:checked + .slider:before {
-        transform: translateX(18px);
-    }
-}
-
-.button.is-prompt-green {
-    background-color: #222;
-    color: @term-white;
-
-    &:hover {
-        background-color: @term-green;
-        color: @term-bright-white;
-    }
-}
-
-.button.is-plain, .button.is-prompt-cancel {
-    background-color: #222;
-    color: @term-white;
-
-    &:hover {
-        background-color: #666;
-        color: @term-bright-white;
-    }
-}
-
-.button.is-prompt-danger {
-    background-color: #222;
-    color: @term-white;
-
-    &:hover {
-        background-color: @tab-red;
-        color: @term-bright-white;
-    }
-}
-
-.button.is-inline-height {
-    height: 22px;
-}
-
-.button input.confirm-checkbox {
-    margin-right: 5px;
-}
-
-.markdown {
-    color: @term-white;
-    margin-bottom: 10px;
-
-    code {
-        background-color: black;
-        color: white;
-        .mono-font();
-        padding: 5px;
-    }
-
-    code.inline {
-        padding-top: 0;
-        padding-bottom: 0;
-    }
-
-    .title {
-        color: white;
-        margin-top: 16px;
-        line-height: 1.25;
-        margin-bottom: 8px;
-    }
-
-    strong {
-        color: white;
-    }
-
-    a {
-        color: #32afff;
-    }
-
-    ul {
-        list-style-type: disc;
-        list-style-position: outside;
-        margin-left: 16px;
-    }
-
-    ol {
-        list-style-position: outside;
-        margin-left: 19px;
-    }
-
-    blockquote {
-        margin: 4px 10px 4px 10px;
-        border-radius: 3px;
-        background-color: #444;
-        padding: 2px 4px 2px 6px;
-    }
-
-    pre {
-        background-color: inherit;
-        margin: 4px 10px 4px 10px;
-        padding: 2px 4px 2px 6px;
-    }
-
-    .title.is-1 {
-        font-size: 32px;
-        border-bottom: 1px solid #777;
-        padding-bottom: 6px;
-    }
-    .title.is-2 {
-        font-size: 24px;
-        border-bottom: 1px solid #777;
-        padding-bottom: 6px;
-    }
-    .title.is-3 {
-        font-size: 20px;
-    }
-    .title.is-4 {
-        font-size: 16px;
-    }
-    .title.is-5 {
-        font-size: 14px;
-    }
-    .title.is-6 {
-        font-size: 14px;
-    }
-}
-
-.markdown > *:first-child {
-    margin-top: 0 !important;
-}
-
 .image-renderer {
     padding: 10px;
     img {
@@ -3650,152 +259,3 @@ input[type=checkbox] {
         padding: 4px 4px 4px 6px;
     }
 }
-
-.copied-indicator {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: white;
-    opacity: 0;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    pointer-events: none;
-    .mono-font(12px);
-    animation-name: fade-in-out;
-    animation-duration: 0.3s;
-}
-
-body.prompt-webshare #main {
-    display: flex;
-    flex-direction: column;
-    
-    .logo-header {
-        display: flex;
-        flex-direction: row;
-        padding: 10px;
-        border-bottom: 1px solid #777;
-        align-items: center;
-        flex-shrink: 0;
-
-        .logo-text {
-            .mono-font(32px);
-            a {
-                color: @prompt-green;
-            }
-        }
-
-        .screen-name {
-            color: white;
-            .mono-font(24px);
-            margin-left: 20px;
-        }
-
-        .download-button {
-            margin-right: 20px;
-        }
-    }
-
-    .webshare-controls {
-        display: flex;
-        flex-direction: row;
-        flex-shrink: 0;
-        height: 40px;
-        align-items: center;
-        padding-left: 20px;
-        padding-right: 20px;
-        background-color: darken(@prompt-green, 30%);
-        color: white;
-
-        .screen-sharename {
-            font-weight: bold;
-        }
-
-        .sync-control {
-            display: flex;
-            flex-direction: row;
-            color: @term-white;
-            font-size: 13px;
-            align-items: center;
-
-            div:first-child {
-                margin-right: 5px;
-            }
-        }
-    }
-
-    .prompt-content {
-        flex-grow: 1;
-        padding: 10px 0;
-        display: flex;
-        flex-direction: row;
-        overflow: hidden;
-
-        .web-screen-view {
-            height: 100%;
-            width: 100%;
-            flex-grow: 1;
-            display: flex;
-            flex-direction: column;
-
-            .lines {
-                height: 100%;
-                flex-grow: 1;
-                padding-top: 0;
-            }
-        }
-    }
-
-    .prompt-footer {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        color: #aaa;
-        border-top: 1px solid #777;
-        height: 50px;
-        padding-left: 20px;
-        padding-right: 20px;
-        flex-shrink: 0;
-
-        .footer-copy {
-            font-size: 12px;
-        }
-
-        a {
-            display: block;
-        }
-    }
-    
-    color: white;
-    
-    #app {
-        color: white;
-    }
-
-    .lines .line-sep {
-        margin-left: 0px;
-        margin-right: 10px;
-    }
-
-    .lines .line.line-cmd {
-        .line-icon.copy-icon {
-            color: @term-white;
-            font-size: 18px;
-
-            &:hover {
-                color: @term-bright-white;
-            }
-        }
-
-        .copied-indicator {
-            z-index: 10;
-        }
-    }
-}
-
-a.a-block {
-    display: block;
-}
diff --git a/src/sidebar.less b/src/sidebar.less
new file mode 100644
index 000000000..d15d5d43f
--- /dev/null
+++ b/src/sidebar.less
@@ -0,0 +1,284 @@
+.main-sidebar .logo-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    border-bottom: 2px solid #ddd;
+    margin-left: -4px;
+    margin-right: -5px;
+    
+    .title.prompt-logo-small {
+        padding-left: 5px;
+        padding-top: 8px;
+        padding-bottom: 8px;
+        margin-bottom: 0;
+        .mono-font(1.5rem);
+        background-color: darken(rgb(0, 177, 10), 30%);
+        color: rgb(0, 177, 10);
+        position: relative;
+        white-space: nowrap;
+        overflow: hidden;
+        flex-shrink: 0;
+        
+        &.is-dev {
+            background-color: darken(rgb(177, 0, 10), 30%);
+        }
+        
+        &.collapsed {
+            padding-left: 1px;
+        }
+        
+        .title-cursor {
+            position: relative;
+            bottom: 3px;
+            left: 3px;
+            .mono-font(1.2rem);
+        }
+    }
+}
+
+.main-sidebar {
+    border-right: 1px solid #aaa;
+    padding: 0 5px 5px 5px;
+    width: 200px;
+    overflow-x: hidden;
+    display: flex;
+    flex-direction: column;
+    color: #ddd;
+    position: relative;
+    background-color: darken(rgb(0, 177, 10), 30%);
+    flex-shrink: 0;
+
+    &.is-dev {
+        background-color: darken(rgb(177, 0, 10), 30%);
+    }
+
+    .menu {
+        padding-top: 10px;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+
+        .spacer {
+            flex-grow: 1;
+        }
+
+        .bottom-spacer {
+            height: 10px;
+        }
+
+        a:hover {
+            color: white;
+        }
+    }
+
+    .menu-label {
+        color: #bbb;
+
+        a {
+            color: #bbb;
+        }
+    }
+
+    p.menu-label {
+        margin-bottom: 0px;
+    }
+
+    .menu-list {
+        li.new-session, li.add-remote {
+            a {
+                color: #666;
+                font-size: 13px;
+            }
+            
+            .fa {
+                font-size: 10px;
+            }
+        }
+
+        li {
+            .mono-font();
+        }
+
+        li.menu-loading-message {
+            .mono-font();
+        }
+
+        li.menu-history, li.menu-bookmarks, li.menu-settings, li.menu-websharing {
+            margin-left: -10px;
+        }
+
+        li.menu-bookmarks {
+            margin-left: -10px;
+        }
+
+        li {
+            .hotkey {
+                visibility: hidden;
+            }
+
+            &:hover .hotkey {
+                visibility: visible;
+            }
+        }
+    }
+
+    .menu-list.session-menu-list {
+        li a {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+
+            .session-num {
+                width: 24px;
+                margin-left: -12px;
+            }
+
+            .session-gear {
+                visibility: hidden;
+            }
+
+            &:hover .session-gear {
+                color: #ccc;
+                visibility: visible;
+
+                &:hover {
+                    color: white;
+                }
+            }
+        }
+    }
+
+    .menu-list.remotes-menu-list {
+        max-height: 35%;
+        overflow-y: auto;
+    }
+
+    .menu-list li.remote-menu-item {
+        a {
+            .mono-font(11px);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+
+    .menu-list li a {
+        color: #bbb;
+        white-space: nowrap;
+        padding: 3px 5px 3px 12px;
+        vertical-align: middle;
+        position: relative;
+        font-size: 13px;
+
+        .user-status {
+            position: absolute !important;
+            top: 24px !important;
+            left: 32px !important;
+        }
+
+        .avatar {
+            width: 24px;
+            height: 24px;
+            margin-right: 5px;
+            vertical-align: middle;
+        }
+
+        .session-num {
+            color: #777;
+            font-size: 10px;
+        }
+
+        &.is-active .small-text {
+            color: white;
+        }
+
+        .small-text {
+            color: #777;
+            font-size: 10px;
+        }
+
+        &.is-active {
+            color: #ddd;
+            font-weight: bold;
+            background-color: @active-menu-color;
+
+            .session-num {
+                color: #aaa;
+                font-weight: normal;
+            }
+        }
+
+        .sub-label {
+            font-size: 12px;
+            font-style: italic;
+        }
+
+        &.activity {
+            font-weight: bold;
+            color: #ddd;
+
+            .tag {
+                margin-left: 4px;
+                padding: 0 5px 0 5px;
+                position: relative;
+                top: -1px;
+            }
+        }
+
+        &.is-active:hover {
+            background-color: #3273dc;
+        }
+
+        &:hover {
+            background-color: #444;
+            color: #ddd;
+        }
+
+        .status {
+            font-size: 8px;
+            margin-right: 5px;
+            position: relative;
+            top: -3px;
+            color: #4e9a06;
+
+            &.offline {
+                color: #cc0000;
+            }
+        }
+    }
+
+    &.collapsed {
+        width: 55px;
+
+        .collapse-container {
+            right: 17px;
+        }
+
+        .menu {
+            display: none;
+        }
+    }
+
+    .collapse-container {
+        position: absolute;
+        right: 3px;
+        top: 42px;
+
+        .arrow-container {
+            color: #777;
+            padding: 5px;
+            cursor: pointer;
+
+            &:hover {
+                color: #ddd;
+            }
+        }
+    }
+}
+
+.menu-list .remote-status.status-connecting {
+    position: relative;
+    top: 0px;
+    font-size: 12px;
+    margin-left: -3px;
+}
diff --git a/src/tabs.less b/src/tabs.less
new file mode 100644
index 000000000..3bad54f0b
--- /dev/null
+++ b/src/tabs.less
@@ -0,0 +1,269 @@
+#main .screen-tabs .screen-tab {
+    &.color-green {
+        color: @tab-white-text;
+        background-color: desaturate(@tab-green, 50%);
+        &:hover {
+            background-color: @tab-green;
+        }
+        &.is-active {
+            color: white;
+            background-color: @tab-green;
+        }
+    }
+
+    &.color-orange {
+        color: @tab-black-text;
+        background-color: desaturate(@tab-orange, 30%);
+        &:hover {
+            background-color: @tab-orange;
+        }
+        &.is-active {
+            color: black;
+            background-color: @tab-orange;
+        }
+    }
+
+    &.color-red {
+        color: @tab-white-text;
+        background-color: desaturate(@tab-red, 40%);
+        &:hover {
+            background-color: @tab-red;
+        }
+        &.is-active {
+            color: white;
+            background-color: @tab-red;
+        }
+    }
+
+    &.color-yellow {
+        color: @tab-black-text;
+        background-color: desaturate(@tab-yellow, 40%);
+        &:hover {
+            background-color: @tab-yellow;
+        }
+        &.is-active {
+            background-color: @tab-yellow;
+            color: black;
+            box-shadow:
+                0 3px 0 #fff inset,
+                0 4px 0 #000 inset;
+        }
+    }
+
+    &.color-blue {
+        color: @tab-white-text;
+        background-color: desaturate(@tab-blue, 50%);
+        &:hover {
+            background-color: @tab-blue;
+        }
+        &.is-active {
+            color: white;
+            background-color: @tab-blue;
+        }
+    }
+
+    &.color-magenta {
+        color: @tab-white-text;
+        background-color: desaturate(@tab-magenta, 20%);
+        &:hover {
+            background-color: @tab-magenta;
+        }
+        &.is-active {
+            color: white;
+            background-color: @tab-magenta;
+        }
+    }
+
+    &.color-cyan {
+        color: @tab-black-text;
+        background-color: desaturate(@tab-cyan, 20%);
+        &:hover {
+            background-color: @tab-cyan;
+        }
+        &.is-active {
+            color: black;
+            background-color: @tab-cyan;
+        }
+    }
+
+    &.color-white {
+        color: @tab-black-text;
+        background-color: @term-white;
+        &:hover {
+            background-color: @tab-white;
+        }
+        &.is-active {
+            color: black;
+            background-color: @tab-white;
+            box-shadow:
+                0 3px 0 #fff inset,
+                0 4px 0 #000 inset;
+        }
+    }
+
+    &.color-black {
+        color: @tab-white-text;
+        background-color: lighten(@tab-black, 20%);
+        &:hover {
+            background-color: @tab-black;
+        }
+        &.is-active {
+            color: white;
+            background-color: @tab-black;
+        }
+    }
+
+    .web-share-icon {
+        position: relative;
+        top: 1px;
+        margin-right: 3px;
+    }
+}
+
+.screen-tabs-container {
+    position: relative;
+    
+    &:hover {
+        z-index: 200;
+    }
+
+    &:hover .cmd-hints {
+        display: flex;
+    }
+
+    .cmd-hints {
+        position: absolute;
+        bottom: -18px;
+        left: 0px;
+        display: flex;
+    }
+}
+
+.screen-tabs {
+    height: 30px;
+    display: flex;
+    flex-direction: row;
+    border-top: 1px solid #666;
+    border-right: 1px solid #eee;
+    overflow-x: overlay;
+    overflow-y: visible;
+    align-items: center;
+
+    &::-webkit-scrollbar {
+        display: none;
+        z-index: 5;
+        background-color: #fff;
+        height: 4px;
+        width: 0;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: #777;
+    }
+
+    &.scrolling::-webkit-scrollbar {
+        display: block;
+    }
+
+    .screen-tab {
+        height: 30px;
+        min-width: 80px;
+        width: 150px;
+        line-height: 1.0;
+        flex-shrink: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 12px;
+        font-weight: 500;
+        padding-left: 0;
+        padding-right: 0;
+        cursor: pointer;
+        position: relative;
+        border-right: 1px solid #777;
+
+        .tab-name {
+            flex-grow: 1;
+            flex-basis: 50px;
+            padding-left: 2px;
+            padding-right: 2px;
+            text-align: center;
+        }
+
+        &.is-active {
+            box-shadow: 0 3px 0 #fff inset;
+            border-top: none;
+            opacity: 1.0;
+        }
+
+        &.is-archived {
+            .fa.fa-archive {
+                margin-right: 4px;
+            }
+        }
+
+        .tab-index {
+            font-size: 11px;
+            position: absolute;
+            right: 2px;
+            top: 4px;
+            bottom: 0;
+            font-weight: normal;
+            display: none;
+            padding-left: 4px;
+            padding-top: 6px;
+            background-color: inherit;
+        }
+
+        .tab-gear {
+            position: absolute;
+            right: 5px;
+            top: 4px;
+            bottom: 0;
+            font-weight: normal;
+            display: none;
+            padding-left: 5px;
+            padding-top: 5px;
+            background-color: inherit;
+        }
+
+        &:hover {
+            .tab-gear {
+                display: block;
+
+                &:hover {
+                    display: block;
+                    top: 4px;
+                    padding-top: 4px;
+                    right: 3px;
+                    padding-left: 4px;
+                    i {
+                        font-size: 15px;
+                    }
+                }
+            }
+        }
+    }
+
+    &:hover .screen-tab .tab-index {
+        display: block;
+    }
+
+    &:hover .screen-tab:hover .tab-index {
+        display: none;
+    }
+
+    .screen-tab.new-screen {
+        width: 30px;
+        min-width: 30px;
+        background-color: black;
+        border-right: none;
+        color: #ccc;
+        cursor: pointer;
+
+        &:hover {
+            background-color: #666;
+            border-right: 1px solid #ccc;
+        }
+    }
+}
diff --git a/src/utils.less b/src/utils.less
new file mode 100644
index 000000000..859f92d0e
--- /dev/null
+++ b/src/utils.less
@@ -0,0 +1,91 @@
+.mono-font(@size: inherit, @weight: inherit) {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: @size;
+    font-weight: @weight;
+}
+
+.monofont-thin {
+    .mono-font(inherit, 200);
+}
+
+.monofont-normal {
+    .mono-font(inherit, 400);
+}
+
+.monofont-bold {
+    .mono-font(inherit, 700);
+}
+
+.display-none {
+    display: none;
+}
+
+.bold {
+    font-weight: bold;
+}
+
+.term-black {
+    color: @term-black;
+}
+
+.term-red {
+    color: @term-red;
+}
+
+.term-green {
+    color: @term-green;
+}
+
+.term-yellow {
+    color: @term-yellow;
+}
+
+.term-blue {
+    color: @term-blue;
+}
+
+.term-magenta {
+    color: @term-magenta;
+}
+
+.term-cyan {
+    color: @term-cyan;
+}
+
+.term-white {
+    color: @term-white;
+}
+
+.term-bright-white {
+    color: @term-bright-white;
+}
+
+.term-bright-green {
+    color: @term-bright-green;
+}
+
+.term-bright-red {
+    color: @term-bright-red;
+}
+
+.flex-spacer {
+    flex-grow: 1;
+}
+
+.flex-centered-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
+.flex-centered-col {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+a.a-block {
+    display: block;
+}
diff --git a/src/views.less b/src/views.less
new file mode 100644
index 000000000..5ba4af8c4
--- /dev/null
+++ b/src/views.less
@@ -0,0 +1,556 @@
+
+.alt-view {
+    background-color: #111;
+    overflow-y: auto;
+    flex-grow: 1;
+    
+    .alt-title {
+        margin: 20px 10px 0px 5px;
+        padding-left: 10px;
+        padding-bottom: 12px;
+        .mono-font(1.5rem);
+        color: @term-bright-white;
+        border-bottom: 1px solid white;
+    }
+
+    .alt-list {
+        color: white;
+        margin: 4px 10px 5px 5px;
+        border-bottom: 1px solid white;
+    }
+
+    .no-content {
+        color: @term-white;
+        padding: 30px 10px 35px 10px;
+        border-bottom: 1px solid white;
+    }
+
+    .close-button {
+        position: absolute;
+        padding: 4px;
+        font-size: 24px;
+        color: #aaa;
+        right: 15px;
+        top: 18px;
+        cursor: pointer;
+
+        &:hover {
+            color: #fff;
+        }
+    }
+
+    .alt-help {
+        color: @term-white;
+        margin-top: 20px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        font-size: 12px;
+        margin-bottom: 10px;
+
+        .help-entry {
+            margin-left: 20px;
+        }
+    }
+}
+
+.history-view {
+    color: #ccc;
+
+    .close-div {
+        padding-top: 10px;
+        font-size: 24px;
+
+        i {
+            padding: 5px 5px 5px 10px;
+            cursor: pointer;
+        }
+
+        i:hover {
+            color: #fff;
+        }
+    }
+
+    .header {
+        display: flex;
+        flex-direction: row;
+        margin: 10px;
+        align-items: flex-start;
+
+        .history-title {
+            margin-top: 5px;
+            .mono-font(1.5rem);
+            font-weight: bold;
+            color: white;
+        }
+
+        input {
+            background-color: #333;
+            color: white;
+
+            i {
+                color: white;
+            }
+        }
+    }
+
+    .history-search {
+        flex-grow: 1;
+        margin-top: 5px;
+        margin-left: 15px;
+
+        .main-search {
+            .field {
+                width: 80%;
+            }
+
+            input::placeholder {
+                color: #777;
+            }
+        }
+
+        .advanced-search {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            
+            .session-dropdown, .remote-dropdown {
+                .dropdown-item {
+                    color: white;
+                    cursor: pointer;
+                    &:hover {
+                        background-color: #666;
+                    }
+                }
+
+                .dropdown-content {
+                    border: 1px solid #333;
+                    border-radius: 3px;
+                }
+            }
+
+            .remote-dropdown {
+                margin-left: 15px;
+            }
+
+            .search-checkbox {
+                margin-left: 15px;
+                border: 1px solid #777;
+                padding: 5px 10px 5px 10px;
+                font-size: 12px;
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+
+                &.is-active {
+                    background-color: #666;
+                }
+
+                .checkbox-container {
+                    position: relative;
+                    top: 2px;
+                }
+
+                .checkbox-text {
+                    padding-left: 8px;
+                    cursor: pointer;
+                }
+            }
+
+            .fromts {
+                font-size: 12px;
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                margin-left: 15px;
+                
+                .fromts-text {
+                }
+            }
+
+            .reset-button {
+                cursor: pointer;
+                margin-left: 15px;
+                font-size: 12px;
+                border: 1px solid #777;
+                padding: 5px 10px 5px 10px;
+                
+                &:hover {
+                    background-color: #666;
+                }
+            }
+        }
+    }
+
+    .control-bar {
+        display: flex;
+        flex-direction: row;
+        margin-bottom: 5px;
+        margin-right: 10px;
+        margin-top: 10px;
+        margin-left: 10px;
+        align-items: center;
+
+        .is-hidden {
+            display: none;
+        }
+
+        &.is-top {
+            border-top: 1px solid #333;
+            padding-top: 4px;
+        }
+
+        .control-checkbox {
+            cursor: pointer;
+            color: #777;
+            font-size: 18px;
+            width: 24px;
+            margin-left: 14px;
+
+            &:hover {
+                color: white;
+            }
+        }
+
+        .control-button {
+            cursor: pointer;
+            color: #aaa;
+            margin-left: 10px;
+            font-size: 14px;
+
+            &.is-disabled {
+                cursor: default;
+                i, span {
+                    display: none;
+                }
+            }
+
+            &:hover {
+                color: white;
+            }
+
+            &.delete-button.is-active {
+                color: @term-bright-red !important;
+            }
+        }
+
+        .spacer {
+            flex-grow: 1;
+        }
+
+        .showing-text {
+            font-size: 16px;
+            margin-right: 10px;
+        }
+
+        .showing-btn {
+            padding: 0 5px 0 5px;
+            cursor: pointer;
+            font-size: 16px;
+            font-weight: bold;
+
+            &.is-disabled {
+                cursor: default;
+                color: #777;
+                font-weight: normal;
+            }
+        }
+
+        .btn-spacer {
+            width: 10px;
+        }
+    }
+
+    .no-items {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        .mono-font(14px);
+        padding: 30px 0 30px 0;
+        border: 1px solid white;
+        border-radius: 3px;
+        margin: 20px 50px 20px 20px;
+    }
+    
+    .history-table {
+        margin: 0px 10px 10px 10px;
+        table-layout: fixed;
+        border-top: 2px solid #ccc;
+
+        tr.active-history-item {
+            td {
+                padding-right: 10px;
+                
+                .line-container {
+                    padding: 0px 10px 10px 10px;
+                    overflow-x: auto;
+                    background-color: black;
+                }
+
+                .line-context {
+                    .mono-font(12px);
+                    margin-left: 20px;
+                    margin-bottom: 10px;
+                    margin-top: 10px;
+                    display: flex;
+                    flex-direction: row;
+
+                    .vic-btn {
+                        cursor: pointer;
+                        color: #ccc;
+
+                        &:hover {
+                            color: white;
+                        }
+                    }
+                }
+
+                .no-line-context {
+                    height: 10px;
+                }
+
+                .line-container.no-line {
+                    .mono-font(12px);
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                    justify-content: center;
+                    padding: 20px;
+                }
+            }
+        }
+
+        tr.history-item {
+            padding: 0 10px 0 10px;
+            display: flex;
+            border-top: 1px solid #333;
+            align-items: center;
+
+            &.is-selected {
+                background-color: #003;
+            }
+
+            &.is-selected:hover {
+                background-color: #336;
+            }
+
+            &:hover {
+                background-color: #333;
+
+                td.bookmark i {
+                    display: block;
+                }
+            }
+
+            td {
+                padding-top: 5px;
+                padding-bottom: 5px;
+                padding-left: 5px;
+            }
+
+            td.selectbox {
+                flex: 0 0 auto;
+                flex-basis: 24px;
+                font-size: 14px;
+                cursor: pointer;
+            }
+
+            td.bookmark {
+                flex: 0 0 auto;
+                flex-basis: 20px;
+                font-size: 14px;
+                cursor: pointer;
+
+                i {
+                    position: relative;
+                    top: 1px;
+                    display: none;
+                }
+            }
+
+            td.ts {
+                font-size: 12px;
+                flex: 0 0 auto;
+                flex-basis: 65px;
+                font-weight: bold;
+            }
+
+            td.session {
+                font-size: 12px;
+                flex: 0 0 auto;
+                flex-basis: 120px;
+                text-overflow: ellipsis;
+            }
+
+            td.remote {
+                .mono-font(12px);
+                flex: 0 0 auto;
+                flex-basis: 150px;
+                text-overflow: ellipsis;
+                padding-right: 5px;
+                max-width: 150px;
+                overflow: hidden;
+            }
+
+            td.cmdstr {
+                .mono-font(12px);
+                color: white;
+                flex: 1 0 0;
+                padding-left: 20px;
+                border-radius: 3px;
+                white-space: pre;
+                max-height: 70px;
+                cursor: pointer;
+                min-width: 300px;
+                padding-top: 4px;
+                padding-bottom: 4px;
+                overflow: hidden;
+
+                .use-button {
+                    visibility: hidden;
+                }
+
+                &:hover .use-button {
+                    visibility: visible;
+                }
+            }
+        }
+    }
+}
+
+
+.webshare-view {
+    .webshare-item {
+        padding: 4px 5px 8px 15px;
+        margin-bottom: 4px;
+        border-top: 1px solid white;
+        display: flex;
+        flex-direction: row;
+        position: relative;
+        min-height: 55px;
+        align-items: center;
+
+        &:first-child {
+            border-top: 0;
+        }
+
+        .webshare-vic {
+            width: 200px;
+
+            .webshare-vic-link {
+                cursor: pointer;
+                
+                &:hover {
+                    text-decoration: underline;
+                }
+            }
+        }
+
+        .actions {
+            display: flex;
+            flex-direction: row;
+            gap: 10px;
+        }
+
+        &:hover {
+            background-color: #222;
+        }
+    }
+}
+
+.bookmarks-view {
+    .bookmarks-list {
+        color: white;
+        margin: 4px 10px 5px 5px;
+
+        .no-bookmarks {
+            color: @term-white;
+            padding: 30px 10px 35px 10px;
+            border-bottom: 1px solid white;
+        }
+    }
+
+    .bookmark {
+        border-bottom: 1px solid #777;
+        padding: 4px 5px 8px 15px;
+        margin-bottom: 4px;
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        max-width: 100%;
+
+        .focus-indicator {
+            top: 0;
+            height: calc(100% - 4px);
+        }
+
+        &.is-editing {
+            padding-top: 8px;
+            padding-bottom: 12px;
+        }
+
+        &.pending-delete {
+            background-color: #522;
+        }
+        
+        .bookmark-content, .bookmark-edit {
+            flex-grow: 1;
+            max-width: calc(100% - 50px);
+        }
+
+        label {
+            color: white;
+            margin-bottom: 4px;
+        }
+
+        textarea {
+            width: 80%;
+            min-width: 50%;
+            color: white;
+            background-color: black;
+
+            &.mono-font {
+                .mono-font(12px);
+            }
+        }
+
+        .bookmark-id-div {
+            display: none;
+            position: absolute;
+            color: #666;
+            right: 5px;
+            bottom: 2px;
+            .mono-font(8px);
+        }
+
+        &:hover .bookmark-id-div {
+            display: block;
+        }
+
+        .bookmark-controls {
+            display: flex;
+            flex-direction: row;
+            font-size: 16px;
+            visibility: hidden;
+            color: @term-white;
+
+            .bookmark-control:first-child {
+                margin-left: 0;
+            }
+
+            .bookmark-control {
+                margin-left: 10px;
+                cursor: pointer;
+                padding: 2px;
+
+                &:hover {
+                    color: @term-bright-white;
+                }
+            }
+        }
+
+        &:hover .bookmark-controls {
+            visibility: visible;
+        }
+    }
+}
diff --git a/src/webshare.less b/src/webshare.less
new file mode 100644
index 000000000..eaa3baca5
--- /dev/null
+++ b/src/webshare.less
@@ -0,0 +1,126 @@
+body.prompt-webshare #main {
+    display: flex;
+    flex-direction: column;
+    
+    .logo-header {
+        display: flex;
+        flex-direction: row;
+        padding: 10px;
+        border-bottom: 1px solid #777;
+        align-items: center;
+        flex-shrink: 0;
+
+        .logo-text {
+            .mono-font(32px);
+            a {
+                color: @prompt-green;
+            }
+        }
+
+        .screen-name {
+            color: white;
+            .mono-font(24px);
+            margin-left: 20px;
+        }
+
+        .download-button {
+            margin-right: 20px;
+        }
+    }
+
+    .webshare-controls {
+        display: flex;
+        flex-direction: row;
+        flex-shrink: 0;
+        height: 40px;
+        align-items: center;
+        padding-left: 20px;
+        padding-right: 20px;
+        background-color: darken(@prompt-green, 30%);
+        color: white;
+
+        .screen-sharename {
+            font-weight: bold;
+        }
+
+        .sync-control {
+            display: flex;
+            flex-direction: row;
+            color: @term-white;
+            font-size: 13px;
+            align-items: center;
+
+            div:first-child {
+                margin-right: 5px;
+            }
+        }
+    }
+
+    .prompt-content {
+        flex-grow: 1;
+        padding: 10px 0;
+        display: flex;
+        flex-direction: row;
+        overflow: hidden;
+
+        .web-screen-view {
+            height: 100%;
+            width: 100%;
+            flex-grow: 1;
+            display: flex;
+            flex-direction: column;
+
+            .lines {
+                height: 100%;
+                flex-grow: 1;
+                padding-top: 0;
+            }
+        }
+    }
+
+    .prompt-footer {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        color: #aaa;
+        border-top: 1px solid #777;
+        height: 50px;
+        padding-left: 20px;
+        padding-right: 20px;
+        flex-shrink: 0;
+
+        .footer-copy {
+            font-size: 12px;
+        }
+
+        a {
+            display: block;
+        }
+    }
+    
+    color: white;
+    
+    #app {
+        color: white;
+    }
+
+    .lines .line-sep {
+        margin-left: 0px;
+        margin-right: 10px;
+    }
+
+    .lines .line.line-cmd {
+        .line-icon.copy-icon {
+            color: @term-white;
+            font-size: 18px;
+
+            &:hover {
+                color: @term-bright-white;
+            }
+        }
+
+        .copied-indicator {
+            z-index: 10;
+        }
+    }
+}