.terminal-body {
   overflow: hidden;
}

.terminal-body #mmain {
   box-sizing: border-box;
   height: calc(100vh - .5rem);
}

.terminal-page {
   --terminal-background: #000;
   --terminal-foreground: #f1f1f1;
   --terminal-cursor: #f1f1f1;
   display: grid;
   grid-template-rows: auto auto minmax(0, 1fr);
   box-sizing: border-box;
   min-width: 0;
   max-width: 100%;
   height: 100%;
   min-height: 0;
   max-height: none;
   margin: 0 .5rem 0 0;
   border: 1px solid #c8c8c8;
   background: var(--terminal-background);
   overflow: hidden;
}

.terminal-page-header {
   grid-row: 1;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 1rem;
   padding: .35rem 1rem;
   border-bottom: 1px solid #d2d2d2;
   background: #fff;
   color: #151515;
   font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
   font-size: .8rem;
}

.terminal-session,
.terminal-controls {
   display: flex;
   align-items: center;
   gap: .65rem;
}

#terminal-new {
   box-sizing: border-box;
   width: 1.6rem;
   height: 1.6rem;
   border: 1px solid #0b6fc7;
   border-radius: 2px;
   background: #fff;
   color: #075fae;
   font: inherit;
   font-size: 1.25rem;
   line-height: 1;
   cursor: pointer;
}

#terminal-location {
   color: #4a4a4a;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.terminal-tabs {
   grid-row: 2;
   flex: none;
   min-width: 0;
   margin: 0;
   padding: .25rem .35rem 0;
   gap: .35rem;
   overflow-x: auto;
   background: #fff;
}

.terminal-tabs[hidden] {
   display: none;
}

.terminal-tabs .mtab {
   display: flex;
   align-items: center;
   gap: .35rem;
   min-width: 0;
   max-width: 15rem;
   padding: .3rem .45rem;
}

.terminal-tabs .mtab.active {
   border-color: var(--terminal-background);
   background: var(--terminal-background);
   color: var(--terminal-foreground);
}

.terminal-tabs .mtab.terminal-tab-command {
   max-width: none;
}

.terminal-tab-command .terminal-tab-name {
   overflow: visible;
}

.terminal-tab-name {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.terminal-tab-close {
   box-sizing: border-box;
   flex: none;
   width: 1.1rem;
   height: 1.1rem;
   padding: 0;
   border: 0;
   border-radius: 2px;
   background: transparent;
   color: #404040;
   font: inherit;
   line-height: 1;
   cursor: pointer;
}

.terminal-tab-close:hover,
.terminal-tab-close:focus-visible {
   background: #b8caca;
}

.terminal-tabs .mtab.active .terminal-tab-close {
   color: var(--terminal-foreground);
}

.terminal-panels {
   grid-row: 3;
   position: relative;
   min-width: 0;
   min-height: 0;
   background: var(--terminal-background);
}

.terminal-panel {
   position: absolute;
   inset: 0;
   min-width: 0;
   min-height: 0;
   visibility: hidden;
   pointer-events: none;
}

.terminal-panel.active {
   z-index: 1;
   visibility: visible;
   pointer-events: auto;
}

.terminal-container {
   box-sizing: border-box;
   width: 100%;
   height: 100%;
   min-width: 0;
   min-height: 0;
   overflow: hidden;
   text-align: left;
}

.terminal-controls {
   flex: none;
   font-family: verdana, tahoma, sans-serif;
   font-size: .82rem;
   font-weight: normal;
}

.terminal-controls select,
.terminal-controls button {
   box-sizing: border-box;
   height: 2rem;
   border: 1px solid #0b6fc7;
   border-radius: 2px;
   background: #fff;
   color: #075fae;
   font: inherit;
   padding: 0 .65rem;
}

.terminal-font-size {
   display: flex;
}

.terminal-font-size button,
.terminal-font-size output {
   box-sizing: border-box;
   display: inline-grid;
   place-items: center;
   height: 2rem;
   min-width: 2.1rem;
   border: 1px solid #d2d2d2;
   background: #fff;
   color: #151515;
   font: inherit;
}

.terminal-font-size button {
   cursor: pointer;
}

.terminal-font-size button:first-child {
   border-radius: 2px 0 0 2px;
}

.terminal-font-size button:last-child {
   border-radius: 0 2px 2px 0;
}

.terminal-font-size output {
   min-width: 2.5rem;
   border-left: 0;
   border-right: 0;
}

.terminal-controls select {
   min-width: 5.5rem;
}

.terminal-controls button {
   cursor: pointer;
}

.terminal-controls button:hover,
.terminal-controls button:focus-visible {
   background: #e9f4ff;
}

.terminal-page[data-appearance="dark"] {
   --terminal-background: #28332d;
   --terminal-foreground: #e5ece7;
   --terminal-cursor: #e5ece7;
}

.terminal-page[data-appearance="black"] .xterm-viewport,
.terminal-page[data-appearance="dark"] .xterm-viewport {
   scrollbar-color: #607168 #eef2ef;
}

.terminal-page[data-appearance="black"] .xterm-viewport::-webkit-scrollbar,
.terminal-page[data-appearance="dark"] .xterm-viewport::-webkit-scrollbar {
   width: 12px;
}

.terminal-page[data-appearance="black"] .xterm-viewport::-webkit-scrollbar-track,
.terminal-page[data-appearance="dark"] .xterm-viewport::-webkit-scrollbar-track {
   background: #eef2ef;
}

.terminal-page[data-appearance="black"] .xterm-viewport::-webkit-scrollbar-thumb,
.terminal-page[data-appearance="dark"] .xterm-viewport::-webkit-scrollbar-thumb {
   background: #607168;
   border: 2px solid #eef2ef;
   border-radius: 6px;
}

.terminal-page[data-appearance="light"] {
   --terminal-background: #d8e0da;
   --terminal-foreground: #142019;
   --terminal-cursor: #142019;
}

.terminal-page[data-appearance="white"] {
   --terminal-background: #fff;
   --terminal-foreground: #111;
   --terminal-cursor: #111;
}

.terminal-container .xterm {
   text-align: left;
}

@media (max-width: 650px) {
   .terminal-page-header {
      align-items: flex-start;
      flex-direction: column;
   }

   .terminal-controls {
      width: 100%;
      justify-content: flex-end;
   }
}