.card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card-header {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.chat-area {
  border-radius: 15px;
  flex-grow: 1;
  overflow-y: auto;
  height: 100%;
}

#chat-content {
  flex-grow: 1;
  overflow-y: auto;
}

.form-outline .form-control:focus~.form-label {
  color: #39c0ed;
  transition: all 0.2s linear;
}

.form-outline .form-control~.form-label {
  color: #bfbfbf;
}

.fullwidth {
  width: 100%;
}

.botInput {
  margin-right: 10px;
  bottom: 40px;
}

.inputBar {
  width: 100%;
}

.ArrayOfButtons {
  width: 99.9%;
  display: flex;
  align-items: center;
  flex-direction: row;
  align-items: space-around;
  background-color: yellow;
}

#thesmallTitle {
  font-size: x-Large;
  width: fit-content;
  height: 40px;
  font-weight:bold;
  font-variant: small-caps;
  color: #f2f2f2;
}

.theContainer {
  position: absolute;
  right: 10px;
  left: 10px;
  top: 10px;
  bottom: 22px;
  display: none;
}

#dataInput {
  position: absolute;
  bottom: 10px;
  left: 20px;
  right: 58px;
  height: 48px;
}

.avatar {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  border-radius: 50%;
}

#submitBtn {
  position: absolute;
  bottom: 10px;
  width: 48px;
  right: 20px;
  height: 48px;
  border-radius: 50%;
  background-image: url("https://icons.iconarchive.com/icons/fa-team/fontawesome-regular/48/FontAwesome-Regular-Paper-Plane-icon.png");
}

.UserBox {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 5px;
}

.UserBox_Content {
  background-color: rgba(57, 192, 237);
  padding: 10px;
  border-radius: 10px;
  min-height: 48px;
}

.UserBox_Btn {
  display: none;
  background-image: url('https://icons.iconarchive.com/icons/aha-soft/large-user/48/Coffee-break-icon.png');
}

.AssistantBox_Btn {
  display: none;
  background-image: url('https://icons.iconarchive.com/icons/aha-soft/large-user/48/Notary-icon.png');
}

.AssistantBox {
  width: fit-content;
  display: flex;
  align-items: flex-start;
  gap: 5px;
}

.AssistantBox_Content {
  background-color: rgba(229, 255, 0);
  padding: 10px;
  border-radius: 10px;
  min-height: 48px;
  gap: 3px;
}

#responseDiv {
  position: absolute;
  bottom: 50px;
  top: 50px;
  left: 10px;
  right: 10px;
  padding: 10px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;

}

#StartBtn {
  position: absolute;
  width: 200px;
  height:200px;
  margin-left: -100px;
  top: -220px;
  left: 50%;
  display: none;
  border-width: 1px;
  border-style: solid;
  font-size: x-large;
  color: red;
  background-image: url("/img/logoSPL0.png");
  z-index: 9;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 50%;
}

blockquote {
  margin-left: 40px;
  /* adds space to the left */
  margin-right: 40px;
  /* adds space to the right */
  padding: 20px;
  /* adds space inside the blockquote */
  border-left: 4px solid #ccc;
  /* adds a vertical line to the left */
  font-style: italic;
  /* makes text italic */
  background-color: #f9f9f9;
  /* sets a background color */
  border-radius: 10px;
}

.question {
  font-weight: bold;
  font-style: italic;
  padding: 5px;
}

.choice {
  text-indent: 2em;
}

.theCode {
  padding: 10px;
  width: 100%;
}

.FormatedTable {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%
}

.FormatedTable td,
.FormatedTable th {
  border: 1px solid #ddd;
  padding: 2px;
  vertical-align: middle;
}

.FormatedTable tr:nth-child(even) {
  background-color: #f2f2f2;
}

.FormatedTable tr:hover {
  background-color: #ddd;
}

.FormatedTable th {
  padding-top: 2px;
  padding-bottom: 2px;
  text-align: center;
  background-color: #3A454b;
  color: white;
  font-weight: bold;
}

.FormatedTable td {
  color: rgb(10, 10, 10);
  text-align: center;
}




.DetailedTable {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%
}

.DetailedTable td,
.DetailedTable th {
  border: 1px solid #ddd;
  padding: 2px;
  vertical-align: middle;
}

.DetailedTable tr:nth-child(even) {
  background-color: black
}

.DetailedTable tr:hover {
  background-color: rgb(0, 21, 255)
}

