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

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

:root {
--color-black: 0,0,0;
--color-green-light: 109,182,171;
--color-red: 239,119,101;
--color-red-light: 245,173,163;
}

body {
  background: rgba(var(--color-black),0.5);
}

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

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

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

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

// Page Header
.page-header,
.categories-list {
  h1 {
    font-size: $font-size-base;
    font-weight: $font-weight-bold;
  }

  h2 {
    font-size: var(--h3-font-size);
    margin: 0;

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

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


// Article Aside
// -------------------------
.article-info {
  a {
    // Link states
    &:hover, &:focus, &:active {
    }
  }
  
  .article-info-term {
  }
  
  dd {
    > div {
    }

    &.category-name {
      display: none;
    }

    .fa, fas {
      display: none;
    }
  }
}

// Author
.createdby {
}

// Category Name
.category-name {
  
}

// URL
.article-url {
}

// Publish Date
.published {
  time {
  }
}

// Modified Date
.modifydate {
}

// Hits
.hits {
}

// Article Desciption
.contentdescription {
}

.contentdescription p {
}

// Content rating
.content_rating {
}

.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 {
  > li {
    margin-bottom: $spacer-sm/2;
    float: none;

    > a {
      background: $white; 
      border: 1px solid $border-color;
      color: var(--body-text-color); 
      padding: $spacer-sm $grid-gutter-width/2;
      border-radius: $border-radius-sm;
      font-weight: 400;
      font-size: $font-size-sm;
      line-height: 1;

      &:hover {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: $white;
      }
    }
  }
}

.com-tags-tag.tag-category {
  .filters {
  }
  
  .category {
  }

  .item-tag-title {
    font-size: 1rem;
  }
}

#filter-search {
  border: $input-border-width solid $input-border-color;
  border-top-left-radius: $input-border-radius;
  border-bottom-left-radius: $input-border-radius;
  outline: none;
  padding: $input-padding-y $input-padding-x;
}

.com-tags-tag-list {
  .com-tags-tag-list__category {
    margin-top: $spacer;
  }
}

.com-contact-featured__table {
  margin-top: $spacer-lg;
}

.contact-category,
.newsfeed-category {
  #filter-search {
    border-radius: $border-radius;
  }
}

.contact-category {
  ul.category {
    padding: 0;
  }

  div.pagination {
    margin-top: $spacer-lg;
    justify-content: space-between;
    flex-wrap: wrap;

    .counter {
      order: 2;
    }
  }
}


// Article Images
// -------------------------
.item-image {
  img {
    border-radius: $border-radius;
  }
}

// Float Left Image
.pull-left.item-image,
.item-image.pull-left {
}

// 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 {
  }

  &.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 {
  margin-top: $spacer-lg !important;

  .btn {
    background-color: $gray-100;
    padding: $spacer-sm $spacer;
    text-align: left;
    font-weight: 500;
    
    // Link States
    &:hover, &:active, &:focus {
      //background-color: transparent;
      color: var(--color-primary);
    }

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

// Items More
// -----------
.items-more {
  //margin-top: $grid-gutter-width/2;
  padding-top: 0;

  h3 {
    margin-top: 0;
    margin-bottom: $spacer-lg;
    color: $headings-color;
  }
  
  .nav-tabs {
    border: none;

    > li {
      + li {
        margin-top: 10px;
      }
    }

    > li > a {
      background: transparent;
      color: var(--heading-color);
      padding: 0;

      // Link States
      &:hover, &:active, &:focus {
        background: transparent;
        color: var(--color-primary);
      }
    }
  }
}


//
// List Layouts
// -------------------------
.items-leading {
  .category-name {
    margin-top: 0;
  }

  .article-info {
    
  }

  .blog-item-content {
    //box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    display: flex;
    flex-wrap: wrap;
    gap: $grid-gutter-width;
    border: 1px solid $border-color;
    border-radius: $border-radius;

    @include media-breakpoint-down(lg){
      flex-direction: column;
      gap: 0;
    }

    // Image
    .item-image {
      margin: 0;
      height: 100%;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: $border-radius 0 0 $border-radius;

        @include media-breakpoint-down(lg){
          border-radius: $border-radius $border-radius 0 0;
        }
      }
    }

    .top-lead {
      flex: 1;
      border-radius: $border-radius 0 0 $border-radius;

      @include media-breakpoint-down(lg){
        width: 100%;
        border-radius: $border-radius $border-radius 0 0;
        padding-right: 0;
      }
    }

    .item-content {
      width: 50%;
      padding: $spacer-xl $spacer-xl $spacer-xl 0;
      border: none;
      margin: 0;

      @include media-breakpoint-down(lg){
        width: 100%;
        padding: $spacer-lg;
        margin-top: -$spacer-xl;
      }

      // Title
      .page-header {
        h2 {
          font-size: $font-size-base * 2;
          margin-bottom: $spacer-lg;

          // Mobile
          @include media-breakpoint-down(sm){
            font-size: var(--h3-font-size);
          }
        }
      }

      .tags {
        @include media-breakpoint-up(lg){
          text-align: left;
        }
        
      }
    }

    .blog-item {
      //margin-bottom: $grid-gutter-width;
    }
  }

  .blog-item {
    //border: 1px solid $border-color;
  }

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

    p {}
  }
}


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

  // Single Item
  .item {
    padding-top: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-bottom: $spacer-xl;

    // Styles on Desktop
    @include media-breakpoint-up(md) {
    }

    .item-title {
    }

    .item-image {
    }

    .item-content {
      h2 {
        font-size: 1.5rem;
      }
    }
  }

}

