/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  height: 50px;
  display: flex;
  flex-direction: row;
  position: relative;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Allow scrolling trough opened tabs */
.tab-buttons-container {
  overflow-x: auto;
  white-space: nowrap;
  padding-bottom: 5px; /* Add some space for the scrollbar */
  scrollbar-width: thin;
}

.tab-buttons-container::-webkit-scrollbar {
  height: 6px;
}

.tab-buttons-container::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 3px;
}

.tab-buttons-container::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px 0;
  border: 1px solid #ccc;
  border-top: none;
  /* 100% - height of the tab above */
  height: calc(100% - 50px);
}

#terminal_tab, #tty1_tab, #tty2_tab {
  background: #000;
}

.tab .poweredBy {
  display: flex;
  margin-left: auto;
  margin-right: 0;
  padding: 12px 16px;
}

/* Tab buttons styling */
.tab-buttons {
  display: inline-flex;
  align-items: center;
}

/* New terminal button styling */
.new-terminal-btn {
  display: inline-flex;
  align-items: center;
  background-color: #f8f8f8;
  border: 1px solid #ccc;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 3px;
  font-size: 14px;
  margin-left: 5px;
}

.new-terminal-btn:hover {
  background-color: #e6e6e6;
}

/* Tab links styling */
.tablinks {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

/* Close tab button styling */
.close-tab {
  margin-left: 5px;
  font-size: 12px;
  cursor: pointer;
  color: #888;
}

.close-tab:hover {
  color: #333;
}