.DetailedTable th {
  padding-top: 2px;
  padding-bottom: 2px;
  text-align: center;
  background-color: #07689c;
  color: white;
  font-weight: bold;
}

.DetailedTable td {
  color: rgb(239, 234, 234);
  text-align: left;
}



#TheITSEntry {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
}

#TheITSEntry td,
#TheITSEntry th {
  border: 1px solid #ddd;
  padding: 8px;
}

#TheITSEntry tr:nth-child(even) {
  background-color: #f2f2f2;
}

#TheITSEntry tr:hover {
  background-color: #ddd;
}

#TheITSEntry th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}

#theProcessedPanel {
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  padding: 20px;
  z-index: 100;
}

.theContent {
  position: absolute;
  height: 100%;
  width: fit-content;
  top: 0px;
  left: 0px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 5px;
  border-width: 1px;
  border-style: solid;
  z-index: 1000;
  border-radius: 15px;
  background-color:#e7e7e7
}

#theBodyContainer{
  overflow: hidden;
}

.theKCBtn {
  width: 150px;
  border-radius: 10px;
  background-color: rgb(230, 230, 230);
  padding: 5px;
  border-width: 0.2px;
}

.LearnBtn{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-image: url("/img/RSS-Reader-Green-icon.png");
}
#theHTMLContainer{
  width: 640px;
  height: 480px;
  position: absolute;
  top:50%;
  left: 50%;
  margin-top: -240px;
  margin-left:-320px;
  padding: 10px;
  border-radius: 10px;
  border-color: #07689c;
  border-width: 1px;
  border-style: solid;
  display: none;
  background-color: #f2f2f2;
  overflow-y: auto;
}
.theTitle {
  width: 200px;
  border-radius: 0px;
  background-color: rgb(2, 55, 9);
  padding: 5px;
  text-align: center;
  color: white;
  text-decoration: underline;
}

#theConfigWin {
  display: none;
  background-color: lightgray;
  border-radius: 10px;
  padding: 20px;
  width: fit-content;
  height: fit-content;
  border-width: 1px;
  border-style: solid;
  z-index: 10;
}

#StartNewBtn {
  display: none;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
}

.configuInput {
  width: 300px;
  height: 50px;
  ;
}

#ProgressBtn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: none;
  font-size: xx-small;
  z-index: -1
}

#OpenAIBtn {
  position: absolute;
  width: 50px;
  height: 50px;
  right:10px;
  top:10px;
  display: block;
  border-width: 1px;
  border-style: solid;
  border-radius: 50%;
  background-image: url("/openai.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: none;
  font-size:xx-small;
  background-color: #4CAF50;
  opacity: 0.5;
  z-index: 10000;
}
#OpenAIBtnold {
  position: absolute;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  top: 50%;
  left: 50%;
  display: block;
  border-width: 1px;
  border-style: solid;
  border-radius: 50%;
  background-image: url("/openai.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: none;
  font-size: xx-large;
  background-color: #4CAF50;
  z-index: 10000;
}

#TheDiscussion {
  display: none;
  left: 30px;
  right: 30px;
  top: 80px;
  bottom: 80px;
  position: absolute;
}

#theDiscussionFrame {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}

#FeedbackWin {
  position: absolute;
  height: 800px;
  width: 1000px;
  overflow: auto;
  background-color: gray;
  min-width: 100px;
  min-height: 100px;
  margin-left: -500px;
  margin-top: -400px;
  top: 50%;
  left: 50%;
  display: none;
  z-index: 100001;
  padding: 20px;
  background-color: #39c0ed;
}


.thCellForContent {
  max-height: 100px;
  overflow: auto;
  vertical-align: top;
}

#ConfigueVoice {
  position: absolute;
  width: 800px;
  height: 700px;
  background-color: cadetblue;
  display: none;
  border-radius: 30px;
  border-width: 2px;
  border-style: solid;
}

.CloseBtn {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 2;
}

.GameDisplay {
  display: none;
  width:100%;
  bottom:0px;
  top: 50px;
  left: 0px;
  padding: 20px;
  border-radius: 20px;
  position: absolute;;
}

.GameDisplay00 {
  display: none;
  width: 1045px;
  height: 710px;
  padding: 20px;
  z-index: 3;
  position: absolute;
  border-style: solid;
  border-radius: 10px;
  top: 50%;
  left: 50%;
  margin-left: -523px;
  margin-top: -355px;

}

