// ------------------------------------
// Joomla! specific styles
// ------------------------------------

// Extend style in base
// --------------------
@import "../../../plugins/system/t4/themes/base/scss/_joomla";

//
// Generic Styles
// -------------------------

// Article Titles
// -------------------------
h2.item-title,
.item-title h2 {
  font-size: var(--h2-font-size);
  margin-bottom: $spacer;

  a {
    color: var(--body-text-color);

    &:hover,
    &:active,
    &:focus {
      color: var(--body-link-hover-color);
    }
  }
}

// Page Header
.page-header,
.categories-list {
  h1 {
    font-size: var(--h1-font-size);
    font-weight: $font-weight-semibold;
    margin: 0;
    padding: $spacer*2 0;
  }

  h2 {
    font-size: var(--h3-font-size);
    margin: 0 0 $spacer/2;
  }

  a {
    color: var(--headings-color);

    &:hover,
    &:focus,
    &:active {
      color: var(--body-link-hover-color);
    }
  }
}

// Article Aside
// -------------------------
.article-info {
  font-weight: $font-weight-normal;
  font-size: 0.75rem;
  text-transform: uppercase;

  .author-img,
  .fa.fa-eye,
  .fa.fa-calendar,
  .fa.fa-folder {
    display: none;
  }

  .category-name {
    font-size: 0;
  }

  .createdby [itemprop=name],
  .category-name [itemprop=genre] {
    color: var(--headings-color);
    font-size: 0.75rem;
    font-weight: $font-weight-normal;

    &:hover {
      color: var(--body-link-hover-color);
    }
  }

  a {

    // Link states
    &:hover,
    &:focus,
    &:active {}
  }

  .article-info-term {}

  dd {
    margin-bottom: $spacer-xs;

    @include media-breakpoint-up(lg) {
      margin-bottom: $spacer-sm;
    }

    >div {}

    &::after {
      background: var(--t4-gray-500);
      border-radius: 50%;
      content: '';
      height: 2px;
      margin: 0 8px;
      width: 2px;
    }
  }
}

// Author
// -------------------------
.createdby {}

.author {
  height: 100%;
  padding-bottom: calc(var(--t4-gutter-x) * 0.5);

  @include media-breakpoint-up(md) {
    padding-bottom: calc(var(--t4-gutter-x));
  }
}

// Add border item author
.author-border .author .author-block {
  border: 1px solid var(--t4-border-color);
  border-radius: var(--t4-border-radius);
  padding: $spacer*2;
}

.author-block {

  // Author Avata
  .author-avatar {

    // Top infor
    a {
      max-width: 96px;
      max-height: 96px;
    }

    span {
      height: 100%;
      max-width: 100%;
      width: 100%;

      @include media-breakpoint-down(md) {
        border-radius: var(--t4-border-radius);
      }
    }

    img {
      object-fit: cover;
    }
  }

  // Author name
  .author-name {
    font-size: 1.25rem;
    font-weight: $font-weight-semibold;
    margin-bottom: $spacer;

    a {
      color: var(--headings-color);

      &:hover {
        color: var(--body-link-hover-color);
      }
    }
  }

  // Author title
  .author-title {
    margin-bottom: $spacer/2;
  }

  &.author-block-list {
    height: 100%;
    margin: 0;
  }

  // Social
  .author-socials {
    a {
      font-size: 1rem;
      margin: 0 $spacer/2;

      &:hover {
        span.fa-facebook {
          color: #3B5998;
        }

        span.fa-twitter {
          color: #00ACED;
        }

        span.fa-instagram {
          color: #E1306C;
        }

        span.fa-tiktok {
          color: #000000;
        }
      }
    }
  }
}

.dark-active {
  .author-socials {
    a {
      &:hover {
        span.fa-tiktok {
          color: #fff;
        }
      }
    }
  }

  #t4-masthead {
    --headings-color: var(--t4-gray-300);
  }

  .t4-masthead-description {
    color: var(--t4-gray-500);
  }

  .text-muted {
    --t4-secondary-color: var(--body-text-color);
  }

  //Calendar
  // ------------
  .js-calendar {
    --calendar-bg: var(--t4-gray-900);
    --calendar-week-bg: var(--t4-gray-800);

    table tbody .disabled {
      background: transparent;
    }
  }
}

// Author Detail
// -------------------------
.author-detail {
  .author-block {

    // Laptop
    @include media-breakpoint-up(lg) {
      max-width: 768px;
    }
  }

  // author infor
  .blog-author-name {
    margin-bottom: $spacer;

    @include media-breakpoint-up(md) {
      display: flex;
      margin-bottom: $spacer*2;
      gap: $spacer*2;
    }
  }

  .author-other-info {
    text-align: left;
    flex: 1;
  }

  // author name
  .author-name {
    h1 {
      margin: 0 0 $spacer*1.5;
    }
  }

  .author-list-info {
    display: flex;
    margin-bottom: $spacer/2;
    gap: 8px;

    p {
      margin: 0;
    }
  }

  .author-detail-title {
    color: var(--headings-color);
    font-weight: $font-weight-semibold;
    max-width: 96px;
    width: 100%;
  }

  // avata
  .author-avatar {
    @include media-breakpoint-up(md) {
      max-height: 256px;
      max-width: 256px;
      margin-bottom: 0;
    }
  }

  // author about me
  .author-about-me {
    text-align: left;

    h3 {
      margin: $spacer 0 $spacer*1.5;
    }

    p {
      @include media-breakpoint-up(md) {
        margin-bottom: $spacer*2.5;
      }
    }
  }

  .author-socials {
    a {
      margin-left: 0;
    }
  }
}

