.h-\[200px\] {
  height: 200px;
}

.max-h-\[200px\] {
  max-height: 200px;
}

.video-description-preview,
.video-full-description {
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  letter-spacing: 0px !important;
}

.video-description-preview > * {
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  letter-spacing: 0px !important;
  margin-bottom: 1em !important;
}

.video-full-description > * {
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  letter-spacing: 0px !important;
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

.xl\:col-span-2 {
  grid-column: span 2 / span 2;
}

.dark .dark-bg-white {
  background: #fff;
}

.footer-banner {
  margin-left: -1.5rem;
}

@media (min-width: 767px) {
  .footer-banner {
    margin-left: -2.5rem;
  }
}

@media (max-width: 767px) {
  .md\:w-screen {
    width: 100vw;
  }
  .md\:h-screen {
    height: 100vh;
  }
  .md\:max-h-full {
    max-height: 100% !important;
  }
}

.max-h-\[75\%\] {
  max-height: 75%;
}

.overflow-y-scroll {
  overflow-y: scroll;
}

.opacity-0 {
  opacity: 0;
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.duration-100 {
  transition-duration: 0.1s;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.15s;
}

.mb-\[10px\] {
  margin-bottom: 10px;
}

.mr-\[10px\] {
  margin-right: 10px;
}

.grey-border {
  border: solid 1px #ddd;
}

.p-1 {
  padding: 4px;
}

.border-grey-60 {
  border-color: rgba(53, 62, 70, 0.6);
}

.dark .dark\:border-white-60 {
  border-color: rgba(255, 255, 255, 0.6);
}

.opacity-70 {
  opacity: 0.7;
}

.border-l-\[1px\] {
  border-left-width: 1px;
}

.h-6 {
  height: 1.5rem /* 24px */;
}

.gap-x-2 {
  column-gap: 0.5rem /* 8px */;
}

@keyframes like_dislike {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.like-count {
  transition: transform 0.5s;
  display: inline-block;
}

.like-count.animated {
  animation: like_dislike 0.5s ease;
}

.bg-white-5 {
  background-color: rgba(256, 256, 256, 0.05);
}

.dark .dark\:bg-white-5 {
  background-color: rgba(256, 256, 256, 0.05);
}

/** This is used for the ld button */
.dark.dark\:bg-white-5 {
  background-color: rgba(256, 256, 256, 0.05);
}

.dark .dark\:border-white-60 {
  border-color: rgba(256, 256, 256, 0.6);
}

.no-bg {
  background: none !important;
}

.ld-modal {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #000;
  background-color: #00000080;
  align-items: center;
  justify-content: center;
}

.ld-modal-content {
  --tw-bg-opacity: 1;
  background-color: rgb(248 248 248 / var(--tw-bg-opacity));
  padding: 2.5rem;
  color: #353e46;
}

.dark .ld-modal-content {
  --tw-bg-opacity: 1;
  background-color: rgb(42 50 56 / var(--tw-bg-opacity));
  color: #ffffffd9;
}

.ld-modal-content {
  margin: auto;
  max-width: 60%;
}

@media only screen and (max-width: 767px) {
  .ld-modal-content {
    max-width: 95%;
  }
}

.ld-modal-content {
  -webkit-animation: fadein 0.5s;
  animation: fadein 0.5s;
}

.ld-modal-block {
  display: flex;
}

@media (max-width: 1400px) {
  .\31xl\:multiline-ellipsis-3 {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    white-space: normal;
  }
}

.text-display {
  font-weight: 400;
  font-size: 56px;
  line-height: 72px;
  letter-spacing: -0.03em;
}

@media (max-width: 767px) {
  .text-display {
    font-size: 40px;
    line-height: 48px;
    letter-spacing: -0.03em;
  }
}

.multiline-ellipsis-4 {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box !important;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  white-space: normal;
}

.shrink-0 {
  flex-shrink: 0;
}

.ld-dislike-modal {
  position: fixed;
  z-index: 10018;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ld-dislike-modal-content {
  background-color: rgb(248 248 248);
  padding: 2.5rem;
  color: #353e46;
  margin: auto;
  max-width: 60%;
  animation: fadein 0.5s;
}

.dark .ld-dislike-modal-content {
  background-color: rgb(42 50 56);
  color: rgba(255, 255, 255, 0.85);
}

@media only screen and (max-width: 767px) {
  .ld-dislike-modal-content {
    max-width: 95%;
  }
}

.ld-modal-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.mb-3 {
  margin-bottom: 12px;
}

.ml-6 {
  margin-left: 24px;
}

.textarea {
  width: 100%;
  border: 2px solid;
  padding: 0.75rem;
  outline: none;
  color: #000;
}

.textarea:disabled {
  color: rgba(0, 0, 0, 0.2);
  border-color: rgba(0, 0, 0, 0.2);
  background-color: rgba(0, 0, 0, 0.15);
}

@media (min-width: 768px) {
  .textarea {
    width: auto;
    min-width: 400px;
  }
}

.z-menu-20 {
  z-index: 11020;
}

.z-menu-50 {
  z-index: 11050;
}

.z-menu-100 {
  z-index: 11100;
}

@media only screen and (min-width: 1922px) {
  .insights-menu {
    margin-left: calc((100vw - 1920px) / 2);
    width: 1856px !important;
  }
}

/* The fixed #sticky-header (.header-scroll-effect, position: fixed, ~84px
   tall) overlaps the top of the viewport, so jumping to any #anchor link
   (href="#foo" or scrollIntoView) lands the target right under it. This
   reserves that space for every fragment-navigation across the site, plus
   a little breathing room, without needing scroll-margin-top on every
   individual anchor target. */
html {
  scroll-padding-top: 100px;
}