// Blog Layout
// -----------
.blog,
.blog-featured {
  .top-lead {
    border-radius: $border-radius $border-radius 0 0;
    position: relative;
    overflow: hidden;

    .category {
      position: absolute;
      top: 12px;
      left: 12px;
      z-index: 2;
      transition: all .6s ease;
      opacity: 0;
      visibility: hidden;

      a {
        color: $white;
        background: var(--color-primary);
        border-radius: $border-radius-sm;
        padding: 5px 12px;
        font-size: $font-size-sm;
      }
    }
  }

  .item-image {
    margin-bottom: 0;

    img {
      transition: all 1s ease;
      border-radius: $border-radius $border-radius 0 0;
    }
  }

  .item-intro {
    margin-bottom: 0;

    p {
      margin-bottom: 0;
    }
  }

  .items-leading {
    .blog-item {
    }
  }

  .blog-items {
    .blog-item {
      margin-bottom: $grid-gutter-width;
    }
  }

  .item-content {
    border: 1px solid $border-color;
    border-radius: $border-radius-lg;
    padding: $grid-gutter-width;
    margin-top: -$spacer-xl;
    background: $white;
    position: relative;
    z-index: 1;
    flex: 1;

    @include media-breakpoint-down(lg){
      padding: $spacer-lg;
    }
  }

  .item-intro {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  // The Article
  .blog-item, .item {
    &:hover {
      .category {
        opacity: 1;
        visibility: visible;
      }

      .item-image {
        img {
          transform: scale(1.03);
        }
      }
    }
  }

  .page-header + .tags {
    margin-top: $spacer-lg;
  }

  .blog-item-content {}
}

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

// Blockquote
.blockquote {
  font-family: var(--heading-font-family);
  line-height: 1.5;
  padding: $spacer-xl $spacer-xl $spacer-xl $spacer-xl*2;
  border-left: 3px solid var(--color-primary);
  position: relative;
  font-weight: 500;

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

  @include media-breakpoint-down(lg){
    padding-left: $spacer-xl;
    padding-bottom: 0;
  }

  &::before {
    content: '';
    display: inline-block;
    background-image: url('../images/quote-light.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 37px;
    height: 25px;
    position: absolute;
    top: 10px;
    left: 20px;
  }
}

.area-footer {
  border-top: 1px solid rgba($black, .1);
  padding-top: $spacer-xxl;
  margin-top: $spacer-xxl;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;

  @include media-breakpoint-down(md){
    padding-top: $spacer-lg;
    margin-top: $spacer-lg;
  }

  .title-txt {
    margin-bottom: $spacer;

    h6 {
      font-size: $font-size-base * 1.125;
      margin: 0;
    }
  }

  .area-tag {
    text-align: right;

    @include media-breakpoint-down(md){
      text-align: left;
      //margin-top: $grid-gutter-width;
    }

    .tags {
      margin-bottom: 0;
      display: flex;
      justify-content: flex-end;
      max-width: 400px;
      margin-left: auto;
      flex-wrap: wrap;

      @include media-breakpoint-down(md){
        justify-content: flex-start;
      }

      li {
        margin-right: 0;
        margin-left: 9px;
        margin-bottom: 9px;

        @include media-breakpoint-down(md){
          margin-left: 0;
          margin-right: 9px;
        }
      }
    }
  }
}


// Tour Layout
// -----------
.view-tour-listing {
  .items-wrap {
    row-gap: var(--gutter-normal);

    .tour-item.item {
      margin: 0;
    }
  }

  // Intro Image
  .intro-image .item-image {
    margin: 0;
    float: none;
  }

  // Location
  .info-location {
    margin-bottom: $spacer / 2;
  }

  // Title
  .page-header h2 {
    font-size: var(--h4-font-size);
    margin-bottom: $spacer / 2;
  }

  // View tour-layout-vertical-2
  &.tour-layout-vertical-2 {
    .tour-item {
      position: relative;
      height: 540px;

      // Mobile view
      @include media-breakpoint-down(md) {
        height: 400px;
      }

      // Intro Image
      .intro-image {
        position: static;

        img {
          border-radius: $border-radius;
          position: absolute;
          object-fit: cover;
          object-position: center center;
          top: 0;
          left: 0;
          height: 100%;
          transform: none;
          width: 100%;
        }
      }

      // Info Article
      .info-article {
        background: rgba(255,255,255,0.65);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        bottom: var(--gutter-sm);
        left: var(--gutter-sm);
        right: var(--gutter-sm);
        position: absolute;
        height: auto;
      }

      // Extra Tour
      .extra-info-tour {
        background: transparent;
        padding: 0;
      }
    }
  }

  // View Horizontal
  &.tour-layout-horizontal {
    // Desktop
    @include media-breakpoint-up(xl) {
      .tour-item {
        display: flex;
        flex-direction: row;

        // Intro Image
        .intro-image {
          margin: 0;
          flex: 0 0 45%;
          max-width: 45%;

          .item-image {
            height: 100%;
          }

          img {
            border-radius: $border-radius-lg;
            object-fit: cover;
            object-position: center;
            height: 100%;
            width: 100%;
          }
        }

        // Label
        .tour-label {
          top: var(--gutter-xs);
          left: var(--gutter-xs);
        }

        // Info
        .extra-info-tour {
          background: transparent;
          padding: 0;
        }
      }
    }
    

    // Multi Columns
    .cols-2,
    .cols-3,
    .cols-4,
    .cols-5 {
      .page-header h2 {
        font-size: var(--h5-font-size);
      }
    }
  }
}
//
// Article Page
// -------------------------
.item-page {
  max-width: 1000px;
  margin: auto;
  
  .page-header h2 {
    font-size: var(--h3-font-size);

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


    @include media-breakpoint-up(lg) {
      font-size: var(--h1-font-size);
    }
  }

  [itemprop="articleBody"] {
    img {
    }
  }

  &.type-tour {
    .article-aside {
      margin: $spacer 0;
    }

    .entry-meta {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 1rem;
      margin-top: $spacer-xl;
      margin-bottom: $spacer-xxl;

      @include media-breakpoint-down(lg) {
        grid-template-columns: repeat(2, 1fr);
      }

      .item_title {
        font-weight: 600;
        font-size: 18px;
        color: var(--heading-color);
      }

      .item {
        display: flex;
        gap: 1rem;
        align-items: center;

        .icon {
          border: 1px solid $gray-500;
          border-radius: $border-radius;
          width: 55px;
          height: 55px;
          display: flex;
          justify-content: center;
          align-items: center;

          &::before {
            content: '';
            display: inline-block;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
          }
        }

        &.item-location {
          .icon {
            &::before {
              background-image: url('../images/icons/pin.png');
              width: 20px;
              height: 30px;
            }
          }
          
        }

        &.item-difficul {
          .icon {
            &::before {
              background-image: url('../images/icons/worker.png');
              width: 32px;
              height: 30px;
            }
          }
          
        }

        &.item-services {
          .icon {
            &::before {
              background-image: url('../images/icons/service.png');
              width: 30px;
              height: 33px;
            }
          }
        }
      }
    }
  }
}


//
// Generic Category
// -------------------------
.category-desc {
  border: 1px solid $border-color;

  > img {
  }
}

.category {

  li {}

  .list {}

  .list-title {
    a {
      color: $gray-700;
      &:hover, &:focus, &:active {
        color: var(--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 {
  }

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

//
// 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 {
    border: 0;
    border-bottom: 1px solid $border-color;
    margin: 0 0 $spacer;
    padding: 0 0 $spacer;
    display: flex;
    justify-content: space-between;
    align-items: center;

    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;
    row-gap: $spacer*2;
    .com-content-categories__item {
      .item-inner {
        padding: 1rem;
      }

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

  .com-content-categories__children {
    .com-content-categories__items {
      padding: 0;
    }

    .com-content-categories__item {
      flex-basis: 100%
    }
  }
}


//
// 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 $border-color;
      border-radius: $border-radius;
      padding: $spacer;
    }
  }
}

.cat-children {
  margin-top: var(--gutter-normal);
}

//
// 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 {
  }

  dd {
  }

  // Contact Form
  #contact-form {
    fieldset {
      legend {
        border: 0;
        font-size: $font-size-base;
        margin-bottom: $spacer-xl;
      }
    }

    .form-group {
      margin-bottom: $spacer-lg !important;
    }

    #jform_consentbox {
      .form-check-input {
        border-color: $input-border-color;
      }
    }
  }

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

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

  .contact-image {
    img {
      border-radius: $border-radius;
    }
  }

  .contact-address {
    margin-top: 0;
    margin-bottom: $spacer-xl * 2;
    border-bottom: 1px solid $border-color;
    padding-bottom: $spacer;

    @include media-breakpoint-down(lg){
      padding-bottom: 0;
      margin-bottom: $spacer-xl;
    }

    dd.show-0 {
      display: flex;
      flex-direction: column;
      margin-bottom: $spacer-xxl;
      text-align: center;

      .icon {
        font-size: 24px;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
        border-radius: $border-radius;
        margin-bottom: $spacer;
        display: flex;
        align-self: center;
        padding: $spacer-lg;
        width: 72px;
        height: 72px;
        justify-content: center;
        color: var(--color-primary);

        &.fa-envelope-o {
          color: #007bff;
        }

        &.fa-map-marker {
          color: #28a745;
        }

        &.fa-phone-square {
          color: #fd7e14;
        }

        &.fa-globe {
          color: #6f42c1;
        }
      }

      .info {
        line-height: 1.5;
        display: flex;
        flex-direction: column;

        .title {
          margin: 0;
          padding-bottom: $spacer-sm;
          display: block;
          font-size: $font-size-lg;
          font-weight: 500;
          color: $headings-color;
        }

        .txt {
          color: $headings-color;
        }

        a {
          color: $headings-color;
        }
      }
    }
  }
}