.blog.author-posts {
  padding-top: $spacer*4;
  position: relative;

  .pull-left.item-image {
    margin-bottom: $spacer;
  }

  .post-title {
    margin-bottom: $spacer*2;
    text-transform: uppercase;

    &::before {
      background-color: var(--t4-border-color);
      content: '';
      height: 1px;
      left: 0;
      max-width: 100vw;
      margin-left: calc(50% - 50vw);
      top: 0;
      position: absolute;
      width: 100vw;

      @include media-breakpoint-up(xxl) {
        max-width: calc(100vw - 9px);
      }
    }
  }
}

// Category Name
.category-name {
  a {
    margin-left: 0;
  }
}

// URL
.article-url {}

// Publish Date
.published {
  time {}
}

// Modified Date
.modifydate {}

// Hits
.hits {}

// Article Desciption
.contentdescription {}

.contentdescription p {}

// Content rating
.content_rating {
  svg {
    display: none;
  }

  li {
    background: url("../images/rating-stars.png") left bottom;
    height: 16px;
    width: 16px;

    &.vote-star-empty {
      background-position: top left;
    }
  }
}

.content_vote {}


// Article Tools
// -------------------------
.icons {
  .btn {
    .caret {}
  }

  .icon-cog {}

  .dropdown-menu {
    a {
      border-bottom: 1px solid $border-color;
      color: $gray-700;

      &:hover,
      &:focus,
      &:active {
        background-color: $gray-100;
        color: var(--link-hover-color);
      }
    }
  }
}


// Tags
// -------------------------
.tags {
  margin-bottom: 0;
  margin-top: $spacer;

  >li {
    float: inherit;
    margin-bottom: $spacer/2;

    >a {
      background: var(--tpl-base-100);
      color: var(--headings-color);
      font-weight: $font-weight-base;
      font-size: 0.875rem;
      line-height: 1.5;
      padding: 0.25rem 0.5rem;

      &:hover {
        background: var(--t4-gray-200);
        color: var(--body-link-hover-color);
      }
    }
  }
}

// List All Tags
// -------------------------
.com-tags-tag.tag-category {
  .filters {
    @include media-breakpoint-down(md) {
      flex-wrap: wrap;
      gap: $spacer;
    }

    .form-control {
      border-radius: var(--t4-border-radius) !important;
    }
  }

  .category {}

  .list-group {
    .list-group-item {
      border-color: var(--t4-border-color);

      a {
        color: var(--headings-color);
      }

      &:hover {
        background-color: var(--tpl-base-100);
      }
    }

    .tag-body {
      p {
        color: var(--t4-gray-600);
      }
    }
  }

  // Tagged Items
  .item-tag-image {
    display: flex;
    width: 100%;

    img {
      border-radius: var(--t4-border-radius);
      max-height: 300px;
      object-fit: cover;
      width: 100%;
    }
  }
}

.all-tags {
  li {
    a {
      border: 1px solid var(--t4-border-color);
      border-radius: var(--t4-border-radius);
    }
  }
}

// Article Images
// -------------------------
.item-image {
  img {
    border-radius: var(--t4-border-radius);
    width: 100%;
  }
}

// Float Left Image
.pull-left.item-image,
.item-image.pull-left {
  border-radius: var(--t4-border-radius);
  margin-right: 0;
  overflow: hidden;

  img {
    height: 100%;
    object-fit: cover;
    transform: scale(1, 1);
    transition: all 0.6s ease;
  }
}

// Float right Image
.pull-right.item-image,
.item-image.pull-right {}

// Image caption
.img_caption img {}

div.img_caption {

  p.img_caption {}
}

figure {
  &.pull-left {
    float: inherit;
  }

  &.pull-right {}

  figcaption {}
}

// Article Index
// -----------
.article-index {
  h3 {}

  ul {}
}

.com-content-article__body {
  .pagenavcounter {}

  .pager {
    ul {

      li {}
    }
  }

  // Slider style
  .pane-sliders {
    .panel {
      border: 1px solid $border-color;

      h3.title {
        background-color: $gray-100;
        font-size: $font-size-base;

        &.pane-toggler-down {
          border-bottom: 1px solid $border-color;
        }

        a {

          &:hover,
          &:focus,
          &:active {}
        }
      }

      .content {}
    }
  }

  // Tabs style
  dl.tabs {
    border-bottom: 1px solid $border-color;

    dt {
      border: 1px solid $border-color;
      border-radius: 3px 3px 0 0;

      &.open {
        border-bottom: 1px solid $white;
      }

      h3 {

        a {
          color: var(--body-text-color);

          &:hover,
          &:focus,
          &:active {
            color: var(--link-hover-color);
          }
        }
      }
    }
  }
}

// Read more
// -----------
p.readmore {
  @extend .mt-4;

  .btn {
    background-color: $gray-200;
    padding: $spacer/3 $spacer/1.5;

    // Link States
    &:hover,
    &:active,
    &:focus {
      background-color: var(--body-link-hover-color);
      color: $white;
    }

    // The Arrow
    .icon-chevron-right {}
  }
}

