// ======================================
// --------------- Offcanvas ------------
// ======================================

.off-canvas-base {
  position: absolute;
  background-color: #f5f5f5;
  z-index: 999;
  .close-offcanvas {
    z-index: 999;
    color: #000;
  }
  .padding-20 a.close-offcanvas{
    display: none;
  }
}

.offcanvas-bottom {
  a {
    color: #8A91A4;
  }
}

#close-offcanvas {
  color: #000;
}
body.offcanvas-open .sunfw-content::before{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.2);
  content: '';
  opacity: 0;
  -webkit-transform: translate3d(100%,0,0);
  transform: translate3d(100%,0,0);
  -webkit-transition: opacity 0.2s, -webkit-transform 0s 0.2s;
  transition: opacity 0.2s, transform 0s 0.2s;

}
body[class*='-open'].offcanvas-open .sunfw-content::before {
    opacity: 1;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.off-canvas-base{
    z-index: 10000;
}

@media (max-width: 767px) {
  body.sunfw-offCanvas > .off-canvas-base{
    width: 250px !important;
  }
  body.sunfw-offCanvas > .off-canvas-right {
    transform: translate3d(250px, 0, 0) !important;
    -webkit-transform: translate3d(250px, 0, 0) !important;
  }
  body.sunfw-offCanvas > .off-canvas-left {
    transform: translate3d(-250px, 0, 0) !important;
    -webkit-transform: translate3d(-250px, 0, 0) !important;
  }  
  body.sunfw-offCanvas.is-right-open > .off-canvas-right {
    transform: translate3d(0px, 0px, 0px) !important;
  }
  body.sunfw-offCanvas.is-left-open > .off-canvas-left {
    transform: translate3d(0px, 0px, 0px) !important;
  }  
}
@mixin off-canvas-position(
  $position: left,
  $width: 300px,
  $height: 100%,
  $fixed: false,
  $movecontent: false
) {
  @if $position == left {

    @if ($movecontent == true) {
        &.is-#{$position}-open .sunfw-content {
          @include translate3d($width, 0, 0);
        }
        &.is-#{$position}-open.sunfw-direction-rtl .sunfw-content {
          @include translate3d(-$width, 0, 0);
        }
    }

    .off-canvas-#{$position} {
      @include transition(all .3s);
      //@include translate3d(-$width, 0, 0);
      //width: $offcanvas-left-width;
      height: $offcanvas-left-height;
    }
    &.sunfw-direction-rtl .off-canvas-#{$position} {
      //@include translate3d($width, 0, 0);
    }
  } @else if $position == right {

    @if ($movecontent == true) {
        &.is-#{$position}-open .sunfw-content {
          @include translate3d(-$width, 0, 0);
        }
        &.is-#{$position}-open.sunfw-direction-rtl .sunfw-content {
          @include translate3d($width, 0, 0);
        }
    }

    .off-canvas-#{$position} {
      @include transition(all .3s);
      //@include translate3d($width, 0, 0);
      //width: $width;
      height: $height;
    }
    &.sunfw-direction-rtl .off-canvas-#{$position} {
      //@include translate3d(-$width, 0, 0);
    }
  } @else if $position == top {

      @if ($movecontent == true) {
          &.is-#{$position}-open .sunfw-content {
            @include translate3d(0, $height, 0);
          }
      }

      .off-canvas-#{$position} {
        @include transition(all .3s);
        @include translate3d(0, -$height , 0);
        width: $width;
        height: $height;
      }
  } @else if $position == bottom {

      @if ($movecontent == true) {
          &.is-#{$position}-open .sunfw-content {
            @include translate3d(0, -$height, 0);
          }
      }

      .off-canvas-#{$position} {
        @include transition(all .3s);
        @include translate3d(0, $height , 0);
        width: $width;
        height: $height;
        // visibility: hidden;
      }
  }

  &.is-#{$position}-open {
    .off-canvas-#{$position} {
      @include translate3d(0, 0, 0);
      @if $fixed == true {
        visibility: visible;
      }
    }
  }

  @if $fixed == true {
    .off-canvas-#{$position} {
      position: fixed;
    }
  }
}

.effect-left-push { @include off-canvas-position( left, $offcanvas-left-width, $offcanvas-left-height, false, true) };
.effect-right-push { @include off-canvas-position( right, $offcanvas-right-width, $offcanvas-right-height, false, true ) };
.effect-top-push { @include off-canvas-position( top, $offcanvas-top-width, $offcanvas-top-height, false, true ) }
.effect-bottom-push { @include off-canvas-position( bottom, $offcanvas-bottom-width, $offcanvas-bottom-height, true, true ) }

.effect-left-slide { @include off-canvas-position( left, $offcanvas-left-width, $offcanvas-left-height, false, false) };
.effect-right-slide { @include off-canvas-position( right, $offcanvas-right-width, $offcanvas-right-height, false, false ) };
.effect-top-slide { @include off-canvas-position( top, $offcanvas-top-width, $offcanvas-top-height, false, false ) }
.effect-bottom-slide { @include off-canvas-position( bottom, $offcanvas-bottom-width, $offcanvas-bottom-height, true, false ) }