// Pagination 
.pagination-wrap {

  .counter {
  }
}

.pagination {
  flex-wrap: wrap;
}

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

    .next {
      margin-left: auto;
    }

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

.pagination-wrap,
.com-content-category-blog__navigation {
  display: flex;
  //align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-top: 1rem;
  padding-bottom: 2rem;
  margin-bottom: 0;

  @include media-breakpoint-up(md) {
    padding-top: 2rem;
    padding-bottom: 0;
    justify-content: space-between;
  }

  p {
    margin: 0;
  }

  .pagination {
    @include media-breakpoint-up(lg) {
      margin: 0;
    }

    .page-link {
      border-radius: 0;
    }

    .page-item:first-of-type .page-link {
      border-radius: var(--t4-pagination-border-radius) 0 0 var(--t4-pagination-border-radius);
    }

    .page-item:last-of-type .page-link {
      border-radius: 0 var(--t4-pagination-border-radius) var(--t4-pagination-border-radius) 0;
    }
  }
}

//
// 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 {
  .input-group > .js-finder-search-query {
    border-radius: $border-radius;
  }

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

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


//
// The Results
#search-results {
  border-top: 1px solid $border-color;

  .search-results {
  }

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

  .result-title {
    margin: 0 0 calc($spacer/2);
  }

  .result-category {}
  .result-text {
  }

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

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

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

  .result-created {
    color: $gray;
  }

  .search-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: $spacer;
    justify-content: space-between;
    padding-top: $spacer;

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


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