// Items More
// -----------
.items-more {
  .nav-tabs {
    border-bottom: none;

    >li {}

    >li>a {
      color: var(--body-text-color);
      padding: 0;

      // Link States
      &:hover,
      &:active,
      &:focus {
        color: var(--body-link-hover-color);

        &::before {
          color: var(--body-link-hover-color);
        }
      }

      &::before {
        color: #999999;
        content: "\f0da";
        font-family: FontAwesome;
        font-size: 12px;
        margin-right: 3px;
      }
    }
  }
}

// Rating Form
// ------------
.rating-info {
  margin-bottom: $spacer/2;
}

.rating-form {
  display: inline-block;
  line-height: 16px;
  vertical-align: middle;
  margin-top: -3px;

  .rating-log {
    display: inline-block;
    font-size: $font-size-sm;
    margin: 0;
    padding: 0 0 0 5px;

    @include media-breakpoint-down(sm) {
      font-size: $font-size-sm;
    }
  }

  .rating-list,
  &.action-vote .rating-list a:hover,
  .rating-list .rating-current {
    background: url("../images/rating-stars.png") repeat-x left -1000px;
  }

  .rating-list {
    background-position: left top;
    float: left;
    height: 16px !important;
    list-style: none outside none;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 80px;
  }

  .rating-list li {
    background: none;
    display: inline;
    padding: 0;
    border: none;
    float: left;
    width: 100%;
  }

  .rating-list a,
  .rating-list .rating-current {
    border: medium none;
    cursor: pointer;
    height: 16px;
    left: 0;
    line-height: 16px;
    outline: medium none;
    overflow: hidden;
    position: absolute;
    text-indent: -1000px;
    top: 0;
  }

  .rating-list a:hover {
    background-position: left bottom !important;
  }

  .rating-list {
    .one-star {
      width: 20%;
      z-index: 6;
    }

    .two-stars {
      width: 40%;
      z-index: 5;
    }

    .three-stars {
      width: 60%;
      z-index: 4;
    }

    .four-stars {
      width: 80%;
      z-index: 3;
    }

    .five-stars {
      width: 100%;
      z-index: 2;
    }

    .rating-current {
      background: url("../images/rating-stars.png") repeat-x 0 center !important;
      margin: 0;
      padding: 0;
      z-index: 1;
    }
  }
}

//
// List Layouts
// -------------------------

// Leading Items
// -------------
.items-leading {
  @include clearfix();

  // Single Item
  .col {
    .item-image {}

    p {}
  }
}

.magz-sidebar {
  .items-leading {
    .item-intro p {
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }
}

// Intro Items
// -------------
.items-row {

  // Single Item
  .item {
    padding-top: 0;
    padding-bottom: 0;

    // Styles on Desktop

    .item-title {}

    .item-image {}

    .item-content {}

    .item-intro {
      margin-bottom: 0;
    }

    p {
      margin-top: 0;
      margin-bottom: $spacer;
    }
  }

  .item-full {
    padding-bottom: $spacer*4;
  }
}

// Blog Layout
// -----------
.blog,
.blog-featured {
  .items-leading {
    .blog-item {}

    // Content
    .item-content {
      padding: 2rem;
    }
  }

  .item-inner {
    margin-bottom: $spacer;
    padding-bottom: $spacer;

    @include media-breakpoint-up(md) {
      margin-bottom: $spacer*2;
      padding-bottom: $spacer*2;
    }
  }

  // Title
  .page-header {
    h2 {
      @include media-breakpoint-down(lg) {
        font-size: var(--h5-font-size) !important;
      }
    }
  }

  // Top Info
  .top-infor {
    margin: 0;

    .article-info {
      margin-top: 0;
    }
  }

  // Intro text
  .item-intro {
    color: var(--t4-gray-600);
  }

  // Hover item
  .item {
    &:hover {
      img {
        transform: scale(1.04, 1.04);
      }
    }
  }

  // Layout Default
  &.layout_default {
    .cols-1 {
      max-width: 800px;
      margin: auto;

      .item-content {
        max-width: 576px;
        margin: auto;
      }
    }
  }

  // Layout Style 1 
  &.layout_style_1 {
    .item-inner {
      @include media-breakpoint-up(md) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: $spacer*2;
      }
    }

    .item-image.pull-left {
      @include media-breakpoint-up(md) {
        margin: 0;
      }
    }
  }

  // Layout Style 2
  &.layout_style_2 {
    .item-inner {
      @include media-breakpoint-up(md) {
        display: grid;
        gap: $spacer*2;
        grid-template-columns: 1fr 2fr;
      }
    }

    .item-image.pull-left {
      @include media-breakpoint-up(md) {
        max-width: 368px;
        margin: 0;
      }
    }

    .item-content {
      @include media-breakpoint-up(md) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: $spacer*2;
      }
    }
  }

  // Layout Style 2 No Image
  &.layout_style_2_no_image {
    .item-image.pull-left {
      display: none;
    }

    .item-inner {
      max-width: 768px;
      margin-left: auto;
      margin-right: auto;
    }

    .item-content {
      @include media-breakpoint-up(md) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: $spacer*2;
      }
    }
  }

  // Layout Style 3
  &.layout_style_3 {
    .item-image {
      position: relative;

      &::after {
        background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
        bottom: 0;
        content: '';
        height: 100%;
        left: 0;
        top: 0;
        right: 0;
        position: absolute;
      }
    }

    .item-inner {
      position: relative;
      padding: 0;
    }

    .item-content {
      bottom: 0;
      max-width: 472px;
      margin: auto;
      left: 0;
      right: 0;
      padding: $spacer*2;
      position: absolute;
    }

    .createdby [itemprop=name],
    .category-name [itemprop=genre],
    .page-header a {
      color: $white;
    }

    .text-muted {
      color: rgba($white, 0.8) !important;
    }

    .cols-1 {
      .item-image {
        margin-bottom: $spacer*2;
      }
    }
  }

  // Layout Style 4
  &.layout_style_4 {
    .item-inner {
      @include media-breakpoint-up(lg) {
        display: flex;
        gap: $spacer*2;
      }
    }

    .item-image.pull-left {
      @include media-breakpoint-up(lg) {
        margin-bottom: 0;
        max-width: 33.33%;
      }
    }
  }

  // Border Cols-1
  .cols-1 {
    .item-inner {
      border-bottom: 1px solid var(--t4-border-color);
    }
  }

  // Layout 4 columns
  .cols-4 {
    .page-header {
      h2 {
        font-size: 1.25rem;
      }
    }
  }

  .cols-6 {
    .page-header {
      h2 {
        font-size: var(--h5-font-size);
      }
    }
  }

  // The Article
  .blog-item {}
}