#jeopardyFrame {
  width:100%;
  height:100%;
  top: 0px;
  left: 0px;
  padding: 20px;
  position: absolute;
}

.UpDownBtn {
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  max-width: 48px;
  max-height: 48px;
  border-radius: 50%;
  border-width: 0px;
  background-color: transparent;
}

.theActionArea {
  vertical-align: middle;
  display: flex;
  justify-content: center;
  /* align horizontally */
  align-items: center;
}

.upBtn {
  background-image: url("https://icons.iconarchive.com/icons/graphicloads/100-flat-2/48/arrow-up-icon.png");
}

.downBtn {
  background-image: url("https://icons.iconarchive.com/icons/ampeross/smooth/48/Apple-Books-Border-icon.png");
  opacity: 0.5;
}

.g-signin2 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 36px;
  margin-left: -60px;
  margin-top: -18;
  display: block;

}

#LoginPanel {
  width: 640px;
  height: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -320px;
  margin-top: -250px;
  display: none;
  border-radius: 20px;
  border-width: 1;
  border-style: double;
  z-index: 1001;
  background-color: azure;
}

.toCenter {
  align-content: center;
  width: 100%;
  padding: 30px;
}

.buttonPanel {
  display: flex;
  width: 100%;
  justify-content: space-around;
  border-radius: 20px;
  padding: 2px;
}

#loginiFrame {
  width: 100%;
  height: 100%;
  border-radius: 25px;
}

#login_logout {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: none;
  width: fit-content;
}

#disclamer {
  font-size: x-small;
  float: right;
}

.login_logout {
  border-radius: 10px;
}

#theTitle {
  display: flex;
  width: 100%;
  justify-content: space-around;
  border-radius: 20px;
  padding: 2px;
  font-size: x-large;
  font-family: sans-serif
}

#PrefBtn {
  border-radius: 5px;
  width: fit-content;
  display: none;
}

.QuestionMark {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: absolute;
  top: 15px;
  right: 15px;
}

#theEmbeded iframe {
  width: 100%;
  height: 100%;
}

.theEmbeded {
  position: absolute;
  max-height: 100%;
  max-width: 100%;
  height: 650px;
  width: 1010px;
  padding: 10px;
  top: 50%;
  left: 50%;
  margin-top: -350px;
  margin-left: -505px;
  z-index: 1001;
  border-radius: 30px;
  background-color: transparent;
  display: none;
}

.theiFrame {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

#cloceBtn {
  position: absolute;
  top: 0px;
  right: 0px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background-color: red;
}

#WizardInterface {
  display: none;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: cadetblue;
  z-index: 1000;
}

#theWizardBtn {
  width: 200px;
  border-radius: 10px;
  background-color: rgb(112, 177, 121);
  padding: 5px;
  height: 60px;
  display: none;
  background-image: url("/img/socrates.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.wizardBtn {
  width: fit-content;
}

.theTopPanel {
  position: absolute;
  top: 21px;
  height: fit-content;
  width: fit-content;
  max-width: 90%;
  max-height: 600px;
  display: flex;
  gap: 5px;
  z-index: 1000;
  border-radius: 15px;
  border-bottom-right-radius: 0px;
  border-width: 1px;
  border-style: solid;
  flex-direction: row;
  flex-wrap: wrap;
  /* Enable flex items to wrap */
  justify-content: space-around;
  /* Distribute items evenly */
}

.theTopPanelOld {
  position: absolute;
  height: 70px;
  width: 100%;
  top: 0px;
  left: 0px;
  display: flex;
  flex-direction: row;
  gap: 5px;
  padding: 10px;

}

#TheWizardBody {
  position: absolute;
  height: 100%;
  top: 0px;
  left: 310px;
  padding: 10px;
}

#theMessage {
  position: absolute;
  right:10px;
  left:10px;
  height: fit-content;
  margin-top: 130px;
  top: 50%;
  display: block;
  border-width: 1px;
  border-style: solid;
  border-radius: 30px;
  font-size: large;
  z-index: 1000;
  background-color: #39c0ed;
  display: none;
  padding: 20px;
}

.OutPutClass {
  position: absolute;
  width: fit-content;
  height: fit-content;
  border-radius: 20px;
  padding: 30px;
  border-width: 1px;
  border-style: solid;
  display: none;
}