//
// The Empty Result
#search-result-empty {
  background-color: $gray-100;
  border-radius: $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 {
  justify-content: space-between;
  gap: 1rem;

  .control-group {
    //margin-right: $spacer;
    margin-bottom: $spacer-sm;
    width: 23%;

    @include media-breakpoint-down(lg){
      width: 47%;
    }

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

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

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

.com-finder {
  .awesomplete {
    @include media-breakpoint-down(xl){
      width: 100%;
      margin-bottom: $spacer;
    }

    input {

      // Desktop
      @include media-breakpoint-up(lg){
        max-width: 100%;
        width: 700px;
      }

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

    .input-group-append {
      .btn {
        @include media-breakpoint-down(sm){
          --t4-btn-padding-x: 1rem;
          font-size: 13px;
        }
      }
    }
  }

  ul[role="listbox"]{
    z-index: 100;
    background: $white;

    li {
      color: $gray-900;
    }
  }
}

// Filter
#finder-filter-window {
  overflow: visible;

  .icon-calendar {
    margin-right: 0;
    color: $white;
  }
}

#finder-filter-select-dates {
  @include media-breakpoint-down(lg){
    flex-wrap: wrap;
    gap: 1rem;

    .filter-date {
      width: 100% !important;
    }

    .field-calendar {
      .btn {
        padding-left: $spacer;
        padding-right: $spacer;
      }
    }
  }
}

// Result
#search-results {
  .result-title  {
    a {
      color: $headings-color;

      &:hover {
        color: var(--color-primary);
      }
    }

  }
  .badge {
    background: $white;
    border: 1px solid $border-color;
    border-radius: $border-radius-sm;
    color: var(--body-text-color);
    font-size: $font-size-xs;
    font-weight: 400;
    padding: 6px 11px;
  }

  .result-url {
    color: $gray-600;
  }

  #highlighter-end {
    display: none;
  }

  .search-pagination {
    padding-top: 0;
    margin-bottom: 0;
  }
}


.com-finder .collapse:not(.show) {
  height: auto;
}