// Content center
.text-center {

  .article-aside,
  .article-info {
    justify-content: center;
  }
}

.vertical-align-middle {
  .item-inner {
    align-items: center;
  }
}

// Reset the duplicate container inside t4-body-main
.blog-featured {}


//
// Article Page
// -------------------------
.view-article {
  #system-message-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
}

.item-page {
  position: relative;

  //  Edit Icon
  .icons.float-right.float-end {
    float: none !important;
    margin-bottom: $spacer / 2;
    text-align: right;
  }

  // Hidden Rating default
  .content_rating {

    &,
    +form {
      display: none;
    }
  }

  .bottom-meta {
    flex-wrap: wrap;

    .article-info {
      +.review-item {
        display: flex;
        align-items: center;

        &:before {
          background: var(--t4-gray-500);
          border-radius: 50%;
          content: '';
          height: 2px;
          margin: -8px 8px 0;
          width: 2px;
        }
      }
    }
  }

  // Aside
  .article-aside {
    margin-bottom: 0;
  }

  .page-header h2 {
    font-size: var(--h3-font-size);
    margin-bottom: $spacer;

    @include media-breakpoint-up(md) {
      font-size: var(--h2-font-size);
    }

    @include media-breakpoint-up(lg) {
      font-size: var(--h1-font-size);
      margin-bottom: $spacer*1.5;
    }
  }

  .article-body {
    display: inline-block;
    margin-top: 0;

    ul.normal {
      margin: $spacer 0;

      @include media-breakpoint-up(lg) {
        margin: $spacer*2 0;
      }

      li {
        color: var(--headings-color);
        font-size: var(--h4-font-size);
        font-weight: var(--heading-font-weight);
      }
    }

    .image-full {
      @include media-breakpoint-up(lg) {
        margin-top: $spacer*2;
      }
    }
  }

  .pull-left.item-image {
    margin: $spacer 0;

    @include media-breakpoint-up(lg) {
      margin: $spacer*2 0;
    }
  }

  .image-full {
    img {
      border-radius: var(--t4-border-radius);
    }

    .image-des {
      display: block;
      font-size: 0.75rem;
      font-weight: $font-weight-normal;
    }
  }

  // Article inner
  &:not(.no-sidebar) {
    .article-inner {
      >.row {

        // Desktop view
        @include media-breakpoint-up(xl) {
          margin-left: -$grid-gutter-width;
          margin-right: -$grid-gutter-width;

          >div {
            padding-left: $grid-gutter-width;
            padding-right: $grid-gutter-width;
          }
        }
      }
    }
  }


  // siderbar left
  .intro-article .row {
    @include media-breakpoint-down(md) {
      flex-direction: column-reverse;
    }
  }

  .siderbar-article {
    position: sticky;
    top: 20px;
  }

  .author-block.author-block-post-detail {
    background: transparent;
    display: block;
    justify-content: center;
    margin-top: 0;
    padding: 0;

    // siderbar avatar
    .author-avatar {
      margin-right: 0;
      margin-bottom: $spacer;

      a {
        max-width: 50px;
        max-height: 50px;
      }
    }

    // siderbar infor
    .author-other-info {
      text-align: center;
    }

    // siderbar socials
    .author-socials {
      justify-content: center;
      gap: $spacer/3;
      flex-wrap: wrap;

      a {
        align-items: center;
        color: var(--tpl-base-300);
        display: flex;
        justify-content: center;
        margin: 0;
        padding: .25rem .5rem;

        // Tablet view
        @include media-breakpoint-down(lg) {
          width: 40px;
        }
      }
    }
  }

  .social-sharing {
    border-top: 1px solid var(--t4-border-color);
    margin-bottom: $grid-gutter-width * 2;
    padding-top: $spacer;

    // Mobile view
    @include media-breakpoint-down(sm) {
      margin-bottom: $grid-gutter-width;
    }

    h4 {
      font-size: var(--h6-font-size);
      text-transform: uppercase;
    }
  }

  // siderbar name
  .author-name {
    font-size: var(--h5-font-size);
    margin-bottom: $spacer/4;
  }

  .author-about-me,
  .author-title {
    font-size: 0.75rem;

    .full-text {
      display: none;
    }
  }

  // No Sidebar
  &.layout-default {
    &.no-sidebar {

      // Container content
      .top-article-info {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        max-width: 768px;

        .article-aside,
        .article-info,
        .bottom-meta {
          justify-content: center;
        }
      }

      .bottom-article-info,
      .full-image {
        margin-left: auto;
        margin-right: auto;
        max-width: 928px;
      }

      // Full Image
      img {
        border-radius: 0;
      }
    }
  }

  // Layout 1
  &.layout-1 {
    .container {

      // Mobile view
      @include media-breakpoint-down(sm) {
        padding-left: 0;
        padding-right: 0;
      }
    }

    // Container content
    .top-article-info {
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      max-width: 768px;

      .article-aside,
      .article-info,
      .bottom-meta {
        justify-content: center;
      }
    }

    .bottom-article-info {
      margin-left: auto;
      margin-right: auto;
      max-width: 928px;
    }

    // No Sidebar
    &.no-sidebar {
      .full-image {
        margin-left: -$grid-gutter-width / 2;
        margin-right: -$grid-gutter-width / 2;

        @include media-breakpoint-up(xxl) {
          margin-left: auto;
          margin-right: auto;
          max-width: 1600px;
        }

        .item-image,
        img {
          border-radius: 0;
          max-height: 600px;
        }
      }
    }
  }

  // Layout 2
  &.layout-2 {

    // Container content
    .top-article-info {
      margin-bottom: $grid-gutter-width * 2;

      // Full Image
      .full-image {
        .item-image {
          float: none;
          margin: 0;

          // Desktop view
          @include media-breakpoint-up(xl) {
            height: 0;
            padding-bottom: 100%;
            position: relative;

            img {
              object-fit: cover;
              object-position: center center;
              position: absolute;
              top: 0;
              left: 0;
              height: 100%;
              width: 100%;
            }
          }
        }
      }
    }

    .bottom-article-info {
      margin-left: auto;
      margin-right: auto;
      max-width: 928px;
    }
  }
}

