//
// TOP BAR BLOCK
// ------------------------------------
.t4-topbar {
  padding-top: $spacer/1.5;
  padding-bottom: $spacer/1.5;

  p {
    margin: 0;
  }
}


//
// MAIN NAV
// ------------------------------------
#t4-mainnav {
  box-shadow: 0 3px 5px rgba(0,0,0,0.05);

  @include media-breakpoint-up(lg) {
    box-shadow: none;
  }

  // Has Border Class
  &[class*="border-"] {
    border-color: var(--border-color) !important;
  }

  // Sticky
  &.t4-sticky {
    z-index: 999;
  }
}


//
// HEADER BLOCK
// ------------------------------------
#t4-header-wrap {
  .t4-header-inner {

  }
}

//
// Logo 
// ----
.logo-dark,
.logo-sm-dark {
  display: none!important;
}

// Transform to logo dark
.dark-active {
  .logo-dark {
    display: block !important;
  }

  .logo-light {
    display: none !important;
  }

  // Has Logo Mobile
  .logo-control {
    @include media-breakpoint-down(xs) {
      .logo-dark,
      .logo-light {
        display: none !important;
      }

      // Logo On Mobile
      .logo-sm-dark {
        display: block !important;
      }

      .logo-sm-light {
        display: none !important;
      }
    }
  }
}


.navbar-brand {
  display: flex;
  align-items: center;
  min-height: 60px;
  padding-top: 0;
  padding-bottom: 0;

  .logo-img {
    max-height: 60px;

    @include media-breakpoint-down(md) {
      max-height: 30px;
    }
  }

  // Has small logo
  &.logo-control {
    img.logo-img {
      display: none;
      max-height: 100%;
      max-width: none;

      @include media-breakpoint-up(sm) {
        display: inline-block;
        max-height: 40px;
        max-width: 100%;
      }
    }

    img.logo-img-sm {
      max-width: 160px;

      @include media-breakpoint-up(sm) {
        display: none;
      }
    }
  }

  a {
    color: var(--mainnav-link-color);

    &:hover, &:focus, &:active {
      text-decoration: none;
    }
  }

  // Logo text
  &.logo-text {
    font-family: var(--heading-font-family);
    line-height: 1;
    
    .site-name {
      display: inline-block;
      font-weight: 600;
      font-size: 24px;
      text-transform: uppercase;
      line-height: 1;
    }

    .site-slogan {
      display: block;
      opacity: .5;
      text-transform: none;
      font-size: $font-size-base;
      line-height: 1;

      // Hidden on tablet
      @include media-breakpoint-down(md) {
        display: none;
      }
    }

    .logo-img-sm {
      float: left;
      margin-right: $spacer/2;
    }

    &.logo-control {
      .site-name,
      .site-slogan {
        display: none;

        @include media-breakpoint-up(sm) {
          display: block;
        }
      }

      .logo-img-sm {
        margin-right: 0;
      }
    }
  }
}

.nav-breakpoint {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($next, $grid-breakpoints);

    &#{$infix}{
      @include media-breakpoint-down($breakpoint) {
        .t4-header {
          .t4-header-inner {
            position: relative;
          }

          .t4-megamenu-wrap,
          .t4-navbar,
          .navbar {
            position: static;
          }
        }
      }
    }
  }
}