// View Tour Search
.view-search-tour {
  // Form Search
  .com-finder__search {
    border: 1px solid $border-color;
    border-radius: $border-radius;
    padding: var(--gutter-normal);
    text-align: center;

    .input-group {
      justify-content: center;
    }

    // Input
    .awesomplete {
      display: block;
      margin: var(--gutter-xs) 0;
      max-width: 680px;
      width: 100%;

      input {
        max-width: 680px;
      }

      > ul {
        background: $white;
        color: $gray-800;
        text-align: left;
        padding: $spacer / 2;

        &:before {
          left: $spacer * 3;
        }

        li:hover {
          background: $gray-100;
          border-radius: $border-radius;
        }

        mark {
          background: transparent;
          padding: 0;
        }
      }
    }

    // Button
    button {
      border-radius: $border-radius!important;
      margin: 5px;
    }
  }

  #search-results {
    border: 0;
  }

  // Item Result
  .result__item {
    border: 1px solid $border-color;
    display: flex;
    flex-direction: row;
    padding: 0;

    // Tablet view
    @include media-breakpoint-down(lg) {
      flex-direction: column;
    }

    // Intro Image
    .result__image {
      flex: 0 0 350px;
      max-width: 350px;

      // Tablet view
      @include media-breakpoint-down(lg) {
        flex: 0 0 100%;
        max-width: 100%;
      }

      img {
        border-radius: $border-radius;
        object-fit: cover;
        object-position: center;
        height: 100%;
        width: 100%;
      }
    }

    // Location
    .info-location {
      margin-bottom: $spacer / 2;
    }

    // Tilte
    .result__title-text {
      color: var(--heading-color);
      font-weight: 500;
    }

    // Content
    .result__item_content {
      padding: var(--gutter-normal);
    }

    // Pricng
    .tour-price {
      margin: $spacer / 2 0;
    }

    // taxonomy
    .result__taxonomy {
      margin-top: $spacer / 2;
    }

    // Info Tour
    .extra-info-tour {
      margin-top: $spacer;
    }
  }
}

//
// Tag Category
// -------------------------
.tag-category {
  //margin-top: $spacer*2;

  >img {
    display: block;
    margin-bottom: $spacer-sm;
  }

  .com-tags-compact__items,
  .com-tags-tag__items {
    margin-top: $spacer-sm;

    .com-tags-tag__filter {
      #filter-search {
        @include media-breakpoint-down(sm){
          width: 175px;
        }
      }
    }

    #limit {
      @include media-breakpoint-down(sm){
        margin: .5rem 0;
      }
    }
  }

  .category h3 {
  }

  .filters {
    flex-wrap: wrap;
    gap: calc($spacer/2);
    
    & > .input-group {
      width: auto;
    }

    #filter-search {
      flex: 1;
    }
  }

  .com-tags-tag-list__pagination {
    margin-top: $spacer;
  }
}

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

.com-contact-featured__items {
  #adminForm {
    overflow-x: auto;
  }

  .com-contact-featured__filter {
    #filter-search {
      @include media-breakpoint-down(sm){
        width: 160px;
      }
    }
  }

  #limit {
    @include media-breakpoint-down(sm){
      margin: .5rem 0;
    }
  }
}


//
// Com users
// -------------------------
.login-wrap {
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  border-radius: $border-radius;
  max-width: 500px;
  padding: $spacer-xxl;

  // Mobile
  @include media-breakpoint-down(md) {
    padding: $spacer-lg;
  }

  // Remember
  .login-remember {
    margin-bottom: $spacer-xl;

    #remember {
      border-color: $input-border-color;
      outline: none;
      box-shadow: none;
      width: 20px;
      height: 20px;
      padding: 0;
    }

    .form-check {
      display: flex;
      align-items: center;
      margin: 0;
    }

    .form-check-label {
      margin: 0 0 0 $spacer-sm;
    }
  }

  // Submit
  div.login-submit {
    margin-bottom: $grid-gutter-width /2;
  }

  //Other Link
  .other-links {
    max-width: 400px;
    margin: 0 auto;

    ul {
      line-height: 1.5;
    }

    a {
      color: var(--body-text-color);
      transition: $transition-base;
      font-size: $font-size-sm;

      &:hover {
        text-decoration: none;
        color: var(--color-primary);
      }
    }
  }
}

// Password
.password-group {
  .input-group {
    position: relative;

    input.form-control {
      border-radius: $border-radius !important;
    }

    .input-password-toggle {
      position: absolute;
      top: 2px;
      right: 0;
      background: transparent;
      border: none;
      color: var(--heading-color) !important;
      padding-left: 0;
      padding-right: $spacer;
      z-index: 100;

      &:after {
        display: none;
      }

      &:hover,&:focus,&:active {
        background: transparent;
        opacity: 0.85;
      }
    }
  }
}

