.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: 20px;
  bottom: 50px;
}

.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;
  height: 30px;
}

.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 {
  background-image: url('https://icons.iconarchive.com/icons/aha-soft/large-user/48/Coffee-break-icon.png');
}

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

.AssistantBox {
  width: 100%;
  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: 0px;
  right: 0px;
  padding: 10px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;

}

#StartBtn {
  position: absolute;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  top: 50%;
  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;
}

.theContent {
  position: absolute;
  height: 100%;
  width: 210px;
  top: 0px;
  left: 0px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  border-width: 1px;
  border-style: solid;
  z-index: 1000;
  border-radius: 15px;
}

#TheBody {
  position: absolute;
  height: 100%;
  top: 0px;
  left: 310px;
}

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

.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: 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;
}

#historyBox {
  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: 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: 1000px;
  height: 660px;
  border-radius: 10px;
}

.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
}

#TeachBtn {
  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;
  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;
  padding: 10px;
  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;
  width: 800px;
  height: fit-content;
  margin-left: -400px;
  margin-top: 130px;
  top: 50%;
  left: 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;
}

#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;
}

.btn1 {
  border-width: 1px;
}

#activityTree {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 30px;
  background-color: lightgray;
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 5px;
  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;
}

.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;
}

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

.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/HumanAskAI.png");
}

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

}

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

.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: 300px;
  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:1024px;
  height: 768px;
  border-radius: 30px;
  border-width: 1px;
  border-style: solid;
  margin-top: -384px;
  margin-left: -512px;
}