.fredericks-web-serial-terminal-app {
    --fredericks-serial-terminal-sticky-top: 0px;
    --fredericks-serial-terminal-admin-offset: 0px;
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 100%;
}

.fredericks-web-serial-terminal-app [data-fredericks-terminal-sticky-region] {
    position: sticky;
    top: calc(var(--fredericks-serial-terminal-sticky-top, 0px) + var(--fredericks-serial-terminal-admin-offset, 0px));
    z-index: 20;
    background: #fff;
}

.admin-bar .fredericks-web-serial-terminal-app {
    --fredericks-serial-terminal-admin-offset: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .fredericks-web-serial-terminal-app {
        --fredericks-serial-terminal-admin-offset: 46px;
    }
}

.fredericks-web-serial-terminal-app .terminalOutput {
    position: relative;
    height: clamp(240px, 31.5vh, 384px);
    min-height: 216px;
    padding: 0;
    margin: 0;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.fredericks-web-serial-terminal-app .terminalButtons {
    position: absolute;
    right: 0;
    top: 0;
    margin: 0;
    padding: 0;
    background: rgba(32, 33, 36, .6);
    color: #fff;
}

.fredericks-web-serial-terminal-app .terminalButtons > button {
    color: #fff !important;
}

.fredericks-web-serial-terminal-app .terminalButtons > button.Mui-disabled {
    color: #aaa !important;
}

.fredericks-web-serial-terminal-app .terminalButtons > button.MuiButtonGroup-groupedTextHorizontal:not(:last-child) {
    border-color: #777 !important;
}

.fredericks-web-serial-terminal-app .codeContainer {
    height: 100%;
    width: 100%;
    background: #202124;
    border-radius: 4px;
    padding: 0;
    margin: 0;
    display: flex;
    overflow-x: auto;
    overflow-y: auto;
    flex-direction: column-reverse;
    resize: vertical;
}

.fredericks-web-serial-terminal-app .codeContainer::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.fredericks-web-serial-terminal-app .codeContainer::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
}

.fredericks-web-serial-terminal-app .codeContainer::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}

.fredericks-web-serial-terminal-app .codeContainer::-webkit-scrollbar-corner {
    background: transparent;
    border-radius: 4px;
}

.fredericks-web-serial-terminal-app .codeContainer::-webkit-resizer {
    display: none;
}

.fredericks-web-serial-terminal-app code {
    font-family: Roboto Mono, monospace;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.87);
}

.fredericks-web-serial-terminal-app .codeContainer code {
    margin: 8px;
    padding: 0;
    font-weight: 300;
    color: inherit;
}

.fredericks-web-serial-terminal-app .codeContainer code > p {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: baseline;
    width: 100%;
    min-width: 0;
}

.fredericks-web-serial-terminal-app span.time {
    font-weight: 300;
    color: #aaa;
    width: auto;
    flex: 0 0 auto;
}

.fredericks-web-serial-terminal-app span.output {
    color: #fff;
    min-width: 0;
}

.fredericks-web-serial-terminal-app span.userInput {
    color: #fbbc05;
    font-weight: 700;
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    border-bottom: 1px solid;
}

.fredericks-web-serial-terminal-app .terminalButtons > button.terminalDisconnectButton {
    color: #ff8a80 !important;
}

.fredericks-web-serial-terminal-app .terminalButtons > button.terminalDisconnectButton:hover {
    background: rgba(211, 47, 47, .28);
}