body {
  display: flex;
  flex-direction: column;
  justify-content: center;

  color: black;
  font-size: 20px;
  background-color: rgb(255, 255, 255);

}


/* body text */
.text-body {
  font-size: 20px;
  color: black;
}

.pagetextcontent {
  display: flex;
  flex-direction: column;
  width: 60%;
}

/* General Styling */
body {
  font-family: Arial, sans-serif;
  font-size: 12px;
}

.message_to_user {
  font-size: 20px;
  color: black;
  font-weight: bold;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.on_page_title {
  font-size: 2em;
  color: black;
  font-weight: bold;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}



h1 {
  text-align: center;
  font-size: 24px;
}

h2 {
  text-align: center;
  font-size: 20px;
}

h3 {
  text-align: center;
  font-size: 14px;
}

/* Add styles for scrollable table */
.scrollable-table {
  height: 600px;
  /* Adjust height as needed */
  overflow-y: auto;
  display: block;
}


  .wrap-button {
    display: inline-block;         /* so width/max-width applies */
    width: 150px;                  /* or use max-width for flexible sizing */
    /* max-width: 100%; */
    white-space: normal;           /* allow wrapping */
    overflow-wrap: anywhere;       /* break long words if needed */
    word-break: break-word;        /* fallback for older browsers */
    padding: 0.2rem 0.4rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #f5f5f5;
    font: 12px/1.3 system-ui, sans-serif;
    cursor: pointer;
  }

/* Table Styling 
table {
  border: 1px solid #4CAF50;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: clamp(12px, 2vw, 18px);
  color: black;

}
*/

.fixed-header {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 1;
}




.editabletext {
  font-size: clamp(12px, 2vw, 18px);
  font-style: italic;
  color: red;
}

.subheader{
  font-family: 'Times New Roman', Times, serif;
  font-weight: bold;
  color: black;
  white-space: nowrap;
  font-size: 18px;
}

.tableResponsive {
  display: flex;
  align-items: left;
  padding: 0 2%;
}


/* move the body of the page away from the left side to provide space for the sidebar menu */
.filterlisttable {
  margin-left: 420px;
  /*display: flex;
/*flex-wrap: wrap;
/*width: 200px; /* Adjust size as needed */
  /*height: 200px; /* Adjust size as needed */
  background-color: white;
}

/* move the body of the page away from the left side to provide space for the sidebar menu */
.pageBody {
  margin-left: 0px;
  padding : 10px;
  left: 185px;
  position: relative;
  /*display: flex;
/*flex-wrap: wrap;
/*width: 200px; /* Adjust size as needed */
  /*height: 200px; /* Adjust size as needed */
  background-color: white;
}

/* Style for the table row */



/* Style for the table cell containing A yellownote */
table.notesTable td.yellownote_tablecell {
  border: none;
  height: auto;
  padding: 0px;
}


/* Style for the table */
.table-no-border {
  border: none;
}



/* Style for table data */
.td-green-courier {
  color: green;
  font-family: "Courier New", Courier, monospace;
  font-size: 10px;
}

/* Style for anchor links */
.link-inherit-color {
  color: inherit;
  /* Inherit color from parent */
  text-decoration: none;
}


/* for all tables */
table.notesTable  th {
  font-size: .5em;
  letter-spacing: .1em;
  text-transform: uppercase;
  background-color: #4CAF50;
  color: white;

}


/* Add styles specific for a most compact drop-down list*/

select.compact {
  padding: 0px;
  /* Reduce padding */
  font-size: 9px;
  /* Smaller font size */
  margin: 0px;
  /* Remove margins */
  border: 1px;
  border-radius: 0px;
  line-height: 1;
  /* Reduce line height */
  height: 21px;
  /* Ensure the height adjusts to the content */
  width: 60px;
  /* Adjust the width to fit the content */
  box-sizing: border-box;
}

option.compact {
  padding: 0;
  /* Reduce padding */
  font-size: 1em;
  /* Smaller font size */
  margin: 1px;
  /* Remove margins */
  line-height: 0.8;
  /* Reduce line height */
  height: auto;
  /* Ensure the height adjusts to the content */
  width: 60px;
  /* Adjust the width to fit the content */
  box-sizing: border-box;
}



.application_status {
  max-width: 120px;
  width: 120px;
  max-width: 120px;
  font-size: 9px;
  font-family: Arial, sans-serif;

}

.application_status_header {
  max-width: 120px;
  width: 120px;
  max-width: 120px;

}

.application_status_filter {
  max-width: 120px;
  width: 120px;
  max-width: 120px;

}
  

.topicname {
  min-width: 50px;
  width: 120px;
  max-width: 160px;
}

.topicname_header {
  min-width: 50px;
  width: 120px;
  max-width: 160px;
}
.topicname_filter {
 min-width: 50px;
  width: 120px;
  max-width: 160px;
}


.noteheader_html {
  min-width: 200px;
  width: 200px;
  max-width: 200px;
}

.noteheader_html_header {
  min-width: 200px;
  width: 200px;
  max-width: 200px;
}
.noteheader_html_filter {
 min-width: 200px;
  width: 200px;
  max-width: 200px;
}

.location {
  min-width: 50px;
  width: 110px;
  max-width: 180px;
}

.location_header {
 min-width: 50px;
  width: 110px;
  max-width: 180px;
}
.location_filter {
 min-width: 50px;
  width: 110px;
  max-width: 180px;
}


.message_text {
  min-width: 50px;
  width: 110px;
  max-width: 180px;
}

.message_text_header {
 min-width: 50px;
  width: 110px;
  max-width: 180px;
}
.message_text_filter {
 min-width: 50px;
  width: 110px;
  max-width: 180px;
}



.icons {
  width: 25px;
  height: 25px;
}


.selected_content {
  min-width: 50px;
  width: 110px;
  max-width: 180px;
}

.selected_content_header {
 min-width: 50px;
  width: 110px;
  max-width: 180px;
}
.selected_content_filter {
 min-width: 50px;
  width: 110px;
  max-width: 180px;
}



.datetime {
  min-width: 50px;
  width: 100px;
  max-width: 100px;
}



.datetime_header {
  min-width: 50px;
  width: 100px;
  max-width: 100px;
}


.datetime_filter {
  min-width: 50px;
  width: 90px;
  max-width: 90px;
}

.checkbox {
  min-width: 50px;
width: 50px;
  max-width: 65px;
  margin: 1px;
  padding: unset;

}

.checkbox_filter {
  min-width: 50px;
width: 50px;
  max-width: 55px;
  margin: 1px;
  padding: unset;
  font-size: small;

}

.checkbox_header {
  min-width: 50px;
width: 50px;
  max-width: 65px;
  margin: 1px;
  padding: unset;

}


.numbers_only {
  width: 40px;
  max-width: 40px;

}

.numbers_only_filter {
  width: 40px;
  max-width: 40px;

}

.numbers_only_header {
  width: 60px;
  max-width: 70px;

}

.emailaddress {
  max-width: 50px;
  width: 90px;
  max-width: 140px;

}

.emailaddress_header {
  max-width: 50px;
  width: 90px;
  max-width: 140px;

}

.emailaddress_filter {
  max-width: 50px;
  width: 90px;
  max-width: 140px;

}



.noteheader {
  max-width: 150px;
  width: 150px;
  max-width: 150px;

}


.noteheader_header {
  max-width: 150px;
  width: 150px;
  max-width: 150px;

}

.noteheader_filter {
  max-width: 150px;
  width: 150px;
  max-width: 150px;

}



.text {
  width: 100px;
}

.text_header {
  width: 100px;
}

.text_filter {
  width: 100px;
}

.description {
  max-width: 130px;
}

.description_filter {
  max-width: 120px;
}

.description_header {
  max-width: 130px;
}



.vertical {
  writing-mode: vertical-rl; /* or vertical-lr */
  text-orientation: mixed;   /* or upright */
  max-height: 90px;         /* controls wrapping */
  line-height: 1.2;
}

#resizable-div {
    overflow-y: auto;
    max-height: 100vh;
}