// Calendar
.field-calendar {
  position: relative;
  max-width: 240px;

  #jform_profile_dob {
    border-radius: $input-border-radius;
  }

  #jform_profile_dob_btn {
    background: none;
    border: none;
    position: absolute;
    right: 6px;
    top: 12px;
    padding: 0;
    box-shadow: none;
    z-index: 10;
  }

  .icon-calendar {
    color: var(--heading-color);
  }

  .table > :not(caption) > * {
    >* {
      color: $gray-900 !important;
    }
  }
}


// Logout
.logout {
  form.form-horizontal {
    .control-group {
      > .controls {
        margin-left: 0;
        text-align: center;
      }
    }
  }
}


div.com-users-remind, 
div.com-users-reset {
  background: $white;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  border-radius: $border-radius;
  max-width: 500px;
  padding: $spacer-xxl;

  // Mobile
  @include media-breakpoint-down(md) {
    padding: $spacer-lg;
  }

  fieldset {
    >legend, >p {
      font-size: $font-size-base * 1.125;
    }
  }
}

.request-confirm {
  max-width: 600px;
  margin: auto;

  fieldset {
    >legend, >p {
      font-size: $font-size-base * 1.125;
      margin-bottom: $spacer-sm * 2;
    }
  }

  #jform_confirm_token {
    max-width: 100%;
  }
}


//
// Register
// --------------------------
.registration {
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  border-radius: $border-radius;
  max-width: 500px;
  padding: $spacer-xxl;
  margin: auto;

  // Mobile
  @include media-breakpoint-down(md) {
    padding: $spacer-lg;
  }

  .text-muted {
    color: var(--body-text-color) !important;
  }

  #member-registration {
    fieldset {
      padding-top: $spacer-xxl;

      &:last-of-type {
        margin-bottom: 0;
      }

      &:before {
        display: none;
      }

      legend {
        border-bottom: none;
        background: transparent;
        color: $headings-color;
        font-family: var(--heading-font-family);
        font-size: var(--h3-font-size);
        font-weight: 400;
        line-height: 1.2;
        padding: 0;
        text-transform: none;
        top: -5px;
      }
    }

    .field-spacer {
      margin-bottom: $spacer-sm;
    }

    .control-group {
      .control-label {
        float: none;
        line-height: 1;
        padding-top: 0;
      }

      .controls {
        margin-left: 0;

        strong {
          font-weight: 500;
        }

        input.form-control {
          max-width: 100%;
        }
      }
    }

    #jform_profile_aboutme {
      max-width: 100%;
    }

    .field-calendar {
      max-width: 100%;
      
      .input-group {
        flex-wrap: nowrap;
      }

      #jform_profile_dob_btn {

      }

      .btn {
        width: 40px;

        &:after {
          display: none;
        }
      }

      .js-btn {
        color: $black;

        &:hover {
          opacity: 0.95;
        }
      }

      .icon-calendar {
        margin-right: 0;
      }
    }

    #jform_profile_tos {
      padding: 0;

      label {
        margin-bottom: 0;

        &:first-child {
          padding-left: 0;
        }
      }
    }

    #jform_terms_terms {
      padding: 0;

      label {
        line-height: 1;
        margin-bottom: 0;

        &:first-child {
          padding-left: 0;
        }
      }
    }

    #jform_terms_terms-lbl {
      a.modal {
        color: var(--heading-color);
        margin-bottom: 6px;
      }
    }
  }

  // Button Submit
  div.com-users-registration__submit {
    margin-bottom: 0 !important;
  }

  .com-users-registration__cancel {
    //color: $white;
  }
}

// Profile
// ------------------------
.profile.profile {
  margin: 0 auto;
  max-width: 100%;
  position: relative;
  width: 850px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  border-radius: $border-radius;
  padding: $spacer-xxl;

  // Mobile
  @include media-breakpoint-down(md) {
    padding: $spacer-lg;
  }

  legend {
    border-bottom: none;
    color: $headings-color;
    font-family: var(--heading-font-family);
    font-size: 28px;
    font-weight: 400;
  }

  .btn-toolbar {
    margin: 0 0 0 $grid-gutter-width/2;
    position: absolute;
    right: $spacer-xxl;
    top: $spacer-xxl;

    // Mobile
    @include media-breakpoint-down(lg) {
      right: $spacer-lg;
      top: $spacer-xl;
    }

    .icon-user {
      margin-right: 4px;
    }

    a.btn {
      padding: $spacer-sm $spacer-lg;
      background: var(--color-primary);
      border: none;
      //color: $black;

      // Mobile
      @include media-breakpoint-down(sm) {
        font-size: 12px;
      }

      &:after {
        display: none;
      }

      &:hover {
        opacity: 0.85;
      }
    }
  }

  fieldset {
    margin-bottom: $spacer-sm * 3;

    &:last-of-type {
      margin-bottom: 0;
    }

    dt {
      margin-top: 0;
      text-align: left;
      font-weight: 500;
      color: $headings-color;
    }

    dd,
    dt {
      //border: none;
      padding-top: 12px;
      padding-bottom: 12px;
    }
  }

  #users-profile-custom-joomlatoken {
    dd {
      word-wrap: break-word;
    }
  }
}