.navbar-expand {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($next, $grid-breakpoints);

    &#{$infix}{
      @include media-breakpoint-down($breakpoint) {
        div.t4-megamenu {
          background: var(--light-reverse);
          box-shadow: 0 6px 6px rgba(0,0,0,0.4);
          border-bottom: 1px solid var(--border-color);
          border-top: 1px solid var(--border-color);
          margin-top: 0;
          position: absolute;
          top: 100%;
          width: 100%;
          left: 50%;
          max-height: 300px;
          transform: translateX(-50%);
          overflow: auto;
          z-index: 110;

          .mega-caption {
            position: static;
            bottom: auto;
            line-height: 1;
          }

          .dropdown ul,
          .mega-inner {
            padding: 0;
          }

          > ul.navbar-nav {
            padding: $grid-gutter-width/2;
          }

          ul.mega-nav {

            >li {
              >a {
                padding: $grid-gutter-width/4 0;
              }
            } 
          }

          .navbar-nav > li {
            > a,
            > .nav-link {
              color: var(--mainnav-link-color); // Fix important for mainnav link white
              display: block;
              font-size: var(--h5-font-size);
              font-weight: 600;
              line-height: 1.5;
              min-height: auto;
              padding: $grid-gutter-width/4 0;
              text-transform: none;

              .item-caret {
                border-top-color: var(--mainnav-link-color)!important; // Fix important for mainnav link white
              }

              &:before {
                display: none;
              }

              &:hover {
                color: var(--mainnav-link-hover-color);

                .item-caret {
                  border-top-color: var(--mainnav-link-hover-color)!important; // Fix important for mainnav link white
                }
              }
            }

            &.active {
              > a,
              > .nav-link {
                color: var(--mainnav-link-hover-color);

                .item-caret {
                  border-top-color: var(--mainnav-link-hover-color)!important; // Fix important for mainnav link white
                }
              }
            }
          }

          .mega-col-title {
            font-size: var(--h5-font-size)!important;
            font-weight: 600;
            text-transform: none;
            margin: $grid-gutter-width/4 0;
            padding: 0;

            &:before,
            &:after {
              display: none;
            }

            span {
              border: 0;
              padding: 0;
            }
          }

          .mega-dropdown-inner {
            > .row {
              > div {
                padding: 0 $grid-gutter-width/4;
              }
            }

            ul.navbar-nav {

              li {
                margin: 0;

                a {
                  background: transparent !important;
                  color: var(--mainnav-link-color);
                  padding: $grid-gutter-width/4 0;
                  font-size: var(--h6-font-size);
                  font-weight: 400;
                  opacity: 1;

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

            .t4-module {
              margin-top: 0 !important;
            }
          }

          // Dropdown menu
          .dropdown-toggle:after {
            float: none;
            margin-left: $spacer / 2;
          }
          
          .dropdown-menu {
            background: transparent;
            border: none;
            box-shadow: none;
            font-size: var(--h6-font-size);
            padding: 0 0 0 $spacer;

            a {
              &:hover,&:focus,&:active {
                opacity: 1;
              }
            }

            .navbar-nav li {
              > a {
                opacity: 0.6;
                padding: 0;

                &:hover,&:focus,&:active {
                  opacity: 1;
                }
              }

              &.active > a {
                opacity: 1;
              }
            }

            // Custom Mod Menu
            .navbar-nav.temp-layouts {
              > li {
                @include make-col(12);
                padding-top: 0;
                padding-bottom: 0;
              }
            }
          }
        }
      }
    }
  }
}


// Header wrap
.header-wrap {
  position: relative;
  min-height: 40px;

  // Logo
  .navbar-brand {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
  }
}

.t4-section {
  .header-block {
    padding: $spacer;
  }
}

.t4-section-inner.container-fluid {
  .header-block {
    padding: $spacer 0;
  }
}

.t4-section-inner.container {
  .header-block {
    padding: 0;
  }
}

// Header Default
// --------------------------------

// Global theme class
div[class*="header-theme-"],
header[class*="header-theme-"] {
  border: 0;
  border-color: rgba(255,255,255,0.1)!important;

  .navbar-brand a {
    color: $white;

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

  .svg-light, .svg-dark {
    fill: $white;
  }

  .t4-offcanvas-toggle,
  .navbar-toggler {
    color: $white;

    &:hover {
      color: $white;
      opacity: 0.8;
    }
  }

  // Mega Menu
  .t4-megamenu > .navbar-nav > li {
    > a,
    > span {
      color: $white;
      position: relative;

      &:before {
        background: $white;
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        height: 0;
        width: 100%;
        transition: 500ms all;
      }

      .item-caret.item-caret {
        border-top-color: $white;
      }

      &:hover,&:focus,&:active {
        color: $white;

        &:before {
          height: 2px;
        }

        .item-caret.item-caret {
          border-top-color: $white;
        }
      }
    }

    &.active,
    &.show {
      > a,
      > span {
        color: $white;

        .item-caret.item-caret {
          border-top-color: $white;
        }

        &:before {
          height: 2px;
        }
      }
    }
  }

  // Head Search
  .head-search {
    .mod-finder,
    .form-search {

      .awesomplete {
        display: block;
        height: 100%;
      }

      .js-finder-search-query,
      .search-query,
      .inputbox { 
        background-image: url('../images/search-light.svg');

        &::placeholder {
          color: rgba(255,255,255,0.2);
        }

        &:focus {
          color: $white;
        }
      }
    }

    &.search-expanded {
      .form-search {
        .search-query,
        .inputbox {
          border: 0;
          color: $white;

          &::placeholder {
            color: rgba(255,255,255,0.2);
          }
        }
      }
    }
  }

  &.header-theme-dark {
    background: #212121!important;

    // Head Search
    .head-search {
      .mod-finder,
      .form-search {

        .inputbox,
        .search-query,
        .js-finder-search-query { 
          &:focus {
            background-color: #212121;
            border: 1px solid rgba(255,255,255,0.2);
            color: $white;
          }
        }
      }

      &.search-expanded {
        .form-search {
          .search-query,
          .inputbox {
            @include media-breakpoint-up(lg) {
              background-color: #212121;
              border: 1px solid rgba(255,255,255,0.5);
            }

            &::placeholder {
              color: rgba(255,255,255,0.4);
            }

            &:focus {
              border: 1px solid rgba(255,255,255,0.8);
            }
          }
        }
      }
    }
  }

  &.header-theme-primary {
    background: var(--color-primary)!important;

    // Head Search
    .head-search {
      .form-search {
        .search-query,
        .inputbox { 
          &:focus {
            background-color: var(--color-primary);
          }
        }
      }

      &.search-expanded {
        .mod-finder,
        .form-search {
          .js-finder-search-query,
          .search-query,
          .inputbox {
            @include media-breakpoint-up(lg) {
              background-color: rgba(255,255,255,0.2);
              border: 1px solid transparent;
              border-radius: 50px;
            }

            &::placeholder {
              color: rgba(255,255,255,0.4);
            }

            &:focus {
              border: 1px solid rgba(255,255,255,0.2);
            }
          }
        }
      }
    }
  }
}

// Fix height for header
.header-layout-6,
.header-layout-7 {
  .t4-megamenu > .navbar-nav > li > a,
  .t4-megamenu > .navbar-nav > li > .nav-link {
    padding: 1.35rem 0;
  }
}
// Megamenu
.t4-megamenu-wrap.align-left  .t4-megamenu > .navbar-nav > li {
  margin-left: 0;
  margin-right: $grid-gutter-width;
}

.t4-header {
  // Has Container
  .container & {
    padding-left: $grid-gutter-width;
    padding-right: $grid-gutter-width;
  }
}

.header-default {
  background: var(--body-bg-color);
  padding-left: $grid-gutter-width;
  padding-right: $grid-gutter-width;
  
  // Mobile view
  @include media-breakpoint-down(sm) {
    padding-left: $grid-gutter-width / 2;
    padding-right: $grid-gutter-width / 2;
  }
}

// Header style 1
// --------------------------------
.header-layout-1 {
  background: var(--body-bg-color);
  box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

// Header style 2
// --------------------------------
.header-layout-2 {
  background: var(--body-bg-color);  

  // Logo
  .t4-logo-header {
    margin-right: $grid-gutter-width;
  }
}


// Header style 3
// --------------------------------
.header-layout-3,
.header-layout-11 {
  background: var(--body-bg-color);
  padding-left: $grid-gutter-width;
  padding-right: $grid-gutter-width;

  // Mobile view
  @include media-breakpoint-down(sm) {
    padding-left: $grid-gutter-width / 2;
    padding-right: $grid-gutter-width / 2;
  }

  // Logo
  .t4-logo-header {
    margin-right: $grid-gutter-width;
  }
}

// Header style 4
// --------------------------------
.header-layout-4 {
  background: var(--body-bg-color);

  // Logo
  .t4-megamenu-wrap {
    margin-left: $grid-gutter-width;

    // Desktop view
    @include media-breakpoint-up(xl) {
      border-left: 1px solid var(--border-color);
      padding-left: $grid-gutter-width;
    }
    
  }

  // Right Header
  .t4-header-right {
    // Desktop view
    @include media-breakpoint-up(xl) {
      border-left: 1px solid var(--border-color);
      border-right: 1px solid var(--border-color);
      padding: 0 $grid-gutter-width / 2;
      min-height: $t4-header-height;
    }
  }

  // Has Container
  .container & {
    padding-right: 0!important;

    // Right Header
    .t4-header-right {
      border-right: 0;
    }
  }
}

// Header style 5
// --------------------------------
.header-layout-5 {
  background: var(--body-bg-color);

  // Has Container
  .container & {
    padding-left: 0;
    padding-right: 0;

    .header-top {
      padding-left: $grid-gutter-width;
      padding-right: $grid-gutter-width;
    }

    .t4-megamenu-wrap {
      padding-left: $grid-gutter-width;
    }

    .t4-header-right {
      padding-right: $grid-gutter-width;
    }
  }

  // Logo
  .navbar-brand {
    min-height: 0;
  }

  .header-top {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: $spacer-lg / 2;
    padding-top: $spacer-lg / 2;

    // Desktop view
    @include media-breakpoint-up(lg) {
      padding-bottom: $spacer-lg;
      padding-top: $spacer-lg;
    }
  }
}

// Header style 6
// --------------------------------
.header-layout-6 {
  background: var(--body-bg-color);

  // Has Container
  .container & {
    padding-left: 0;
    padding-right: 0;

    .header-top {
      padding-left: $grid-gutter-width;
      padding-right: $grid-gutter-width;
    }

    .t4-megamenu-wrap {
      padding-left: $grid-gutter-width;
    }

    .t4-header-right {
      padding-right: $grid-gutter-width;
    }
  }

  // Logo
  .navbar-brand {
    min-height: 0;
  }

  .header-top {
    padding-bottom: $spacer-lg / 2;
    padding-top: $spacer-lg / 2;

    // Desktop view
    @include media-breakpoint-up(lg) {
      padding-bottom: $spacer-lg;
      padding-top: $spacer-lg;
    }
  }
}

// Header style 7
// --------------------------------
.header-layout-7 {
  background: var(--body-bg-color);

  // Has Container
  .container & {
    padding-left: 0;
    padding-right: 0;

    .header-top {
      padding-left: $grid-gutter-width;
      padding-right: $grid-gutter-width;
    }

    .t4-megamenu-wrap {
      padding-left: $grid-gutter-width;
    }

    .t4-header-right {
      padding-right: $grid-gutter-width;
    }
  }

  // Logo
  .navbar-brand {
    min-height: 0;
  }

  .header-top {
    padding-bottom: $spacer-lg / 2;
    padding-top: $spacer-lg / 2;
  }
}

// Header style 8
// --------------------------------
.header-layout-8 {
  background: var(--body-bg-color);

  // Has Container
  .container & {
    padding-left: 0;
    padding-right: 0;

    .header-top {
      padding-left: $grid-gutter-width;
      padding-right: $grid-gutter-width;
    }

    .t4-megamenu-wrap {
      padding-left: $grid-gutter-width;
    }

    .t4-header-right {
      padding-right: $grid-gutter-width;
    }
  }

  // Logo
  .navbar-brand {
    min-height: 0;
  }

  .header-top {
    padding-bottom: $spacer-lg / 2;
    padding-top: $spacer-lg / 2;
  }

  // Mainnav
  .header-bottom {
    border-top: 1px solid var(--border-color);
  }
}

// Header style 9
// --------------------------------
.header-layout-9 {
  background: var(--body-bg-color);

  // Has Container
  .container & {
    padding-left: 0;
    padding-right: 0;

    .header-top {
      padding-left: $grid-gutter-width;
      padding-right: $grid-gutter-width;

      // Mobile view
      @include media-breakpoint-down(sm) {
        padding-left: $grid-gutter-width / 2;
        padding-right: $grid-gutter-width / 2;
      }
    }

    .t4-megamenu-wrap {
      padding-left: $grid-gutter-width;
    }

    .t4-header-right {
      padding-right: $grid-gutter-width;
    }
  }

  // Logo
  .navbar-brand {
    min-height: 0;
  }

  .header-top {
    border-bottom: 2px solid var(--border-dark-color);
    padding-bottom: $spacer-lg / 2;
    padding-top: $spacer-lg / 2;

    // Desktop view
    @include media-breakpoint-up(lg) {
      padding-bottom: $spacer-lg;
      padding-top: $spacer-lg;
    }
  }
}

// Header style 10
// --------------------------------
.header-layout-10 {
  border-bottom: 1px solid var(--border-color);

  .wrap-header {

    // Desktops
    @include media-breakpoint-up(lg) {
      border-left: 1px solid var(--border-color);
      border-right: 1px solid var(--border-color);
    } 
  }

  .navbar-brand.logo-control img.logo-img {
    @include media-breakpoint-up(xs) {
      max-height: 48px;
    }
  }

  .top-right {
    // Desktops
    @include media-breakpoint-up(lg) {
      border-left: 1px solid var(--border-color);
    } 

    // Tablets
    @include media-breakpoint-down(md) {
      position: static;
    } 
  }

  .top-head {
    // Desktops
    @include media-breakpoint-up(lg) {
      border-bottom: 1px solid var(--border-color);
    }

    .t4-header-left {
      color: var(--gray-500);
      font-size: 10px;
      padding-left: $grid-gutter-width;
      text-transform: uppercase;

      +.t4-header-right {
        //flex: 1;
      }
    }

    .t4-header-right {
      flex: 1;

      .head-search {
        height: $grid-gutter-width*1.5;

        // Landscape phones
        @include media-breakpoint-up(lg) {
          border-left: 1px solid var(--border-color);
          width: $grid-gutter-width*1.5;
        }

        .form-search {
          // Landscape phones
          @include media-breakpoint-up(lg) {
            margin: 0 $grid-gutter-width/2;
          }
        }

        .js-finder-search-query,
        .search-query {
          height: $grid-gutter-width*1.5;

          &:focus {
            // Landscape phones
            @include media-breakpoint-up(sm) {
              right: -18px;
            }
          }
        }
      }
    }
  }

  .t4-megamenu-wrap {
    padding: 0 $grid-gutter-width 0 $grid-gutter-width/2;
  }

  .t4-megamenu > .navbar-nav > li > a {
    padding: 20px 0;
  }

  .menu-right {
    position: relative;

    .moduletable {
      border: none;
      margin: 0;
      padding: 0;
    }

    h3 {
      margin-bottom: 0;
      color: var(--color-primary);
      font-weight: 600;
      cursor: pointer;

      &:after {
        color: var(--color-primary);
        content: '\f078';
        display: inline-block;
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        margin-left: 6px;
        position: relative;
        top: auto;
        left: auto;
        height: auto;
        width: auto;
      }
    }

    ul.list-item {
      background: var(--light-reverse);
      border-radius: 0;
      box-shadow: none;
      border: 1px solid var(--border-color);
      right: 0;
      opacity: 0;
      padding: $spacer;
      position: absolute;
      top: 32px;
      visibility:hidden;
      width: 400px;
      z-index: 100;
      transform-origin: 100% 0%;
      transform: perspective(600px) rotateX(-90deg);
      transition: all 0.5s ease;
    }

    &:hover {
      h3 {
        opacity: 0.85;

        &:after {
          opacity: 0.85;
        }
      }

      ul.list-item {
        transform: perspective(600px) rotateX(0deg);
        visibility: visible;
        opacity: 1;
      }
    }
  }
}

// Header style 12
// --------------------------------
.header-layout-12 {
  [class^="col-"], [class*=" col-"] {
    position: static;
  }

  .t4-megamenu-wrap {
    // Desktops
    @include media-breakpoint-up(lg) {
      border-left: 1px solid rgba($white, 0.1);
      padding-left: $grid-gutter-width;
      margin-left: $grid-gutter-width;
    } 
  }

  // Desktops
  @include media-breakpoint-up(lg) {
    .t4-header-right {
      height: 100%;

      .theme-toggle {
        border-left: 1px solid rgba($white, 0.1);
        height: 100%;
        padding: 0 $grid-gutter-width;
        display: flex;
      }

      .head-search {
        border-right: 1px solid rgba($white, 0.1);
        border-left: 1px solid rgba($white, 0.1);
        height: 100%;
        padding: 0 $grid-gutter-width;
        display: flex;
        align-items: center;
        margin-left: 0;

        .mod-finder,
        .form-search {
          .search-query,
          .js-finder-search-query {
            height: 80px;
            top: -21px;

            &:focus {
              width: 950px;
              right: -32px;
            }
          }
        }
      }
    }
  }
}

// Header style 13
// --------------------------------
.header-layout-13 {
  --border-color: rgba(255,255,255,0.1);
  @extend .header-layout-10;

  .menu-right h3 {
    font-family: var(--body-font-family);
  }

  .t4-megamenu > .navbar-nav > li > .nav-link {
    padding: 1.867rem 0
  }

  .menu-right h3::after {
    background-color: transparent
  }
}

// Menu breakpoint
// Use to control all header elements
@each $breakpoint in map-keys($grid-breakpoints) {
  .nav-breakpoint {
    &#{"-"}#{$breakpoint} {
      @include media-breakpoint-up($breakpoint) {
        .header-wrap {
          @include make-row();

          .navbar-brand {
            position: relative;
            left: auto;
            top: auto;
            margin: 0;
          }

          .navbar-toggler {
            display: none;
          }

          .navbar {
            padding: 0;
          }
        }

        // Header style 2
        &.oc-desktop {
          .header-block-2 {
            .t4-navbar {
              padding-right: $spacer*3;
            }

            .t4-offcanvas-toggle {
              right: $spacer;
            }
          }  
        }

        .header-block-2 {
          .navbar-brand {
            @include make-col(4);
            padding-left: $grid-gutter-width/2; 
            padding-right: $grid-gutter-width/2;
            display: flex;
            align-items: center;
          }

          .t4-navbar {
            @include make-col(8); 
            padding-left: $grid-gutter-width/2;
            padding-right: $grid-gutter-width/2;

            .navbar {
              float: right;
            }
          }
        }

        // Header style 3
        .header-block-3 {
          .navbar-brand {
            margin: 0 auto $spacer;
            text-align: center;
            @include make-col(4);
            @include make-col-offset(4);
            padding-left: $grid-gutter-width/2;
            padding-right: $grid-gutter-width/2;            
          }

          .t4-navbar {
            @include make-col(12);
            padding-left: $grid-gutter-width/2;
            padding-right: $grid-gutter-width/2;

            .nav {
              margin: 0 auto;
            }
          }
        }

        // Header style 4
        &.oc-desktop {
          .header-block-4 .t4-navbar {
            padding-left: $spacer*2;
          }  
        }

        .header-block-4 {
          .t4-navbar {
            @include make-col(5);
            padding-left: $grid-gutter-width/2;
            padding-right: $grid-gutter-width/2;
          }

          .navbar-brand {
            @include make-col(2);
            left: auto;
            transform: none;
          }

          .header-r {
            @include make-col(5);
            padding-left: $grid-gutter-width/2;
            padding-right: $grid-gutter-width/2;
          }
        }

        // Header style 5 
        &.oc-desktop {
          .header-block-5 {
            .t4-navbar {
              padding-left: $grid-gutter-width/2;
              padding-right: $grid-gutter-width/2;
            }

            .t4-offcanvas-toggle {
              right: $spacer;
            }
          }  
        }

        .header-block-5 {
          padding-top: 0;
          padding-bottom: 0;

          .navbar-brand {
            @include make-col(3);
            padding-left: $grid-gutter-width/2;
            padding-right: $grid-gutter-width/2;
            display: flex;
            align-items: center;
          }

          .t4-navbar {
            @include make-col(6); 
            padding-left: $grid-gutter-width/2;
            padding-right: $grid-gutter-width/2;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: row-reverse;

            .navbar {
              float: right;
            }
          }

          .t4-head-mod {
            @include make-col(3); 
            padding-left: $grid-gutter-width/2;
            padding-right: $grid-gutter-width/2;
            justify-content: end;
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }
}


#t4-header .header-block-5 #triggerButton {
  position: static;
}

//
// Search in Header
// ----------------------
.head-search {
  margin-left: $grid-gutter-width / 2;

  .awesomplete {
    display: block;
    height: 100%;
  }

  // Search
  .search,
  .form-search,
  .mod-finder {
    background: transparent;
    border: none;
    padding: 0;
    position: relative;
    height: 40px;
    width: 14px;

    label,
    .btn {
      display: none!important;
    }
    
    .form-control,
    .search-query {
      background-image: url('../images/search.svg');
      background-position: left center;
      background-repeat: no-repeat;
      background-color: transparent;
      border: 1px solid transparent;
      color: var(--body-text-color);
      position: absolute;
      padding: 0 0 0 14px;
      right: 0;
      top: 0;
      height: 40px;
      max-width: none;
      z-index: 10;
      width: 14px;
      transition: 500ms all;

      @include media-breakpoint-up(lg) {
        background-position: left center;
      }

      &:focus {
        background-color: var(--gray-200);
        border-color: var(--border-color);
        background-position: 12px center;
        box-shadow: none;
        color: var(--body-text-color);
        width: 200px;
        padding-right: $spacer;
        padding-left: $grid-gutter-width;
        outline: none;
      }
    }
  }

  // Expended on Desktop
  &.search-expanded {
    @include media-breakpoint-up(lg) {
      .search,
      .mod-finder,
      .form-search {
        .form-control,
        .search-query {
          background-position: right 12px center!important; // Remove effect focus
          background-color: var(--gray-200);
          border-color: var(--border-color);
          padding-right: $grid-gutter-width;
          padding-left: $grid-gutter-width / 2!important; // Remove effect focus
          width: 200px;
        }
      }
    }
  }

  // Change Icon to light
  .dark-active & {
    .form-control,
    .search-query {
      background-image: url('../images/search-light.svg');
    }
  }
}


//
// MASTHEAD BLOCK
// ------------------------------------
.t4-masthead {

  .t4-masthead-inner {
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: calc(var(--global-spacing) * 8);
    padding-bottom: calc(var(--global-spacing) * 8);
    text-align: center;

    // Mobile view
    @include media-breakpoint-down(sm) {
      //padding-top: calc(var(--global-spacing) * 4);
      //padding-bottom: calc(var(--global-spacing) * 4);
      padding: calc(var(--global-spacing) * 4) calc(var(--global-spacing) * 2);
    }

    &.has-bg {
      margin-bottom: $grid-gutter-width;
      background-position: center;
      position: relative;

      &:before {
        content: '';
        background: rgba($black, 0.45);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }

      .t4-masthead-detail {
        position: relative;
        z-index: 10;
        color: $white;

        .t4-masthead-title {
          color: $white;
        }
      }
    }
  }

  .t4-masthead-title {
    font-size: var(--h1-font-size);
    margin: 0;

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

  .t4-masthead-description {
    font-size: 1.125rem;
    max-width: calc(var(--global-spacing) * 80);
    margin: calc(var(--global-spacing) * 2) auto 0;

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

  .container {
    .page-title {
      font-weight: 600;
    }
  }
}


//
// MAIN BODY
// ------------------------------------
.t4-main-body {
  padding-top: var(--grid-gutter-width);
  padding-bottom: var(--grid-gutter-width);

  // Styles on Desktop
  @include media-breakpoint-up(md) {
    padding-bottom: calc(var(--grid-gutter-width) * 2);
  }

  // Large Gutter on Desktop
  @include media-breakpoint-up(xl) {
    .t4-row {
      margin-left: -42px;
      margin-right: -42px;

      > div {
        padding-left: 42px;
        padding-right: 42px;

        // Fix width sidebar for GG Ads
        &.sidebar-r,
        &.sidebar-l {
          max-width: 384px;
          flex: 0 0 384px;
        }
      }
    }
  }
}

// Main Content Container 
.t4-main {
  padding-top: $spacer;
  padding-bottom: $spacer;
}


//
// T4 SIDEBAR
// ------------------------------------
.sidebar-l,
.sidebar-r {
  @include media-breakpoint-down(md) {
    margin-top: $spacer*2;
  }
}

.t4-sidebar {
  .sidebar-l {
    margin-bottom: $spacer;
  }

  // Styles on Breakpoint
  @include media-breakpoint-down(md) {
    margin-top: $spacer;
  }

  .t4-card {
    margin: $spacer auto;
  }
}


//
// BREAKCRUMBS BLOCK
// ------------------------------------
.t4-section.t4-breadcrumbs {
  border-top: 1px solid var(--border-color);

  ul {
    background: transparent;
    border-radius: 0;
    margin: 0;
  }
}


//
// Home page sections
// ------------------------------------

// Title Section
.section-title-wrap {
  margin-bottom: $grid-gutter-width;

  .section-title {
    margin: 0;
    padding: $grid-gutter-width / 2 0;
  }
}

// Border for Section
div[class*="title-border-top"] {
  border-top: 1px solid var(--border-color);
}

div[class*="title-border-bottom"] {
  border-bottom: 1px solid var(--border-color);
}

div.title-border-center-gray,
div.title-border-center-dark {
  border-bottom: 0;
  border-top: 0;
  position: relative;

  .section-title {
    position: relative;

    &:before {
      background: var(--border-color);
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      height: 1px;
      width: 100%;
    }
  }

  span {
    background: var(--body-bg-color);
    position: relative;
    padding-right: $grid-gutter-width / 2;
    z-index: 2;
  }

  // Align Title Center
  &.text-center {
    span {
      padding-left: $grid-gutter-width / 2;
    }
  }
}

div[class*="-dark"] {
  border-width: 2px;
  border-color: var(--border-dark-color);

  .section-title {
    &:before {
      background: var(--border-dark-color);
      height: 2px;
      margin-top: 1px;
    }
  }
}

// Space Section on Home page
div[id^="t4-body-"],
div[id^="t4-section-"],
div[id^="t4-spotlight-"]  {
  padding-top: $grid-gutter-width;
  padding-bottom: $grid-gutter-width;

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

  &.owl-full { 
    // Desktop view
    @include media-breakpoint-up(lg) {
      padding-top: $grid-gutter-width * 2;
      padding-bottom: $grid-gutter-width * 2;
      margin-bottom: $grid-gutter-width;
    }
  }
}

div[id^="t4-spotlight-"] {
  .heading-title {
    font-size: var(--h5-font-size);
  }

  .t4-row {
    margin-top: -$grid-gutter-width / 2;
    margin-bottom: -$grid-gutter-width / 2;

    > div {
      padding-top: $grid-gutter-width / 2;
      padding-bottom: $grid-gutter-width / 2;
    }
  }
}

// Special Style for Owl on Section home
.owl-full {
  background: var(--color-yellow-light);
  overflow: hidden;

  div.t4-section-inner {
    position: static;
  }
  
  .owl-carousel {
    position: static;

    .owl-stage-outer {
      position: static;
      overflow: visible;
    }
  }
}

.t4-section {
  position: relative;

  > .t4-row {
    margin-right: 0;
    margin-bottom: 0;
  }

  .bg-overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 0;
  }

  .t4-section-inner {
    position: relative;
  }
}

// Home Fashion
.layout-fashion-1 {
  // Mod FontFamily
  .mod-heading .heading-title span,
  .heading-title span {
    font-family: var(--body-font-family);
    font-size: var(--h5-font-size);
  }

  // Layout Magz
  .magz-layout.cols-1 {
    div[class*="col-"] {
      + div[class*="col-"] {
        .card-item {
          border-top: 1px solid var(--border-color);
          padding-top: $grid-gutter-width;
        }
      }
    }
  }
}

.layout-fashion-2 {
  .layout-1.item-border .jacl-row {
    &:before,
    &:after {
      display: none;
    }
  }

  // Layout Magz
  .magz-layout.cols-1 {
    div[class*="col-"] {
      + div[class*="col-"] {
        .card-item {
          border-top: 1px solid var(--border-color);
          padding-top: $grid-gutter-width;
        }
      }
    }
  }
}


.layout-fashion-3 {
  // Layout Magz
  .magz-layout.cols-1 {
    div[class*="col-"] {
      + div[class*="col-"] {
        .card-item {
          border-top: 1px solid var(--border-color);
          padding-top: $grid-gutter-width;
        }
      }
    }
  }
}

.layout-fashion-4 {
  div[class*="t4-spotlight-"] {
    .layout-1 .cols-1 .highlight-item:first-child {
      // Desktop view
      @include media-breakpoint-up(lg) {
        .jacl-item__title {
          min-height: 85px;
        }

        .jacl-item__body {
          border-bottom: 1px solid var(--border-color);
          padding-bottom: $grid-gutter-width;
        }
      }
    }
  }
}

// Entertainment
.layout-entertaiment-1 {
  .jacl-layout .highlight-item .jacl-item__media img {
    height: 100%;
    object-fit: cover;
  }

  .jacl-layout.layout-7 .normal-gutters .col-child .jacl-item__inner {
    overflow: unset;
    border: 0;
    
    .jacl-item__body {
      border: 1px solid var(--border-color);
    }
  }
}

// Home Magazine
.layout-magz-1,
.layout-magz-2 {
  // Heading Module
  .heading-title {
    text-transform: none;
  }

  // Item Border
  .normal-gutters,
  .large-gutters,
  .extra-large-gutters,
  .t4-main-body {
    .jacl-item:not(.item-style-1) {
      @include media-breakpoint-up(lg) {
        border-bottom: 1px solid var(--border-color);
        padding-bottom: $grid-gutter-width;
        height: 100%;
      }
    }
  }
  
  
  // Remove border for Element not use
  .sidebar-r,
  .sidebar-l {
    .jacl-item.jacl-item {
      @include media-breakpoint-up(lg) {
        border-bottom: 0;
        padding-bottom: 0;
        height: auto;
      }
    }
  }

  .layout-4 {
    .jacl-col-12:not(.highlight-item) .jacl-item {
      @include media-breakpoint-up(lg) {
        border-bottom: 0;
        padding-bottom: 0;
        height: auto;
      }
    }
  }

  .t4-wrapper {
    .layout-2,
    .layout-10,
    .layout-13,
    .layout-7.jacl-layout {
      .jacl-item {
        height: auto;
      }

      .highlight-item .jacl-item {
        height: 100%;
      }
    }

    .layout-13 .sub-layout .jacl-row > div + div:before {
      display: none;
    }
  }
}

// Home Magazine 3
@mixin magz-border-left {
  background: var(--border-color);
  bottom: $grid-gutter-width / 2;
  content: "";
  left: 0;
  top: $grid-gutter-width / 2;
  position: absolute;
  width: 1px;
}

@mixin magz-border-top {
  background: var(--border-color);
  content: "";
  left: $grid-gutter-width / 2;
  height: 1px;
  right: $grid-gutter-width / 2;
  top: 0;
  position: absolute;
}

@mixin magz-border-top-l {
  background: var(--border-color);
  content: "";
  left: 0;
  height: 1px;
  right: 0;
  top: -$grid-gutter-width / 2;
  position: absolute;
}

.layout-magz-3 {
  // Border decor on desktop
  @include media-breakpoint-up(lg) {
    .jacl-layout__body > .jacl-row.normal-gutters {
      > div {
        + div {
          // Border Left
          &:before {
            @include magz-border-left;
          }
        }
      }

      // Border Top For Child Items
      .jacl-row {
        > div {
          + div {
            &:before {
              @include magz-border-top;
            }
          }
        }
      }

      .col-child {
        > div {
          position: relative;

          + div {
            &:before {
              @include magz-border-top-l;
            }
          }
        }
      }

      .sub-items {
        position: relative;

        > div + div {
          position: relative;

          &:before {
            @include magz-border-left;
            height: auto;
          }
        }

        + .sub-items:before {
          @include magz-border-top;
        }
      }
    }

    // Remove Border Some Layouts
    .layout-4,
    .sidebar-r .jacl-layout,
    .sidebar-l .jacl-layout,
    .content-blog-top .jacl-layout,
    .content-blog-bottom .jacl-layout {
      div {
        &:before {
          display: none;
        }
      }
    }

    // Border On List Magazine
    .magz-layout .content-items > .row > div {
      &:before {
        @include magz-border-top;
        bottom: -$grid-gutter-width / 2;
        top: auto;
      }
    }
  }
  
  // Special Border
  @include media-breakpoint-up(lg) {
    .normal-gutters {
      &.cols-1 {
        > div {
          &:before {
            display: none;
          }

          + div {
            position: relative;

            &:after {
              @include magz-border-top;
            }
          }
        }
      }

      &.cols-2 {
        > div:nth-child(2n+1) {
          &:before {
            display: none;
          }
        }
      }

      &.cols-3 {
        > div:nth-child(3n+1) {
          &:before {
            display: none;
          }
        }
      }

      &.cols-4 {
        > div:nth-child(4n+1) {
          &:before {
            display: none;
          }
        }
      }

      &.cols-5 {
        > div:nth-child(5n+1) {
          &:before {
            display: none;
          }
        }
      }

      &.cols-6 {
        > div:nth-child(6n+1) {
          &:before {
            display: none;
          }
        }
      }
    }
  }

  // Spotlight Border
  @include media-breakpoint-up(lg) {
    div[id^="t4-spotlight-"] {
      .t4-row {
        > div + div {
          &:before {
            @include media-breakpoint-up(lg) {
              @include magz-border-left;
            }
          }
        }
      }

      .magz-border-top {
        &:before {
          display: none;
        }

        &:after {
          @include media-breakpoint-up(lg) {
            @include magz-border-top;
          }
        }
      }
    }
  }
}

// Home Magazine 4
.layout-magz-4 {
  @extend .layout-magz-3;
}

#t4-top-lead {
  // JACL Item 1
  .item-style-1 .jacl-item__body {
    @include media-breakpoint-up(xl) {
      padding: $grid-gutter-width * 2;
    }
  }
  
}

.content-blog-top.col-12 {
  padding-left: 0;
  padding-right: 0;
}


//
// BODY MASS TOP / BODY MASS BOTTOM
// ------------------------------------
.body-mass-top {
  > div {
    margin-bottom: calc(var(--global-spacing) * 8);
  }
}

.body-mass-bot {
  > div {
    margin-top: calc(var(--global-spacing) * 8);
  }
}

.content-blog-top {
  > * {
    margin-bottom: $grid-gutter-width;
  }

  // Menu On Top
  .parent-name {
    display: none;
  }

  .mod-list {
    display: flex;
    align-items: center;
    margin-bottom: $grid-gutter-width;
    justify-content: center;

    li {
      margin: 0 5px 5px;

      a {
        background: var(--gray-100);
        color: var(--heading-color);
        display: inline-block;
        font-weight: 700;
        text-transform: uppercase;
        

        &:hover,&:focus,&:active {
          background: var(--gray-200);
          color: var(--heading-color);
        }
      }

      &.current {
        > a {
          background: var(--color-primary);
          color: $white;
        }
      }
    }
  }
}

.content-blog-bottom {
  margin-top: $grid-gutter-width;
}

//
// DEMO ELEMENTS ON TEMPLATE
// ------------------------------------


//
// JA FOOTNAV
// ------------------------------------
.ja-footnav {
  padding-top: $grid-gutter-width / 2;

  // Mobile view
  @include media-breakpoint-up(lg) {
    padding-top: $grid-gutter-width;
  }

  a {
    color: var(--footer-link-color);

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

  h3, h4, h5, h6 {
    color: var(--footer-title-color);
  }

  .border-left {
    // Landscape phones
    @include media-breakpoint-down(xs) {
      border: none !important;
    } 
  }

  .t4-section-inner {
    > .row > div:last-child {
      .t4-module {
        @include media-breakpoint-down(sm) {
          margin-bottom: 0;          
        }
      }
    }
  }

  .t4-module {
    // Desktops
    @include media-breakpoint-up(lg) {
      margin-top: 0;
    }

    // Tablets
    @include media-breakpoint-down(md) {
      margin-bottom: $grid-gutter-width;
    }  

    .module-inner {
      padding: 0;
    }

    .module-title {
      border: 0;

      span {
        border: 0;
        font-size: $font-size-sm;
        font-weight: 600;
        padding-bottom: 0;
      }
    }
  }


  // Footnav menu
  // ------------
  .t4-module .navbar {
    padding: 0;

    .navbar-nav {
      width: 100%;
    }
  }

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

  .nav > li {
    a {
      color: var(--footer-link-color);
      padding: $spacer/2.5 0;
      transition: all 0.25s;

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

    &.active {
      > a {
        color: var(--footer-link-hover-color);
        font-weight: 400;
      }
    }
  }

  .footer-sportlight {
    > div {
      margin-bottom: $grid-gutter-width*1.5 !important;
    }
  }

  .latestnews.list-item {
    .item-body {
      .item-meta {
        .author {
          .name {
            color: var(--footer-link-color);
          }
        }
      }
    }
  }

  ul.list-social {
    padding: 0;
    display: flex;

    li {
      margin-right: $grid-gutter-width/4;
      list-style: none;

      a {
        border-radius: 50%;
        border: 1px solid var(--footer-text-color);
        display: inline-block;
        font-size: 12px;
        height: 35px;
        line-height: 32px;
        text-align: center;
        width: 35px;
      }
    }
  }

  &.footer-5 {
    .border-left {
      // Landscape phones
      @include media-breakpoint-down(md) {
        border: none !important;
      } 
    }
  }
}


//
// JA FOOTER
// ------------------------------------
.ja-footer {
  font-size: $font-size-sm;
  padding-top: $grid-gutter-width;
  padding-bottom: $grid-gutter-width/2;

  a {
    color: var(--footer-link-color);

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

  .footer-copyright {
    @include media-breakpoint-down(xs) {
      order: 2;
    }
  }

  .logo-footer {
    @include media-breakpoint-up(sm) {
      text-align: right;
    }
  }

  .logo-image {
    margin-bottom: $grid-gutter-width/2;

    img {
      max-width: 100px;
    }
  }

  .footer1 {
    margin-bottom: 4px;
  }

  .footer-sportlight {
    >div {
      margin-bottom: $grid-gutter-width;

      // Desktops
      @include media-breakpoint-up(lg) {
        margin-bottom: $grid-gutter-width*1.5;
      }
    }
  }

  &.footer-1, &.footer-2, &.footer-3, &.footer-4 {
    padding-bottom: 0;
    padding-top: 0;

    @include media-breakpoint-up(sm) {
      padding-top: $grid-gutter-width/2;
      padding-bottom: $grid-gutter-width/2;
    }

    @include media-breakpoint-up(lg)  {
      padding-top: $grid-gutter-width*2;
      padding-bottom: $grid-gutter-width;
    }
  }

  &.footer-5,
  &.footer-7 {
    padding-bottom: 0;

    // Landscape phones
    @include media-breakpoint-up(sm)  {
      padding-top: $grid-gutter-width*1.5;
      margin-top: $grid-gutter-width*1.5;
    }

    // Tablets
    @include media-breakpoint-up(lg) {
      margin-top: $grid-gutter-width*2;
      padding-top: $grid-gutter-width*2;
      padding-bottom: $grid-gutter-width;
    } 
  }

  &.footer-6 {
    // Landscape phones
    @include media-breakpoint-between(md, lg)  {
      padding-top: $grid-gutter-width*1.5;
    } 

    // Tablets
    @include media-breakpoint-up(md) {
      padding-top: $grid-gutter-width/2;
      padding-bottom: $grid-gutter-width*1.5;
    }

    @include media-breakpoint-up(lg) {
      padding-top: $grid-gutter-width*2;
    }
  }
}

//
// FOOTNAV
// ------------------------------------
.t4-footnav {
  background-color: var(--footer-bg-color);
  border-top: 1px solid var(--border-color);

  +.t4-footer {
    border-top: none;
  }

  .container {
    padding-top: $grid-gutter-width * 2;
  }

  .t4-module {
    margin-bottom: $grid-gutter-width;

    .module-inner {
      padding: 0;
    }

    .module-title {
      border: 0;

      span {
        border: 0;
        font-size: $font-size-sm;
        font-weight: 600;
        padding-bottom: 0;
      }
    }
  }


  // Footnav menu
  // ------------
  .t4-module .navbar {
    padding: 0;
  }

  .nav > li {
    a {
      color: var(--footer-link-color);
      padding: $spacer/2.5 0;
      transition: all 0.25s;

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

      &.active {
        color: var(--footer-link-hover-color);
      }
    }

    &.active {
      > a {
        color: var(--footer-link-hover-color);
        font-weight: 400;
      }
    }
  }
}

.t4-footer {
  background-color: var(--footer-bg-color);
  border-top: 1px solid var(--border-color);
  color: var(--footer-text-color);
  //font-size: $font-size-sm;
  
  .container {
    padding-top: $grid-gutter-width;
    padding-bottom: $grid-gutter-width;
  }

  .bg-overlay {
    .bg-overlay-vid {
      height: 100%;
    }
  }

  a {
    color: var(--footer-link-color);

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

  // Footer Modules
  .footer-position {
    float: right;
  }

  // Footer Menu
  //------------
  /* .nav {
    margin: 0;

    > li {
      display: inline-block;

      &:before {
        @include separator("/");
        color: $gray-500;
        margin: 0 6px;
      }

      &:first-child:before {
        display: none;
      }
    }

    > li > a {
      color: var(--footer-link-color);
      text-transform: uppercase;
      display: inline-block;

      // Link States
      &:hover, &:active, &:focus {
        background: none;
        border-bottom: 1px solid $body-color;
        color: var(--footer-link-hover-color);
      }
    }
  } */
}



//
// MISC.
// --------------------------------------------------

// Error page
// ----------
.t4-error-page {
  background-color: $gray-100;

  .t4-error-wrap {
    border: 1px solid $border-color;
    padding: $spacer;
  }
}


// Load more button
.btn-load-more {
  background-color: var(--dark-reverse);
  color: var(--light-reverse);
  border-radius: $btn-border-radius;
  font-weight: 500;
  padding: var(--global-spacing) calc(var(--global-spacing) * 5);
  letter-spacing: 1px;
  text-align: center;

  &:hover, &:focus, &:active {
    background-color: var(--color-green);
    color: var(--light-reverse);
    cursor: pointer;
  }
}

// Ending message
.ending-msg {
  background-color: var(--light-reverse);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  color: var(--body-text-color);
  padding: var(--global-spacing) 0;
  letter-spacing: 1px;
  text-transform: uppercase;
}

// Back to top
// -----------
#back-to-top {
  background: var(--gray-900);
  border: 1px solid rgba($white,.1);
  border-radius: 0;
  color: var(--light-reverse);
  display: none;
  position: fixed;
  right: $spacer*2;
  bottom: $spacer;
  height: $grid-gutter-width * 1.5;
  line-height: 42px;
  text-align: center;
  width: $grid-gutter-width * 1.5;
  z-index: 100;

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

.top-away #back-to-top {
  display: block;
}

.joomla-modal.joomla-modal {
  background-color: $white;;
  border-radius: $border-radius;
  border: 1px solid rgba($black, 0.3);
  box-shadow: 0 3px 7px rgba($black,0.3);
  height: auto;
  left: 50%;
  margin-left: -40%;
  outline: none;
  top: 5%;
  width: 80%;

  .modal-header {
    align-items: center;

    h3 {
      color: $black;
      font-size: $h4-font-size;
      font-weight: 600;
      margin: 0;
    }

    .close {
      margin: 0;
      padding: 0;
    }
  }

  .modal-dialog {
    .modal-content {
      overflow: hidden;
    }
  }

  .iframe {
    border: none;
    width: 100%;
  }

  .modal-footer {
    .btn {
      background: var(--gray-200);
      height: 48px;
      padding: 8px 32px;
      line-height: 29px;

      &:hover {
        opacity: 0.75;
      }
    }
  }
}

.theme-game {
  ul.pagination {
    justify-content: flex-start;
  }

  .counter {
    text-align: left;
  }
}

// Home Game 3
.layout-gaming-3 {
  .t4-wrapper {
    background: var(--gray-100);

    .t4-content {
      max-width: 1920px;
      margin: auto;
    }
  }

  #t4-mainnav {
    margin-left: calc(50% - 50vw);
    max-width: calc(100vw - 8px);
    width: 100vw;

    .t4-header-inner {
      max-width: 1920px;
      margin: auto;
    }
  }
}

// Ovrride icon
[class^="icon-"], [class*=" icon-"] {
  &::before {
    font-family: 'Font Awesome 5 Free';
  }
}

.icon-calendar::before  { content: "\f073"; }