.translateBtn {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.Deliver {
  border-radius: 5px;
  padding: 5px;
  background-color: whitesmoke;
}

thekey {
  font-weight: bold;
}

.theMessage {
  font-weight: bold;
}

.theDescription {
  font-style: italic;
  font-size: smaller;
  text-indent: 50px;
}

#Status {
  bottom: 0px;
  height: 30px;
  left: 0px;
  width: 100%;
  display: flex;
  background-color: lightgrey;
  z-index: 1000;
  position: absolute;
  gap: 5px;
  display: none;
}

#histBtn1 {
  width: 30px;
  height: 30px;
}

#MoreDetails {
  top: 0;
  left: 10;
  width: 89%;
  height: fit-content;
  position: absolute;
  display: none;
  background-color: rgb(70, 63, 63);
  padding: 10px;
}


#activityTree {
  position: absolute;
  top: 0px;
  left: 0px;
  height: fit-content;
  background-color: lightgray;
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: center;
  /* Center children horizontally */
  align-items: center;
  /* Center children vertically */
}

#Tabs {
  position: absolute;
  top: 30px;
  left: 0px;
  background-color: lightblue;
  width: 100%;
  bottom: 0px;
  flex-direction: row;
  display: flex;
}

.TheTabs {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}

.btn1 {
  border-radius: 5px;
  border-width: 1px;
}

.btn2 {
  border-radius: 5px;
}
.action-btn{
  border-radius: 50%;
  width: 30px;
  height: 30px;
}
#editWholeBookmark{
  position:absolute;
  left:0px;
  top:0px;
  display:none;
}
.highlight {
  background-color: yellow;
}

.withSpeech {
  cursor: url("https://icons.iconarchive.com/icons/google/noto-emoji-people-clothing-objects/48/12134-mouth-icon.png");
}

.tinyfont {
  font-size: small;
  color: black;
}

#theAboutBtn {
  position: absolute;
  top: 2px;
  right: 2px;
  width: fit-content;
  display: none;
}

#theInform {
  background-color: #39c0ed;
}

#TheTotalArea {
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;

}

.feedbackbtn {
  height: 48px;
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  background-image: url("/img/Feedback-icon.png");
  border-radius: 8px;
  display: none;
}

.discussion {
  background-color: bisque;
  padding: 5x;
  border-radius: 5px;
}

.role {
  font-weight: bold;
}

.toggleTheContent {
  position: absolute;
  top: -1px;
  right: 0px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border-bottom-right-radius: 0px;
  display: block;
}

.ToggleTopPanel {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border-bottom-right-radius: 0px;
  display: none;
}

.clue {
  font-weight: bold;
  font-style: italic;
  padding: 5px;
}

.GeopardyCategory {
  font-weight: bold;
}

.theLeadFeedback {
  font-weight: bold;
  font-style: italic;
  padding: 5px;
}

.theEndFeedback {
  font-style: italic;
  padding: 5px;
}

#utilityBtns {
  display: flex;
  gap: 10px;

}

#theInformation_0 {
  width: 72px;
  height: 72px;
  background-image: url("/img/Help.png");
}

#Pref_0{
  background-image: url("/img/Configure.png");
  width: 72px;
  height: 72px;
  display: block;
}
#feedback_0 {
  background-image: url("/img/Configure.png");
  width: 72px;
  height: 72px;
  display: none;

}

#PointBelow {
  width: 150px;
  height: 70px;
  background-image: url("/img/ConceptMap.png");
  background-size: cover;
  background-position: center;
  display: none;
}

.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.enabled {
  opacity: 1;
  cursor: default
}

.adjustedScreen {
  left: 300px
}

.fullScreen {
  left: 30px
}

.bookmarkBtns {
  display: none
}

#PromptEditor {
  z-index: 10000;
  background-color: #4CAF50;
  position: absolute;
  left: 100px;
  right: 100px;
  top: 100px;
  padding: 10px;
  border-radius: 10px;
  border-width: 1px;
  display: none;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}

.read-only {
  background-color: #e7e7e7;
}

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: none; /* Hidden by default */
}
#customDialog {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000; /* Ensure it's above other content */
  display: none; /* Hidden by default */
  padding: 20px;
  width: 300px; /* Adjust as per requirement */
}

/* Dialog content styling */
#dialogForm {
  display: flex;
  flex-direction: column;
}

#dialogForm div {
  margin-bottom: 10px;
}

#dialogForm label {
  margin-bottom: 5px;
  font-weight: bold;
}

#dialogForm input[type="text"],
#dialogForm textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#dialogForm textarea {
  resize: vertical; /* Allow vertical resize */
}