.full-content.item-page {
  .top-article-info {
    text-align: left !important;
    max-width: 100% !important;
  }

  .row>.col-md-3.order-md-1 {
    display: none;
  }
}

// Module in article page
.read-next {

  // title module
  .section-heading {
    margin: 0 !important;
    text-align: left !important;
    width: 100% !important;

    .mod-title {
      border-top: 1px solid var(--t4-border-color);
      font-size: var(--h6-font-size);
      text-transform: uppercase;
      padding: $spacer 0;
    }
  }

  // content
  .item {
    display: block;
  }

  // Media
  .category-module {
    .item-media {
      margin-bottom: $spacer/2;

      img {
        object-fit: cover;
        object-position: center center;
        max-width: 100%;
        max-height: inherit;
        height: 120px;
        width: 100%;
      }
    }
  }
}


//
// Generic Category
// -------------------------
.category-desc {
  border: 1px solid var(--t4-border-color);

  >img {
    max-width: 30%;

    @include media-breakpoint-down(md) {
      max-width: 100%;
      margin: 0 0 $spacer;
    }
  }
}

.category {

  li {
    padding-left: 0;
  }

  .list {}

  .list-title {
    a {
      color: var(--headings-color);

      &:hover,
      &:focus,
      &:active {
        color: var(--body-link-hover-color);
      }
    }
  }

  // Striped Style
  &.row-striped,
  &.list-striped {}
}

// Filters
// T4: Joomla! use <fieldset> that break "display: flex".
// So we need to re-style the layout without using BS "btn-toolbar" styles 
// More info here: https://bugs.chromium.org/p/chromium/issues/detail?id=262679
.filters {
  legend {}

  legend,
  .btn-group,
  .input-group {
    gap: $spacer-xs;
  }

  .input-group+.btn-group {}

  .filter-search {
    flex-wrap: wrap;

    div {
      @include media-breakpoint-down(md) {
        margin-bottom: 0.5rem;
      }
    }
  }
}

//
// Categories List
// -------------------------
.categories-list {

  .base-desc {
    background-color: darken($gray-100, 2%);
    border-radius: $border-radius;
    padding: $spacer*2;

    p:last-child {
      margin-bottom: 0;
    }
  }

  .page-header {
    align-items: center;
    border: 0;
    border-bottom: 1px solid var(--t4-border-color);
    display: flex;
    justify-content: space-between;
    margin: 0 0 $spacer;
    gap: $spacer/2;
    padding: 0 0 $spacer;

    a {
      font-weight: $font-weight-bold;

      &:hover,
      &:focus,
      &:active {}
    }

    // Badges
    .badge {
      font-weight: 400;
      float: right;
      margin-left: auto;

      &::before {
        display: none;
      }
    }

    // Collapse Toggle
    .btn {}
  }

  // Indent Sub Categories
  .page-header+.fade,
  .fade>div {}

  // Category Desc
  .category-desc {}

  .com-content-categories__items {
    display: flex;

    .com-content-categories__item {
      @include media-breakpoint-up(lg) {
        margin-bottom: $spacer*2;
      }

      .item-inner {
        padding: 1rem;
        border-color: var(--t4-border-color);
      }

      img {
        @extend .rounded-3;
        @extend .shadow-sm;
        margin-bottom: 2rem;
      }
    }
  }
}