@mixin toggle-offcanvas ($position: left) {
  .toggle-offcanvas {
    @if $position == left {
      @include rtl-right(0);
      @include rtl-translate(100%,0);
      &.middle {
        @include rtl-translate(100%,-50%);
      }
    }
    @if $position == right {
      @include rtl-left(0);
      @include rtl-translate(-100%,0);
      &.middle {
        @include rtl-translate(-100%,-50%);
      }
    }
    @if $position == top {
      transform: translate(0,100%);
      bottom: 0;
      &.center {
        transform: translate(-50%,100%);
      }
    }
    @if $position == bottom {
      top: 0;
      transform: translate(0,-100%);
      &.center {
        transform: translate(-50%,-100%);
      }
    }
  }
}

.off-canvas-left { @include toggle-offcanvas(left) }
.off-canvas-right { @include toggle-offcanvas(right) }
.off-canvas-top { @include toggle-offcanvas(top) }
.off-canvas-bottom { @include toggle-offcanvas(bottom) }

.toggle-offcanvas {
  background: #FFF;
  padding: 5px 15px;
  line-height: 30px;
  text-align: center;
  position: absolute;
  border: 1px solid rgba(221, 221, 221, 0.5);
  .fa-bars {
    color: #000;
  }
  &:focus {
    outline: none;
  }
}

// Blank
.offcanvas-content {
  > .row {
    margin: 0;
  }
  .container {
    width: 100%;
  }
  h3.module-title {
    @include rtl-padding-left(20px);
  }
  .col-xs-12 {
    padding: 0;
  }
  ul.nav.menu {
    li {
      border-bottom: 1px solid rgba(204, 204, 204, 0.3);
      a {
        font-size: 14px;
        color: #333;
        display: block;
        @include rtl-padding(13px, 10px, 13px, 20px);
      }
    }
    .nav-child {
      border-top: 1px solid rgba(204, 204, 204, 0.3);
      > li:last-child {
        border: medium none;
      }
    }
    ul {
      padding: 0;
      list-style: none;
    }
  }
  #login-form {
   padding: 10px 15px 0;
    ul {
      padding: 0;
      list-style: none;
    }
  }

}

.off-canvas-base {
  position: fixed;
}
.off-canvas-base .offcanvas-content {
  position: fixed;
  top: 0;
  bottom: 0;
  width: inherit;
  overflow: auto;
}
.toggle-offcanvas.top {
  top: 0;
}
.toggle-offcanvas.bottom {
  bottom: 0;
}
.toggle-offcanvas.middle {
  top: 50%;
}
.toggle-offcanvas.right {
  right: 0;
}
.toggle-offcanvas.left {
  left: 0;
}
.toggle-offcanvas.center {
  left: 50%;
}
// responsive mobile
.sunfw-offCanvas .only-mobile {
  display: none;
}
@media (max-width: 767px) {
  .sunfw-offCanvas .only-mobile {
    display: block;
  }
  .sunfw-offCanvas .only-mobile .close-offcanvas.toggle-offcanvas {
    display: block;
  }
}
.icons .dropdown-menu {
  border: 1px solid #d1d6de;
  border-radius: 0;
}
//OFF Canvas
body.sunfw-offCanvas > .off-canvas-left {
  // -webkit-transform: translate3d(0, 0, 0)!important;
}
.offcanvas-content {
  overflow-y: scroll;
  nav.navbar.sunfw-menu-head ul.navbar-nav > li {
    border: none;
    > a:not(.get-it){
      border: none;
    }
  }
  
  .sunfw-tpl-menu {
      display: flex;
      flex-direction: column;
      float: none!important;
      @include rtl-text-align-left();
      ul {
          position: relative!important;
          @include rtl-left(0!important);
          opacity: 1!important;
          border: none!important;
          width: 100%!important;
          padding: 0 0 0 10px !important;
          ul.dropdown-menu {
              display: none;
          }
      }
      li {
          width: 100%;
          float: none;
          ul {
              height: 0;
              overflow: hidden;
              &.menuShow {
                  height: auto;
                  display: block!important;
                  box-shadow: none!important;
                  -webkit-box-shadow: none!important;
              }
          }
          a, span.nav-header {
              position: relative;
              padding: 10px 20px!important;
              @include rtl-text-align-left();
          }
          .fa{
            margin-right: 5px;
          }
          span.caret {
              position: absolute;
              @include rtl-right(5px!important);
              top: 50%;
              border: none!important;
              width: 40px;
              height: 40px;
              text-align: center;
              margin: 0!important;
              line-height: 40px;
              transform: translateY(-50%);
              cursor: pointer;
              &:before {
                  content: "\f105"!important;
                  font-family: FontAwesome;
                  transform: translate(50%, 50%);
                  color: #777;
              }
              &.open:before {
                  content: "\f107"!important;
              }
          }
      }
  }
  @media (max-width: 480px){
    ul.sunfw-tpl-menu .caret:before {
      top: -50%;
      left: -50%;
    }
  }
}
body .off-canvas-base .toggle-offcanvas.middle {
  padding: 20px 5px 5px 5px !important;
}