:root {
  --e-global-color-text: #000;
  --e-global-secondary-text-color: #FFF;
  --e-primary-background: #FFF;
  --e-secondary-background: #E7F2E9;
}

html {
  background-color: #f1f1f117;
  color: black;
  font-family: sans-serif;
  line-height: 1.4;
}

body {
  margin: 0;
}

.header-bar {
  background-color: var(--e-primary-background);
  transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
  margin-top: 0px;
  margin-bottom: 0px;
  top: 0px;
  left: 0;
  right: 0;
}

.header-bar .logo {
  padding: 15px;
  width: 14%;
}

.header-bar .logo img {
  width: 70%;
}

.main-container {
  background-image: linear-gradient(90deg, rgb(30, 74, 73) 0%, rgb(79,74,116) 100%);
  height: 100%;
}

.red-frame {
  border: 2px solid red;
  padding: 10px;
  margin: 10px;
  background-color: white;
  text-align: center;
}

.chat-title {
  text-align: center;
  font-size: 35px;
  font-weight: 400;
  padding-top: 14px;
  color: var(--e-global-secondary-text-color);
  margin-bottom: 10px;
}

.error-title {
  font-size: 35px;
  font-weight: 400;
}

.error-line {
  font-size: larger;
}

.tsbrhd1 {
  background-color: rgb(114, 16, 5);
  color: rgb(226, 232, 152);
}


.tsbrdiv1 {
  background-color: rgb(252, 251, 251);
  color: rgb(201, 14, 14);
  line-height: 1.8;
}

.terminal-container {
  font-family: "Hind Siliguri", Sans-serif;
  width: 100vw !important;
  height: calc(100vh - 261px) !important;
  padding: 5px;
  background-color: transparent !important;
  color: var(--e-global-color-text) !important;
}

.terminal-container .terminal-scroller {
  background: var(--e-primary-background) !important;
}

.terminal-container .terminal-output span {
  font-family: "Hind Siliguri", Sans-serif !important;
  font-size: 14px !important;
  color: var(--e-global-color-text) !important;
}

.terminal-container .cmd-wrapper span {
  font-family: "Hind Siliguri", Sans-serif !important;
  font-size: 14px !important;
  color: var(--e-global-color-text) !important;
}

/* styles.css */
#urlInput {
  width: 25em;
}

#scan {
  width: 15em;
}

.url-line {
  text-align: center;
  margin-top: 15px;
}

.url-line span {
  color: white;
}

.code-box {
  font-family: monospace;
  width: 25em;
}

.long-code-box {
  font-family: monospace;
  width: 50em;
  background-color: rgb(37, 37, 37);
  color: white;
}

.copy-button {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  background-size: cover;
}

.help-container {
  border-radius: 4px; /* set a border radius to add rounded corners */
  margin-right: 3px; /* set margin to add space around the container */
  margin-left: 3px; /* set margin to add space around the container */
  border: 1px solid #ccc; /* add a border to the container */
  padding: 3px; /* add padding to the container */
  height: calc(35vh); /* set a height for the container */
  overflow-y: scroll; /* add vertical scrollbar when content overflows */
}

.help-section {
  position:absolute;
  margin-top: 10px;
  bottom: 10px;
  height: auto;
}

.help-title {
  text-align: center;
}

#instructions li {
  margin-top: 5px;
}

select {
  color: #999; /* Dimmed color for the disabled option */
}