//
// Category List
// -------------------------
.category-list {}

.content-category {
  .control-group {}

  .filters {}

  // Sub Cat
  .cat-children {
    @include make-row();

    >h3 {
      flex-basis: 100%;
      padding-left: calc(var(--t4-gutter-x) / 2);
      padding-right: calc(var(--t4-gutter-x) / 2);
    }

    .cat-child {
      @include make-col(12);
      padding-left: calc(var(--t4-gutter-x) / 2);
      padding-right: calc(var(--t4-gutter-x) / 2);

      @include media-breakpoint-up(sm) {
        @include make-col(6);
      }

      @include media-breakpoint-up(md) {
        @include make-col(4);
      }
    }

    .category-desc {
      border: 1px solid var(--t4-border-color);
      border-radius: $border-radius;
      padding: $spacer;
    }
  }
}


//
// Contact Category
// -------------------------
.contact-category {
  h2 {}

  .category-desc {}

  // T4: Joomla! add ".row" to the <li>. So we need to make <ul> ".container"
  .category {
    @include make-container();
  }

  .list-title {
    a {
      font-weight: $font-weight-bold;
    }
  }
}


//
// Contacts
// -------------------------
.contact {
  .page-header {}

  dt {
    margin-right: 0;
  }

  dd {}

  dl {
    margin-bottom: $spacer/2;
  }

  #slide-contact {
    .card {}

    .card-header {
      padding: 0;

      .btn {
        color: $gray-600;
        display: block;
        font-weight: $font-weight-bold;
        padding: $spacer/1.5 $spacer;
        text-align: left;
        width: 100%;

        &:hover,
        &:focus,
        &:active {
          color: var(--body-link-hover-color);
          text-decoration: none;
        }
      }
    }
  }

  // Contact Form
  #contact-form {
    @include media-breakpoint-down(md) {
      margin-top: $spacer*1.5;
    }

    .control-label {
      color: var(--headings-color);
      margin-bottom: $spacer-xs;
    }

    .form-group {
      @include media-breakpoint-down(md) {
        gap: $spacer;
      }
    }
  }

  h3 {
    border-bottom: 1px solid $border-color;
    font-size: $font-size-lg;
    font-weight: $font-weight-bold;
    margin-bottom: $spacer;
    padding-bottom: $spacer/2;
  }

  .contact-link {
    margin-bottom: $spacer;
  }

  // infor
  .plain-contact-infor {
    @include media-breakpoint-up(lg) {
      margin-right: $spacer*6;
    }
  }

  .contact-links {
    ul.nav {
      li {
        padding-right: $spacer/2;

        a {
          background: none;
          color: var(--body-text-color);
          padding: 0;
        }
      }
    }
  }

  .contact-miscinfo {
    background: no-repeat;
    border: navajowhite;
    padding: 0;

    h3 {
      display: none;
    }

    p {
      color: var(--body-text-color);
      font-size: var(--h4-font-size);
    }
  }

  // name
  .contact-name {
    @include media-breakpoint-up(md) {
      padding-right: $spacer/2;
    }
  }

  // email
  .contact-email {
    @include media-breakpoint-up(md) {
      padding-left: $spacer/2;
    }
  }

  .email-copy {
    margin-bottom: $spacer;
  }
}

// Map
.map-container {
  max-width: 100%;
  margin: 0 0 $spacer !important;
  width: 100% !important;

  #ja-widget-map1 {

    // Mobile
    @include media-breakpoint-down(lg) {
      height: 500px !important;
    }

    // Mobile
    @include media-breakpoint-down(md) {
      height: 350px !important;
    }
  }
}


//
// Newsfeed
// -------------------------
.newsfeed {
  .feed-description {}

  >ol {}

  >ol>li {}

  .feed-link {}

  .feed-item-description {
    figure {}

    .lead {}

    .feedflare {}
  }
}


//
// Newsfeed
// -------------------------
.newsfeed-category {
  #filter-search {}

  .category {
    li {}
  }
}


// Pagination 
.pagination-wrap {
  .counter {}
}

// Page navigation
.pagenavigation {
  .pagination {
    display: flex;

    .next {
      margin-left: auto;

      .icon-chevron-right {
        margin: 0 0 0 $spacer/2;
      }
    }

    a.page-link {
      border-radius: $border-radius-sm;
    }
  }

  .btn.btn-secondary {
    background: transparent;
    color: var(--headings-color);
  }
}

.com-content-category-blog__navigation {
  align-items: center;
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;

  @include media-breakpoint-down(md) {
    margin-bottom: $spacer*2;
  }

  .com-content-category-blog__pagination {
    .pagination {
      margin: 0;

      .pagination {
        flex-wrap: wrap;
        margin: 0 !important;
        gap: $spacer/2;

        >li {
          .page-link {
            border-radius: var(--t4-pagination-border-radius);
          }

          &.disabled {
            display: none;
          }
        }
      }
    }
  }
}

.com-content-category-blog {
  .com-content-category-blog__navigation {
    flex-direction: column !important;
  }
}

