
.tk-highlight {
  font-weight: 700;
  color: #191970;
}

.tk-full-height {
   height:100vh;
}

.tk-three-quarter-height {
   height:75vh;
}

li.list-group-item h1 {
  margin-bottom: 0;
}

li.list-group-item h2 {
  margin-bottom: 0;
}

li.list-group-item h3 {
  margin-bottom: 0;
}

li.list-group-item h4 {
  margin-bottom: 0;
}

li.list-group-item h5 {
  margin-bottom: 0;
}

li.list-group-item h6 {
  margin-bottom: 0;
}

.tk-small {
  font-size: .75em;
}

.tk-smaller {
  font-size: .5em;
}

.tk-smallest {
  font-size: .25em;
}

.tk-countdown-wrapper {
  vertical-align: top; /* Adjust the vertical alignment */
  position: relative; /* Context for absolute positioning */
  top: 0.35em; /* Adjust the top value as needed */
  left: 0.15em; /* Adjust the left value to create some space after the title */
}

#tk-countdown {
  display: inline-block;
  width: 1.5em; /* Fixed width to accommodate the widest number */
  text-align: center;
}

.tk-truncate-multiline {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Number of lines you want to display */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 4.5em; /* Adjust based on line-height and font-size */
}

/* Wrapper div to control truncation with ellipsis */
.tk-truncation-wrapper {
  position: relative;
  max-width: 200px;  /* Adjust to desired width */
  height: 1.2em;  /* Restrict height to a single line */
  overflow: hidden;  /* Hide overflowing content */
  text-overflow: ellipsis !important;  /* Show ellipsis when content overflows */
  white-space: nowrap;  /* Prevent line wrapping */
  cursor: pointer;  /* Indicate clickability */
  display: inline-block;  /* Ensure it behaves properly within the table cell */
}

/* Hide the More... indicator when expanded */
.tk-truncation-wrapper.expanded::after {
  display: none;
}

/* Expanded state when clicked */
.tk-truncation-wrapper.expanded {
  max-width: none;  /* Remove width restriction */
  max-height: none;  /* Allow height to expand naturally */
  height: auto;  /* Let the height adjust to fit content */
  overflow: auto;  /* Enable scrolling if content is too large */
  white-space: pre-wrap;  /* Wrap lines to fit the available width */
  background-color: transparent !important;  /* Prevent blue highlight from affecting this cell */
  color: inherit;  /* Keep original text color (e.g., red for code) */
}

/* Code block styling within the preformatted text */
.tk-truncation-wrapper pre {
  margin: 0;  /* Remove default margin */
  padding: 0;  /* Remove default padding */
  overflow: visible;  /* Allow content to be visible */
  white-space: pre;  /* Keep preformatted text but adjust wrapping if needed */
}

/* Code styling with syntax highlight color */
.tk-truncation-wrapper code {
  color: red;  /* Restore the red color for the code text */
  display: inline;  /* Keep the code inline within the preformatted text */
}

/* Code styling with syntax highlight color */
.tk-truncation-wrapper.expanded pre code {
  color: white;  /* Restore the red color for the code text */
}

td.tk-table-cell-truncate {
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 250px;     /* Set a fixed max-width suitable for your table */
}

td.tk-table-cell-truncate.expanded {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  max-width: none;  /* Remove the max-width to display full content */
}

.tk-break-word {
  word-wrap: break-word;
  word-break: break-all;
  overflow-wrap: break-word;
}

.tk-social-share-card-header {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  color: #343a40;
  padding: 15px;
}

.tk-social-share-card-footer {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 15px;
}

/* Extra small devices (less than 576px) */
@media (max-width: 575.98px) {
    td.tk-table-cell-truncate {
        max-width: 110px;  /* Smaller width for portrait phones */
    }
}

/* Small devices (576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    td.tk-able-cell-truncate {
        max-width: 180px;  /* Width for landscape phones */
    }
}

/* Medium devices (768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    td.tk-table-cell-truncate {
        max-width: 250px;  /* Width for tablets */
    }
}

/* Large devices (992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    td.tk-table-cell-truncate {
        max-width: 350px;  /* Width for desktops */
    }
}

/* Extra large devices (1200px and up) */
@media (min-width: 1200px) {
    td.tk-table-cell-truncate {
        max-width: 400px;  /* Larger width for large desktops */
    }
}