/* Buttons styling */
#dialogForm button {
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 10px;
  margin-top: 10px;
}

#submitDialog {
  background-color: #4CAF50;
  color: white;
}

#closeDialog {
  background-color: #f44336;
  color: white;
}

#dialogForm button:hover {
  opacity: 0.8;
}
svg{
  position: absolute;
  display: none;
  background-color: #e7e7e7;
  top:50%;
  left: 50%;
  width:600px;
  height: 480px;
  border-radius: 30px;
  border-width: 1px;
  border-style: solid;
  margin-top: -240px;
  margin-left: -300px;
}
#custom-menu{
  position: absolute;
  width: fit-content;
  height: fit-content;
  display: none;
  z-index: 10000;
  padding: 10px;
}
.SurveyBtn{
  float:right;
}
#TheBody_0{
  padding-top: 100px;
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 50px;
  display: none;
  overflow-y: auto;
}
.ketTerm{
  font-weight: bold;
}
h1{
  font-size: x-large;
}
h2{
  font-size:large
}
h3{
  font-size: medium;
}
.SpeialAnserList li{
  list-style-type: none;
}
.toStopBtn{
  background-image: url("/img/Button-stop-icon.png");
  width: 48px;
  height: 48px;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 50%;
}

.ScoreBtn{
  background-image: url("/img/Score-icon.png");
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.theDoBtn{
  width:fit-content;
  height: 48px;
  display: none;
  top:3px;
  right:3px;
  position: absolute;
}
.helpBtnforInteraction{
  background-image: url("/img/helpICON.png");
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
#theTopBar{
  padding: 0px;
  height: fit-content;
  display: flex;
  flex-direction: row;
  background-color: #39c0ed;
  width:100%;
  min-height: 52px;
  align-items: center;
  align-content: center;
}
#TabContent{
  background-color: #ddd;
}
.Bookmarked{
  border-radius: 0px;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 400px;

}

.close {
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
  width: fit-content;
  position: absolute;
  right:10px;
  top:2px
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

textarea {
  width: 100%;
  height: 90%;
}
.underlinetext{
  text-transform: capitalize;
  text-decoration: underline;
  text-wrap: nowrap;
}
.underlinetextNoClick{
  text-transform: capitalize;
  text-wrap: nowrap;
}
#helpText{
  display: block;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  padding: 5px;
  height: fit-content;
  background-color: azure;
}


#theContextMenu {
  display: none;
  position: absolute;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  z-index: 1000;
}
#theContextMenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#theContextMenu li {
  padding: 8px 12px;
  cursor: pointer;
}
#theContextMenu li:hover {
  background-color: #f0f0f0;
}

#explanations{
  width: 1024px;
  height: 768px;
  height: fit-content;
  padding: 20px;
  z-index: 30000;
  background-color: #bfbfbf;
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -512px;
  margin-top: -384px;
  border-radius: 20px;
  overflow-y: auto;
}
.disabled {
  pointer-events: none;
  opacity: 0.5; /* Optional: to visually indicate the div is disabled */
}
pre {
  max-width: 80%;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

#Login{
  font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
    z-index: 1000000;
}

.login-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: fit-content;
  text-align: center;
}

/*
.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
}

.form-group input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}
button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  border: none;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}
*/
#message {
  margin-top: 15px;
  color: red;
}
.hidden{
  display: none;
}
#thesvg{
  z-index: 1002;
}
.tooltip{
  max-width: 300px;
  height: fit-content;
  z-index: 1003;
}
.theTD{
  width:100%;
}


#bookmarkBox {
  position: absolute;
  height: fit-content;
  max-height: 400px;
  left: 100px;
  right: 100px;
  overflow: auto;
  background-color: gray;
  min-width: 100px;
  min-height: 100px;
  top: 50px;
  display: none;
  z-index: 100001;
  padding: 10px;
  background-color: #39c0ed;

}

#UserDetailBox {
  position: absolute;
  height: fit-content;
  left: 100px;
  right: 100px;
  overflow: auto;
  background-color: gray;
  min-width: 100px;
  max-height: 100%;
  bottom: 50px;
  display: none;
  z-index: 100002;
  padding: 10px;
  background-color: #026661;
  border-width: 1px;
  border-style: outset;

}

#theExamples{
  position: absolute;
  left: 100px;
  right: 100px;
  overflow: auto;
  background-color: gray;
  bottom: 100px;
  top: 100px;
  display: none;
  z-index: -1;
  padding: 30px;
  border-width: 1px;
  border-style: outset;
}