//
// Search
// -------------------------
.search {

  .btn-toolbar {
    .btn {}
  }

  .searchintro {}

  fieldset {
    legend {}
  }

  .ordering-box {
    // @extend .d-flex;
    // @extend .flex-row;
    // @extend .align-items-baseline;

    label {}

    select {}
  }

  .form-limit {}

}

//
// Search form
.com-finder__search {
  .form-select {
    font-family: $font-family-sans-serif;
  }

  .input-group>.js-finder-search-query {
    border-radius: var(--t4-border-radius) !important;

    @include media-breakpoint-down(sm) {
      max-width: 100%;
    }
  }

  .input-group-append {
    margin: 0 0 0 $spacer/4;

    @include media-breakpoint-down(sm) {
      padding-top: 1rem;
    }

    .btn {
      border-radius: var(--t4-border-radius) !important;
      margin: 0 $spacer/4;
    }
  }
}

//
// The Results
#search-results {
  border-top: 1px solid var(--t4-border-color);

  .search-results {}

  .result-item {
    border-bottom: 1px solid var(--t4-border-color);
    padding: $spacer 0;
  }

  .result-title {
    margin: 0 0 $spacer/2;

    a {
      color: var(--headings-color);

      &:hover {
        color: var(--body-link-hover-color);
      }
    }
  }

  .result-category {}

  .result-text {
    color: var(--t4-gray-600);
  }

  .result-taxonomy {
    margin-bottom: $spacer/2;
  }

  .result-date {
    margin-bottom: $spacer/4;
  }

  .result-url {
    @extend .small;
    color: $gray-500;
  }

  .result-created {
    color: $gray;
  }

  .search-pagination {
    padding-top: $spacer;

    .search-pages-counter {
      @extend .small;
      color: $gray-600;
    }
  }
}


.highlight {
  background: $yellow;
  padding: 1px;
}

//
// The Empty Result
#search-result-empty {
  background-color: var(--tpl-base-100);
  border-radius: var(--t4-border-radius);
  color: $gray-700;
  padding: $spacer;
  text-align: center;

  h2 {
    font-weight: $font-weight-bold;
    font-size: $h3-font-size;
  }

  p {
    color: $gray-600;
  }
}

// Smart Search
// -------------------------
div#finder-filter-window .filter-branch {
  .control-group {
    margin-right: $spacer*2;

    .control-label {
      margin-bottom: $spacer/2;
    }

    .controls {
      margin-left: 0;
    }
  }
}


//
// Tag Category
// -------------------------
.tag-category,
.com-contact-featured {
  .category h3 {}

  .com-tags-tag__filter,
  .com-contact-featured__filter {
    margin-bottom: $spacer;
    gap: $spacer-xs;

    @include media-breakpoint-down(md) {
      flex-wrap: wrap;
      gap: $spacer;
      width: 100%;
    }
  }

  input {
    border: 1px solid var(--tpl-base-200);
    border-radius: var(--t4-border-radius) !important;
    outline: 0;
    padding: $input-btn-padding-y $input-btn-padding-x;

    &:focus {
      border-color: var(--t4-gray-400);
    }

    @include media-breakpoint-down(md) {
      width: 100%;
    }
  }

  button.btn {
    border-radius: var(--t4-border-radius) !important;
    margin-left: 0 !important;
  }

  .float-end {
    @include media-breakpoint-down(md) {
      float: inherit !important;
      margin-bottom: $spacer;
    }
  }
}

.input-group-btn {
  .btn+.btn {}
}

// 
// Edit Article 
// --------------------------
#jform_title {}


// Edit module button
// --------------------------
.jmodedit {
  background-color: $gray-200;
  border-radius: 3px;
  padding: 0;
  height: 30px;
  width: 30px;
  line-height: 1;

  span {
    color: $gray-600;
    margin: 0 !important;
    line-height: 27px;
  }

  &:hover {
    background-color: $gray-600;

    span {
      color: $white;
    }
  }
}


// Fix modal overlay
// -----------------
body.modal-open {
  .t4-wrapper-inner {
    z-index: auto;
    perspective: none;
  }

  .modal-content {
    overflow: hidden !important;
  }

  .modal {
    background-color: $white;
    border-radius: 5px;
    top: 10%;
    bottom: 10%;
    left: 50%;
    margin-left: -40%;
    overflow: hidden;
    height: auto;
    width: 80%;

    .modal-header {
      padding-left: $spacer*1.5;
      padding-right: $spacer*1.5;
      position: relative;
      align-items: center;

      h3 {
        border: 0;
        font-weight: normal;
        font-size: 18px;
        font-weight: 600;
        color: $gray-800;
        margin: 0;
        padding: 0;
        width: 100%;
      }

      .close {
        @extend .btn-close;
        position: absolute;
        right: $spacer*1.5;
        top: 50%;
        margin-top: -$spacer;
        text-indent: -999rem;
        overflow: hidden;
      }
    }

    .modal-body {
      height: calc(100% - 56px);
      padding: 0;

      iframe {
        border: 0;
        overflow: auto;
        height: 100%;
        min-height: 100%;
      }
    }
  }
}