#member-profile {
  legend {
    border-bottom: none;
    color: $headings-color;
    font-size: var(--h3-font-size);
    font-weight: 500;
    margin-bottom: $grid-gutter-width/2;

    // Mobile
    @include media-breakpoint-down(md){
      font-size: 24px;
    }
  }

  fieldset {
    +fieldset {
      @include media-breakpoint-up(lg){
        margin-top: $spacer-xl;
      }
    }
  }
  .control-label.col-sm-3 {
    width: 100%;

    // Mobile
    @include media-breakpoint-up(md){
      width: 25%;
      float: none;
    }
  }

  .form-control {
    max-width: 364px;

    &.validate-password,
    &#jform_profile_dob,
    &#jform_joomlatoken_token {
      max-width: 364px;

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

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

  .password-group, .field-calendar {
    .input-group {
      max-width: 364px;
    }
  }

  .choices__button_joomla {

  }

  #jform_profile_dob_btn,
  #token-copy {
    width: $grid-gutter-width * 2;
    padding: initial;
  }

  .form-select {
    max-width: 250px;
    padding: $spacer-sm $grid-gutter-width/2;
    background-color: $white;
    //border: none;
    width: 100%;

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

  .control-label {
    label {
      font-weight: 500;
    }
  }

  .field-calendar {
    #jform_profile_dob_btn {
      &:after {
        display: none;
      }

      .icon-calendar {
        margin-right: 0;
      }
    }
  }

  #com-users-methods-list {
    .card-header {
      .com-users-methods-list-method-image {
        padding: 0 !important;

        img {
          max-height: 30px;
          width: auto;
        }
      }
    }
  }

  #jform_actionlogs_actionlogsNotify {
    label {
      margin-right: $spacer-lg;
    }
  }

  .com-users-profile__edit-submit {
    .btn {
      color: $white;
    }
  }

  .field-calendar {
    display: inline-block;
    min-width: 364px;
  }
}

// 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;
    }
  }
}

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

  #ja-widget-map1 {
    border-radius: $border-radius;

    // Tablet View
    @include media-breakpoint-down(lg) {
      height: 350px !important;
    }
  }
}


// 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%;
    z-index: 1080;

    .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;
  padding: $spacer;

  .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: calc($spacer/2);
    }

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

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


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

  .js-stools {
    display: flex;
    flex-flow: row wrap;

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


// 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: calc($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;
    }
  }
}

.page-normal {
  .area-footer {
    display: none;
  }
}

// Tour Detail
.tour-gallery {
  margin-bottom: $spacer-xxl;

  .row {
    --t4-gutter-x: 1rem;
  }

  .item {
    img {
      border-radius: $border-radius;
    }
  }
  
  .wrap-inner {
    display: grid;
    //grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding-left: $spacer-lg;
    padding-right: $spacer;

    .item {
      a {
        position: relative;
        height: 100%;
        width: 100%;
        display: block;

        &::before {
          content: '';
          display: inline-block;
          position: absolute;
          top: 0;
          right: 0;
          left: 0;
          bottom: 0;
          background: rgba($black, .4);
          border-radius: $border-radius;
          z-index: 1;
          transition: all .5s ease;
          opacity: 0;
          visibility: hidden;
        }
  
        &:after {
          content: '\f030';
          display: inline-block;
          font-family: "Font Awesome 5 Free";
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: $white;
          background: var(--color-primary);
          width: 50px;
          height: 50px;
          border-radius: 50%;
          z-index: 2;
          font-weight: 600;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: $font-size-lg;
          transition: all .6s ease;
          opacity: 0;
          visibility: hidden;
        }

        &:hover {
          &::before, 
          &:after {
            opacity: 1;
            visibility: visible;
          }
        }
      }
    }

    // Desktop
    @include media-breakpoint-up(lg){
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;

      .item {
        &:nth-child(10n + 1),
        &:nth-child(10n + 8) {
          grid-column: span 2;
          grid-row: span 2;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
    }

    // Tablets
    @include media-breakpoint-down(lg){
      grid-template-columns: repeat(2, 1fr);
    }

    // Tablets
    @include media-breakpoint-down(sm){
      grid-template-columns: repeat(1, 1fr);
    }
  }

  .owl-nav {
    position: absolute;
    top: 50%;
    left: $spacer-xl;
    right: $spacer-xl;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);

    // Tablets
    @include media-breakpoint-down(lg){
      left: $spacer;
      right: $spacer;
    }

    button {
      height: 60px;
      width: 60px;
      background: rgba($white, .8) !important;
      border-radius: $border-radius;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30px !important;

      // Tablets
      @include media-breakpoint-down(lg){
        width: 40px;
        height: 40px;
        font-size: 25px !important;
      }

      &:hover {
        color: $white;
        background: var(--color-primary) !important;
      }
    }
  }

  .owl-dots {
    position: absolute;
    bottom: $spacer;
    left: 50%;
    transform: translateX(-50%);
  }
}

// Tour Hight
.tour-hightlight {
  .item {
    margin-top: 1rem;

    .inner {
      display: flex;
      gap: 1rem;
      border: 1px solid $border-color;
      padding: 1rem;
      border-radius: $border-radius;
      align-items: center;

      .img {
        img {
          max-width: 40px;
        }
      }

      h5 {
        margin: 0;
      }
    }
  }
}

.tour_sidebar {
  // Desktop
  @include media-breakpoint-up(lg){
    position: sticky;
    top: $spacer-lg;
  }

  // Desktop
  @include media-breakpoint-down(lg){
    order: -1;
    margin-bottom: $spacer-xxl;
  }

  .wrap-inner {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    padding: $spacer-xl;
    border-radius: $border-radius;

    @include media-breakpoint-down(md){
      padding: $spacer-lg;
    }

    +.wrap-inner {
      margin-top: $grid-gutter-width;
    }

    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;

      .item_title {
        color: $headings-color;
        font-weight: 500;
      }

      .item_desc {
        text-align: right;
      }

      +.item {
        margin-top: $spacer;
        padding-top: $spacer;
        border-top: 1px solid $border-color;
      }
    }
  }

  .map-container {
    #ja-widget-map1 {
      max-height: 300px !important;
    }
  }
}

