table {
    width: 100%;
    table-layout: fixed; /* 讓 `td` 按照指定比例分配 */
}
td {
    word-wrap: break-word; /* 防止內容太長導致版面錯亂 */
}
   #chatwindow {
         width: 100%;
      }
   #content3 {
      width: 100%;
      display: flex;
   }

   #chatmsg {
      flex-grow: 1;
   }

body {  		/* Light mode styles */

  	background-color: white;
  	color: black;

	div {  /* Targets all div elements on the page */
    		color: black;
	}
	td {  /* Targets all div elements on the page */
    		color: black;
	}
	th {  /* Targets all div elements on the page */
    		color: black;
	}
	hid {  /* Targets all div elements on the page */
    		color: black;
	}
	chat {  /* Targets all div elements on the page */
    		 /* color: DarkKhaki; */
	}
}

body.dark-theme {  	/* Dark mode styles */

  	background-color: black;
  	color: white;

	textarea {
  		background-color: black;
  		color: white; /* Optional: Set text color to white for better readability */
  		border-style: dashed; /* Example: Set a dashed border */

	}
	a {
  		color: #6C9AB0; /* You can use any valid color value */
	}
	div {  /* Targets all div elements on the page */
    		color: white;
	}
	td {  /* Targets all div elements on the page */
    		color: white;
	}
	th {  /* Targets all div elements on the page */
    		color: white;
	}
	hid {  /* Targets all div elements on the page */
    		color: white;
	}
	chat {  /* Targets all div elements on the page */
    		/* color: lightblue;color: white;*/
		
	}
}


.tooltip-container {
    position: relative;
}

.tooltip-icon {
    cursor: pointer;
    font-size: 24px;
    color: #555;
}

.tooltip {
    display: none;
    position: absolute;
    top: 30px;
    left: 0;
    padding: 10px;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    border: 1px solid #ccc;
    z-index: 1000;
}