html, body {
  height: 100%;
  width: 100%;
}

html, body, * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.section-chat-boxes {
  flex: 1;
}

#speech_text-imb {
  padding-bottom: 10px;
}

#trans_text-imb {
  padding-top: 10px;
}

hr {
  border-color: var(--hr-color,BlueViolet);
}

table {
  width: auto;
  border-collapse: separate;
  border-spacing: 0;
  background-color: var(--bubble-background-color, rgba(99, 99, 99, 0.50));
  border: var(--border-width, 5px) var(--border-line-style, solid)
    var(--border-color, BlueViolet);
  border-radius: var(--border-radius, 25px);
  padding: var(--padding, 50px);
  margin: var(--margin, 5px);
}

.translatorAlign {
  font-weight: 0;
  text-align: center;
  vertical-align: top;
  -webkit-text-stroke-color: BlueViolet;
  -webkit-text-stroke-width: 0px;
}

.translatorText {
  font-family: var(--font-family, Arial);
  font-weight: var(--font-weight, 900);
  background: var(--background-color, rgba(99, 99, 99, 0));
  color: var(--font-color, rgb(0, 0, 0));
  font-size: var(--font-size, 30px);
  line-height: var(--line-height, 1);
  letter-spacing: var(--letter-spacing, 0px);
  word-spacing: var(--word-spacing, 0px);
  -webkit-text-stroke: var(--webkit-text-stroke-size, 0.5px)
    var(--webkit-text-stroke-color, BlueViolet);
}

.outline {
  text-shadow: 0 var(--outline-offset, 1px) var(--outline-color, BlueViolet),
    var(--outline-offset, 1px) 0 var(--outline-color, BlueViolet),
    0 var(--outline-offset-negative, -1px) var(--outline-color, BlueViolet),
    var(--outline-offset-negative, -1px) 0 var(--outline-color, BlueViolet);
}

.shadow {
  filter: drop-shadow(
    var(--shadow-offset-horizontal, 0px) var(--shadow-offset-vertical, 0px)
      var(--shadow-blur, 0px) var(--shadow-color, BlueViolet)
  );
}


p {
  margin: 0;
}

table.center {
  margin-left: auto;
  margin-right: auto;
}

table td {
  /*word-break: break-all;*/
  overflow-wrap: break-word;
  padding: var(--padding, 5px);
}

.button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.topHeader {
  background-color: BlueViolet;
  padding: 10px;
  border-bottom: solid 1px #cacaca;
  color: white;
}

.panelHeading {
  background-color: BlueViolet !important;
  padding: 0 1rem;
}

.panelBody {
  overflow-y: scroll;
}

.live-chat-wrapper {
  position: relative;
  padding: 10px;
  flex: 1;
}

#livechatc {
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 20px; /* To prevent scroll bar overlap */
}

#livechatc .subscribe {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

#livechatc .message {
  border-radius: 5px;
  overflow-wrap: anywhere;
}

.settings-toggle {
  cursor: pointer;
  font-size: 24px;
}

.settings-menu {
  display: none;
  padding: 20px;
  border: 1px solid #333;
  border-radius: 5px;
}

.chat-bubble {
  justify-content: space-between;
  align-items: stretch;
  padding: 0px;
  margin-top: 1px;
  margin-bottom: 1px;
  border-radius: 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  border: solid;
  background-color: #3d3d3d;
}

@media (min-width: 600px) {
  .chat-bubble {
    display: flex;
  }
}


.username-container {
  background-color: #505050;
  line-height: 1.15em;
  flex: 1 80px;
  display: flex;
  align-items: center;
  padding: 8px 15px;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.message-container {
  background-color: #392936;
  line-height: 1.1em;
  flex: 5;
  display: flex;
  align-items: flex-start;
  padding: 8px 15px;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
}

.buttons-container {
  background-color: #3c012b;
  flex: 3;
  display: flex;
  align-items: center;
  padding: 0px;
}

.buttons {
  display: flex;
  justify-content: center;
  align-items: center;
}

.button {
  border: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin-left: 5px;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}

.speaker-icon {
  margin-right: 5px; /* Add some space between speaker icon and voice name */
}

.voice-name {
  font-size: 12px; /* Decrease font size for voice name */
  color: #f0f0f0; /* Keep the same text color as username */
}

.speaker-info {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin-bottom: 5px;
}

#chatContainer {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.message-at-reference {
  opacity: 0.5;
  font-style: italic;
}