ul.list-item {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem;
  padding: 0;
  margin: 0;
  list-style: none;

  @include media-breakpoint-down(sm){
    grid-template-columns: repeat(1, 1fr);
  }

  li {
    display: flex;
    align-items: center;

    .fas {
      margin-right: 10px;
    }

    .fa-check {
      color: $green;
    }

    .fa-times {
      color: $red;
    }
  }
}

#accordionTour {
  padding: 0;
  margin: $spacer-lg 0;

  * {
    box-shadow: none;
    outline: none;
  }

  .accordion-item {
    border: 1px solid $border-color;
    border-radius: $border-radius;
    background: #fcfcfc;
    margin-bottom: $spacer;
    padding: $spacer-lg;

    .accordion-header {
      padding: 0;

      button {
        padding: 0;
        background: transparent;
        font-weight: 600;
        color: $headings-color;
        font-size: $font-size-md;
      }
    }

    .accordion-body {
      padding: $spacer-lg 0 0;
    }
  }
}

.section-full {
  margin-left: calc(50% - 50vw);
  max-width: calc(100vw - 9px);
  width: 100vw;

  // Desktop
  @media(max-width: 1500px){
    max-width: calc(100vw - 0px);
  }
}

.view-tour {
  .t4-main-body {
    padding-top: $spacer-xxl;
  }
}

.view-profile {
  .card {

    .offset-sm-3 {
      .btn {
        padding: $input-btn-padding-y $input-btn-padding-x;
        border-radius: $border-radius;
        color: $white;
        font-size: $font-size-base;
        margin-bottom: .5rem;
      }
    }
  }
}


//
// Newsfeed
// -------------------------
.newsfeed-category {
  .filters > div {
    margin-bottom: 10px;
  }

  .com-newsfeeds-category__description {
    border: 0;
    padding: 0;
  }
  
  .category {
    li {
    }
  }

  ul.list-group {
    li {
      a {
        word-break: break-all;
      }
    }
  }

  div.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;

    ul.pagination {
      margin: 0;
      gap: .5rem;
    }
  }

  .com-newsfeeds-category__pagination {
    margin-top: $grid-gutter-width;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}

//
// Archive
// -------------------------
.com-content-archive__filters {
  #filter-search {
    min-width: 240px;
  }
}

.com-content-archive {
  .filter-search {
    @include media-breakpoint-down(sm){
      flex-wrap: wrap;
      gap: .2rem;
    }
  }

  .pagination-wrap {
    padding-top: 0;
    margin-bottom: 0;

    .counter {
      display: none;
    }
  }
}

input.inputbox {
  background-color: $input-bg;
  border: 1px solid $input-border-color;
  padding: $input-btn-padding-y $input-btn-padding-x;
  font-size: $input-btn-font-size;
  color: $input-color;
}

// HTML Lightbox
div#html5box-html5-lightbox {
  .html5-prev-touch,
  .html5-next-touch {
    position: absolute;
    top: 50%;
    margin-top: -16px;
  }
}

.js-calendar {
  right: 0;
}