.content-container {
  background: #ffffff;
  width: calc(100% - 15rem);

  .phdr {
    margin-top: 1rem;
  }
}

.page_layout {
  max-width: 1100px;
  margin: 0 auto;
}

.content-container-padding {
  padding: 0.8rem 0.8rem;

  @media (max-width: 768px) {
    padding: 0.4rem 0.2rem 1rem 0.2rem;
  }

  @media (max-width: 991px) {
    padding-top: 3.5rem !important;
    .small-full-width {
      margin-left: -15px;
      margin-right: -15px;
    }
  }
}

.footer-padding {
  padding-top: 0 !important;
}

.page-footer {
  margin: 0.8rem -0.8rem -0.8rem;
  @media (max-width: 768px) {
    margin: 0 0 -0.4rem;
  }
}

.border-radius-12 {
  border-radius: 12px;
}

.cursor-pointer {
  cursor: pointer;
}

.overflow-ellipsis {
  text-overflow: ellipsis;
}

.to-top {
  position: fixed;
  bottom: 4rem;
  right: 1.7rem;
  transition: all 0.3s;
  @media (max-width: 991px) {
    right: 0.9rem;
    bottom: 4rem;
  }
}

.to-top_hidden {
  visibility: hidden;
  opacity: 0;
  bottom: 0;
}

.to-bottom {
  transform: rotate(180deg);
}

.bbpopup {
  margin-top: 3px;
  margin-bottom: 3px;
}

.bbpopup a {
  border: 1px solid #a7a7a7;
  height: 15px;
  display: inline-block;
  margin: 2px;
  vertical-align: middle;
  width: 15px;
}

.text-underline {
  text-decoration: underline;
}

.links-underline {
  a {
    text-decoration: underline;
  }
}

@media (max-width: 350px) {
  .forum-view-counter {
    display: none;
  }
}

.break-word {
  word-break: break-word;
}

@media (max-width: 768px) {
  .full-mobile-width {
    margin-left: -15px;
    margin-right: -15px;
    padding-right: 15px;
    padding-left: 15px;
  }
}

.p-no-margin {
  p {
    margin-bottom: 0.8rem;
  }

  &[dir="rtl"] {
    blockquote {
      border-left: 0;
      border-right: solid 5px hsl(0, 0%, 80%);
    }
  }

  blockquote {
    p {
      margin-bottom: 0;
    }
  }
}

blockquote {
  overflow: hidden;
  padding-right: 1.5em;
  padding-left: 1.5em;
  margin-left: 0;
  margin-right: 0;
  font-style: italic;
  border-left: solid 5px hsl(0, 0%, 80%);
  background-color: rgba(248, 249, 250, 1);

  p {
    margin-bottom: 0;
  }
}

figure {
  &.table {
    overflow: auto;

    table {
      border-collapse: collapse;
      border-spacing: 0;
      width: 100%;
      height: 100%;
      border: 1px double #b3b3b3;
    }

    th {
      font-weight: 700;
      background: hsla(0, 0%, 0%, 0.05);
      padding: .4em;
      border: 1px solid #bfbfbf;
      border-bottom: none;
    }

    td {
      border: 1px solid #bfbfbf;
      padding: .4em;
    }
  }

  &.image {
    clear: both;

    img {
      max-width: 100%;
      max-height: 400px;
    }

    figcaption {
      font-size: .8em;
      text-align: center;
      color: #888888;
      font-style: italic;
    }
  }
}

.image-style-align-left {
  float: left;
  margin-right: 0.5rem;
}

.image-style-align-right {
  float: right;
  margin-left: 0.5rem;
}

.image-style-align-center {
  margin-left: auto;
  margin-right: auto;
}

.breadcrumb-item {
  & > a {
    max-width: 250px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
  }
}

.ck.ck-editor {
  font-size: 16px;
  @media (min-width: 768px) {
    font-size: 14px;
  }
}

.text-bg-secondary {
  color: #fff !important;
}

.sr-only {
  display: none;
}

.link-no-underline {
  a {
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

.counter-badge {
  background: rgb(248,249,250);
  color: #000;
  border: 1px solid var(--bs-border-color);
  line-height: 1.3;
  --bs-badge-padding-y: 0.15em;
}

.legal-footer-links {
  line-height: 1.2;
}

.cookie-consent-banner {
  background: #fff;
  color: #212529;
  border-radius: 10px;
  bottom: 15px;
  left: 15px;
  right: 15px;
  max-width: 380px;
  padding: 20px;
  position: fixed;
  z-index: 1000;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);

  &__text {
    font-size: 0.8rem;
    line-height: 1.45;
    margin-bottom: 1rem;

    a {
      text-decoration: underline;
    }
  }

  &__accept {
    width: 100%;
  }
}

@mixin cookie-consent-banner-dark {
  .cookie-consent-banner {
    background: #2b3035;
    color: #e9ecef;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);

    &__text a {
      color: #8ecbff;
    }
  }
}

body {
  &.dark {
    @include cookie-consent-banner-dark;
  }

  &.auto {
    @media (prefers-color-scheme: dark) {
      @include cookie-consent-banner-dark;
    }
  }
}
