.no-select {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Standard syntax */
}

.btn-square {
  border-radius: 0;
}

.text-clip, .text-clip-1 {
  display: -webkit-box;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: calc(1.2em * 1); /* Adjust for line height if necessary */
  line-height: 1.2em; /* Match your text line-height */
}

.text-clip-2 {
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: calc(1.2em * 2); /* Adjust for line height if necessary */
  line-height: 1.2em; /* Match your text line-height */
}

.text-clip-3 {
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: calc(1.2em * 3); /* Adjust for line height if necessary */
  line-height: 1.2em; /* Match your text line-height */
}

.text-clip-4 {
  display: -webkit-box;
  line-clamp: 4;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: calc(1.2em * 4); /* Adjust for line height if necessary */
  line-height: 1.2em; /* Match your text line-height */
}

.text-clip-5 {
  display: -webkit-box;
  line-clamp: 5;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: calc(1.2em * 5); /* Adjust for line height if necessary */
  line-height: 1.2em; /* Match your text line-height */
}

/* Blur text */
.blurred { filter: blur(5px); user-select: none; pointer-events: none; }

.blurred.unblur { filter: none; pointer-events: auto; user-select: text; }

.reader-primary-content {
  max-width: 680px;
  /* Center the column within its parent */
  margin-left: auto;
  margin-right: auto;
  word-break: break-word;
}

/* For extra-small devices (xs) */
@media (max-width: 576px) {
  .primary-content {
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* For small devices (sm) */
@media (min-width: 577px) and (max-width: 768px) {
  .primary-content {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Bootstrap 5 only includes flex-grow-1 utilities */
.flex-grow-2 {
  flex-grow: 2 !important;
}

.flex-grow-3 {
  flex-grow: 3 !important;
}

.flex-grow-4 {
  flex-grow: 4 !important;
}

.flex-grow-5 {
  flex-grow: 5 !important;
}

/* Animations */
.fade-in {
  animation: fadeIn 0.5s ease-in-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Page layouts */

.base-page-layout {
  min-height: calc(100vh - 72px - 89px - 10px); /* 72px header, 89px footer, 10px margin */
}