body.contentpane {
  background-color: #fff;

  .row-fluid {
    @include make-row();
  }

  .span2 {
    @include make-col(2);
  }

  .span3 {
    @include make-col(3);
  }

  .span4 {
    @include make-col(4);
  }

  .span5 {
    @include make-col(5);
  }

  .span6 {
    @include make-col(6);
  }

  .span7 {
    @include make-col(7);
  }

  .span8 {
    @include make-col(8);
  }

  .span9 {
    @include make-col(9);
  }

  .span10 {
    @include make-col(10);
  }

  .span11 {
    @include make-col(11);
  }

  .span12 {
    @include make-col(12);
  }

  .well {
    background-color: $gray-100;
    margin-bottom: $spacer;
    padding: $spacer $spacer*2;
    @extend .card;

    .row-fluid {
      margin-bottom: $spacer/2;
    }

    .control-group {
      .controls {
        margin-left: 0;
      }
    }

    label {
      min-width: 130px;
      padding-right: $spacer/2;
      text-align: right;
    }
  }


  input[type="text"] {
    border: 1px solid $border-color;
    padding: $spacer/4 $spacer/2;
  }
}


// Improve style for MCE Editor
// ----------------------------
.mce-panel.mce-window {
  border-radius: 5px;
  border: 0 !important;
  padding: 0 !important;

  .mce-window-head {
    border-bottom: 1px solid $border-color;
    padding: $spacer;

    .mce-close {
      height: 50px;
      width: 50px;
    }
  }

  .mce-foot {
    border-radius: 0 0 5px 5px;
    border-top: 1px solid $border-color;

    .mce-btn {
      border-radius: 5px;
    }
  }
}

// Container popup
.container-popup {
  padding: $spacer/2 $spacer !important;

  #uploadform.well {
    margin-bottom: 0;
  }
}

// Revision
.com_contenthistory {
  .container-popup {

    // Joomla 4
    .subhead {
      border-bottom: 1px solid $border-color;
      padding: $spacer $spacer*2;
    }

    // Joomla 3
    .btn-group {
      padding-top: 1rem;
      padding-bottom: .5rem;

      button.btn {
        border-radius: 4px;
        margin: 0 4px;
      }
    }
  }
}

.js-stools-container-bar {
  margin-bottom: $spacer;

  .btn-wrapper {
    input {
      display: inline-block;
      width: auto;
    }

    button {
      display: inline-block;
    }
  }

  .btn {
    @extend .btn-secondary;
  }
}

.js-stools-container-list {
  margin-bottom: $spacer;
}

.thumbnails.thumbnails-media {
  list-style: none;
  margin: $spacer -8px 0;
  padding: 0;
  overflow: hidden;

  li a {
    color: $gray-600;
    display: block;
    padding-top: $spacer*2;

    &:hover,
    &:focus,
    &:active {
      color: var(--link-hover-color);
    }

    span {
      font-size: 32px;
      height: auto;
      width: auto;
    }
  }
}

//
// Template Configure page
// -------------------------
.com_config {
  .hr-condensed {
    display: none;
  }

  #templates-form {
    .btn-toolbar {
      display: none;
    }
  }

  #page-site {
    h1 {
      font-size: $font-size-lg;
      @extend .alert;
      @extend .alert-success;
    }
  }
}

// Infinity wrap
.infinity-wrap {
  margin-top: $spacer;
}

.login-remember .form-check {
  align-items: center;
  display: flex;
  margin-bottom: $spacer;

  .form-check-label {
    margin-bottom: 0;
  }
}

.registration {
  fieldset {
    &::before {
      background-color: var(--t4-border-color);
    }

    legend {
      background: var(--body-bg-color);
      color: var(--headings-color);
      z-index: 2;
    }
  }

  form div.com-users-registration__submit .controls {
    @include media-breakpoint-up(lg) {
      margin-left: 220px;
    }
  }
}


.login-wrap {
  .other-links {
    a {
      color: var(--t4-gray-600);

      &:hover {
        color: var(--body-link-hover-color);
      }
    }
  }
}

.com-users-logout__form.form-horizontal {
  .control-group {
    .controls {
      display: flex;
      justify-content: center;
      margin-left: 0;
    }

    .fa {
      display: none;
    }
  }
}

.users-profile-custom-joomlatoken {
  dd.col-sm-9 {
    word-break: break-word;
  }
}

.form-select {
  background-color: var(--body-bg-color);
  border-color: var(--tpl-base-200);
  color: var(--headings-color);
  width: auto;

  option {
    color: var(--body-text-color);
  }
}

// 
// 
.request-form {
  .control-group {
    @include media-breakpoint-down(md) {
      display: flex;
      flex-direction: column;
      gap: $spacer;
    }
  }

  .controls {
    @include media-breakpoint-down(md) {
      margin-left: 0 !important;
    }
  }

  .custom-select {
    appearance: auto;
    background: transparent;

    @include media-breakpoint-up(md) {
      max-width: 240px;
      width: 100%;
    }
  }
}

div.com-users-remind,
div.com-users-reset {
  background-color: var(--tpl-base-100);
}

.profile {
  fieldset {

    legend,
    dt,
    dd {
      border-color: var(--t4-border-color);
    }
  }

}

form.form-horizontal .control-group .controls {
  @include media-breakpoint-down(sm) {
    margin-left: 0 !important;
  }

  .form-control {
    @include media-breakpoint-down(sm) {
      max-width: 100%;
    }
  }
}

// RTL language Rating Form
// ------------
html[dir="rtl"] {
  .rating-form {
    .rating-list {
      .rating-current {
        background-position: left center !important;
      }
    }
  }
}