.message_text {
  /* optional - helps with table cell behavior */
  max-width: 600px;          /* ← adjust to your design */
  word-wrap: break-word;
}



.text-container {
  position: relative;
}

.text-content {
  display: -webkit-box;
  -webkit-line-clamp: 4;           /* ← shows ~4 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
  transition: all 0.25s ease;
  height: 100%;
  width: 100%;
}

.text-content.expanded {
  -webkit-line-clamp: unset;
  display: block;
}

/* Hide "less" by default, show only when expanded */
.toggle-less {
  display: none;
  color: #0066cc;
  cursor: pointer;
  user-select: none;
  margin-left: 4px;
}

/* "more" link styling */
.toggle-more {
  color: #0066cc;
  cursor: pointer;
  user-select: none;
  margin-left: 4px;
}

/* When expanded → hide "more", show "less" */
.text-container.expanded .toggle-more {
  display: none;
}

.text-container.expanded .toggle-less {
  display: inline;
}

/* Optional: nicer hover effect */
.toggle-more:hover,
.toggle-less:hover {
  text-decoration: underline;
}

.compact {
  padding: 0;
  /* Reduce padding */
  font-size: 1em;
  /* Smaller font size */
  margin: 1px;
  /* Remove margins */
  line-height: 0.8;
  /* Reduce line height */
  height: auto;
  /* Ensure the height adjusts to the content */

  /* Adjust the width to fit the content */
  box-sizing: border-box;
}


input.displayname {
  width: 148px;
  max-width: 148px;

}


td.number {

  text-align: center;
}

.filterableCol {
  font-size: .8em;
  height: 21px;
  padding: 0px;
  border: 0px;
}




table.filterlisttable {
  border: 1px solid #4CAF50;
  border-collapse: collapse;
  border-spacing: 0;
  width: auto;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-family: "Courier New", Courier, monospace;
  font-size: 10px;
  font-weight: bold;
}

/* Add styles specific for scrollable table containing notes*/


table.notesTable th {
  font-size: .8em;
  text-indent: initial;
  border-spacing: 2px;
}

img.table_row_tools_icon {
  width: 30px;
  height: 30px;
  cursor: pointer;
  margin-right: 5px;
}


.sort-icon {
  cursor: pointer;
  user-select: none;
  color: #000000;
  /* Black by default */
}

.sort-icon.active {
  color: #ffffff;
  /* White when active */
}

.highlighted {
  background-color: yellow;
}


.explanation-container {
  margin: 20px;
  font-family: Arial, sans-serif;
}

.explanation-label-container {
  margin-bottom: 15px;
}

.explanation-label-title {
  font-weight: bold;
  font-size: 16px;
}

.explanation-label-description {
  margin: 5px 0 10px 0;
}

.explanation-label-instructions {
  color: #555;
  font-style: italic;
}

/* for all tables */
  /* Table Styling */
  table {
    border: 1px solid #4CAF50;
    border-collapse: collapse;
    
    padding: 0;
      table-layout: fixed;
  }

table th th {
  font-size: .5em;
  letter-spacing: .1em;
  text-transform: uppercase;
  background-color: #4CAF50;
  color: white;
}


table.notesTable th th {
  font-size: .5em;
  letter-spacing: .1em;
  text-transform: uppercase;
  background-color: #4CAF50;
  color: white;
}


.vertical-text {
  writing-mode: vertical-rl;   /* or vertical-lr */
  text-orientation: upright;   /* stack letters upright; use 'mixed' for CJK-style */
}

.rotate-90 {
  transform: rotate(90deg);     /* -90deg for the other direction */
  transform-origin: left top;   /* tweak as needed */
  white-space: nowrap;          /* prevent wrapping after rotation */
  display: inline-block;        /* allow transform to take effect neatly */
}

.count {
  max-width: 50px;
  min-width: 30px;
  width: 50px;
}



.url {
  max-width: 100px;
}


.qr_icon {

top: 0px; 
padding: 0px; 
border: 0px; 
margin: 0px; 
width: 20px; 
height: 20px;

}

.qr_button {
width: 22x;
height: 22px;

}


.status {
  max-width: 50px;
}

.action-1 {
  max-width: 40px;
  min-width: 40px;
}

.action-3 {
  max-width: 80px;
}

.action-5 {
  min-width: 150px;
  width: 150px;
  max-width: 150px;
}

.topic_name_cell {
  min-width: 150px;
  width: 150px;
  max-width: 150px;
}

.topic_name_field {
  min-width: 145px;
  width: 145px;
  max-width: 145px;
}


.table_row_actions_button {
  width: 25px;
  height: 25px;
  position: relative;
  z-index: 12000;
}

.yc_panel_buttons {
  display: flex;
  height: 20px;
  justify-content: space-between;
  margin-top: 1px;
}


.delete_button {

  position: relative;
  z-index: 12000;
}

.save_button {
  width: 70px;
  position: relative;
  z-index: 12000;
}


.yellownote {
  height: 200px;
  min-width: 260px;
  position: relative;
  z-index: 12000;
}

.delete_button:hover::after {
  /* Show the tooltip */
  opacity: 1;
  visibility: visible;
  z-index: 12000;
}




.button-container {
  display: flex;
  justify-content: space-between;
}

.button-container>div {
  margin-right: 1px;
}

.button-container>div:last-child {
  margin-right: 5px;
}


.button-container>div:first-child {
  margin-left: 5px;
}



table.notesTable tr th:nth-child(1002) {
  max-width: 100px;

}


table.notesTable tr th:nth-child(1003) {
  max-width: 100px;
}

table.notesTable tr th:nth-child(4) {
  width: 40px;
}


table.notesTable tr th:nth-child(5) {

  border-spacing: 0px;

}




.topicowner_header {
  font-size: 1.2em;
  color: black;
  font-weight: bold;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;


}

/** * Style for the yellow note table cell
 */
table.notesTable tr td.yellownote {
  padding-top: 5px;
  padding-right: 0px;
  padding-bottom: 5px;
  padding-left: 0px;
  width: 350px;
  min-width: 280px;
}


table.notesTable tr td.timestamp {
  padding: 1px;
  width: 80px;
  min-width: 80px;
  max-width: 80px;
}


table.notesTable tr td.active_status {
  padding: 1px;
  width: 60px;
  max-width: 60px;
}




table.notesTable td {
  padding: 0px;

  height: 15px;
  font-size: 10px;
  line-height: 1;
  min-height: 1.0em;
  text-align: left;
  word-break: break-all;
  padding: 0px;
  padding: 0px 0px 0px;
  padding-left: 2px;
  border: 1px solid black;
  text-align: center;

  vertical-align: inherit;
  word-break: break-all;

}







table.notesTable tr td:nth-child(5) {

  border-spacing: 0px;
}







.flexible {
  width: auto;
  /* Allows these columns to adjust their width */
}

.fixed {
  width: 30px;
  /* Fixed width for columns 5, 6, and 8 */
}

.extra-fixed {
  width: 40px;
  /* Fixed width for column 9 */
}

td.checkbox {

  vertical-align: middle;
  align-items: center;
}

.toggle {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.toggle input {
  display: none;
}




.toggle-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100px;
  position: relative;
  left: 25px;
}

.toggle-button {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 60px;
  margin-bottom: 3px;
}

.toggle-button input {
  margin-right: 10px;
}


.hidden {
  display: none;
}

.columntoggletable {
  border: 0px solid #4CAF50;
  border-collapse: collapse;
  border-spacing: 0px;
  width: 120px;
  padding: 0px;
  margin: 0px;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;

}

.columntogglerow {
  border: 0px;
  width: 120px;
  min-width: 120px;
  max-width: 120px;
  margin: 0px;
  padding: 0px;
  max-height: 35px;
  height: 35px;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ffffff;
    }

.columntogglecelllegend {
  border: 1px solid #ccc;
  position: relative;
  border: 0px;
  width: 100px;
  min-width: 100px;
  max-width: 100px;
  margin: 0px;
  padding: 0px;
  text-align: right;
  max-height: 35px;
  height: 35px;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ffffff;
}

.columntogglecell {

  border: 1px solid #ccc;
  position: relative;
  border: 0px;
  width: 20px;
  max-height: 35px;
  height: 35px;
  margin: 0px;
  padding: 0px;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ffffff;

}

.columntogglecellhelp {
  margin: 0px;
  padding: 0px;
  border: 1px solid #ccc;
  position: relative;
  width: 20px;
  max-height: 35px;
  height: 35px;
  border: 0px;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ffffff;

}

.toggle_label {
  margin: 0px;
  font-size: 14px;
  color: black;
  font-weight: bold;
  text-align: center;
  display: inline-block;
}

.toggle_tooltip-icon {
  cursor: pointer;
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAAXNSR0IArs4c6QAAAodJREFUSEudVjFo8lAQvkfpII0dXIR20qVTwbWVglAE1y4qBGyHUgNCK6IVW3GQQqmVoKIQQwcRAhYHV3GzQxdxcnLS1VFNKSLySvLXoCbxpf8NIcTv7rv37rs7ERCsXq/jz89PaLVaMBwO4evrCyiKApvNBm63G1iWRaQYuoCnpyecTCZJ/srv2WwWotGoZjzNj7u7u3g+nxsmWAKlE4qiqIqpRYL/HF3tsBZ3k0SXIBaLwevrq4LneR5L38bjsV5OClZ52dnZwYvFQuXg8Xig2Wzq1k4QBEzTtMpvf38fJpOJ7Cc/np+fcSKRUAEvLi6g0WgQ1fPrqLoFjuOAYRi0DKACWK1WGI1GRgng9PRUlrqGIfT+/o59Ph/xXiXAxpWuJVCpVPDV1ZU2ye3tLS4UCrqCYlkWIpGIFHDttDc3N8DzPFE4j4+PgI6Pj3Gv1/sf1a4RSGqTiDfN6XQCoigKi6JomKRWq4Hf71c3HEIYY3UHHB4eyur6S/NpCuHo6Aj3+33NRCUpo729PSwNPZIxDAMcx/15QhwcHBivSbVahUAgQCz0ZrJnZ2eA7u7ucD6fJx0EXC4XXF5ewnQ6BbPZDMViEbrdLtHv4eHhX8cbqYvFYgGHwwGz2QxMJhN0Op1tc2uVXL/jN1MUBAFomlauK5fL4XA4TDyJNLpkp0wmg+/v77c6lEolCIVCComRpbasI3EKL5nf3t7g+vpawb+8vOB4PK6bmGoKryB1eyaVSkE6nVZIGIbB0pTdYup9YoTISAF+MVs3o4xBOiOCRCKp7vv729COl2MZEcMqablchmAwqDl2iEtJ2jcfHx/QbrdhMBgo/7vsdjucn5/DyckJeL3erXF+AMsc8iM9Mn06AAAAAElFTkSuQmCC');
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-left: 0.5em;
}

.tooltip {
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.9);
  color: black;
  padding: 1em;
  border-radius: 0.5em;
  font-size: clamp(0.8rem, 2vw, 1rem);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  z-index: 100;
  white-space: normal;               /* Allow wrapping */
  width: 220px;                      /* Set fixed width */
  overflow-wrap: break-word;        /* Ensure long words wrap */
  display: none;
}

.tooltip.show {
  display: block;
  animation: fadein 0.3s;
}

@keyframes fadein {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}