#historyBox {
  position: absolute;
  height: fit-content;
  max-height: 400px;
  left: 100px;
  right: 100px;
  overflow: auto;
  background-color: gray;
  min-width: 100px;
  min-height: 100px;
  top: 50px;
  display: none;
  z-index: 100001;
  padding: 10px;
  background-color: #39c0ed;

}
.hidenDiv{
  display: none;
}


.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: fit-content;
  height: fit-content;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 10000000000;
  padding: 10px;
  border-radius: 5px;
  border-width: 1px;
  border-style: solid;
  border-color: #39c0ed;
}
.modal-contentOld {
  background-color: white;
  width: 100%;
  height: 100%;
  padding: 20px;
  position: relative;

}
.modal-content iframe {
  width: 100%;
  height: 100%;
  border: none;
}
.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: red;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

#TestInput{
  width:100%
}
#Submit{
  color:white
}
.TheNewReportTable{
  display: none;
  width: fit-content;
}
#theCode{
  width:95%;
  height: 150px;
}

#TheAvatarTable{
  width: fit-content;
  border-radius: 5px;
  border-width: 1px;
  border-style: solid;
  border-color: #39c0ed;
}
#TheAvatar{
  background-color: transparent;
}

#theSelection{
  display: none;
}
.ReportTable {
  width: 800px;
}

.SpeechEditor {
  width: 100%
}

.actionSelectionPulldown {
  width: 150px;
}

#TheAvatar {
  background-color: lightgrey;
  border-radius: 5px;
  border-width: 1px;
  border-style: dashed;
}

#advancedConfig {
  background-color: lightgrey;
  border-radius: 5px;
  border-width: 1px;
  border-style: dashed;
}

.SpeechEditor {
  height: 50px;
}

.Col_do {
  width: 100px;
}

.Col_order {
  width: 25px;
}
.theCenteredCell{
  text-align: center; /* Horizontal centering */
  vertical-align: middle; /* Vertical centering */
  display: flex;
  align-items: center; /* Vertical centering */
  justify-content: center; /* Horizontal centering */
  text-align: center; /* Ensure text inside is centered */
}
#theCaptions{
  display: none;
  background-color: #ccc;
  position: absolute;
  height: fit-content;
  top: 0px;
  left: 0px;
  padding: 10px;
  border-radius: 10px;
}
.launchAvatar{
  position: absolute;
  top:5px;
  right:5px;
  border-radius: 10px;
}
.CloseExplanantionBtn{
  position: absolute;
  bottom:5px;
  right:5px;
  border-radius: 10px;
}
#theDisplayedLoginInfor{
  position: absolute;
  display:block;
  bottom:5px;
  right:5px;
  width: fit-content;
  height:fit-content;
  display:flex;
  align-items:end;
  flex-direction: row;
  z-index: 1000000;
}
#theUserNameLabel{
  padding-left: 5px;
  padding-right: 5px;
  display: flex;
  flex-direction: row;
  gap: 5px;
  font-weight: bold;
}
.helpBtn{
  height: 25px;
  width: 25px;
  border-radius: 50%;
  background-image: url("https://icons.iconarchive.com/icons/ionic/ionicons/48/help-sharp-icon.png");
  background-size: cover; /* This makes the background image cover the entire element */
  background-position: center; /* This centers the image in the element */
  background-repeat: no-repeat; /* This prevents the image from repeating */

}

.tryBtn{
  height: 25px;
  width: 25px;
  border-radius: 50%;
  background-image: url("https://icons.iconarchive.com/icons/pictogrammers/material-light/48/play-icon.png");
  background-size: cover; /* This makes the background image cover the entire element */
  background-position: center; /* This centers the image in the element */
  background-repeat: no-repeat; /* This prevents the image from repeating */

}
#theCogfigAvatarBtn{
  display: block;
}
.FunctionBtn{
  border-radius: 5px;
  border-width: 1px;
}

.DesktopOnly{
  top:0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

#URightLogo{
  right:0px;
  bottom: 0px;
}

#TopightLogo{
  right:10px;
  top: 10px;
}
.theLogo{
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-position: center center;
  background-repeat: no-repeat;  
  background-size: 100% 100%;
}
#centerLogo{
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  background-color: white;
  border-color: blue;
  border-style: solid;
  border-width: 1px;
}